Getting Started !!!! :S

thank you michael!

thank you very much!

but now i want to do this! add an jpg image and put a marker or a point, giving this point the gps coordinates! and that's pretty much it!!

I'm pretty much doing the same thing. I'm building my own jpg map, and tossing on some markers. My end goal is a video game located on an alien world. I'm still learning the mechanics, but I've gotten the jpg w/ markers down pat.

My suggestion, is first learn how to use a standard map provider first. The example that comes with modestmaps uses googlemap images. Once you learn how to use modestmaps, its not too hard to use your own map provider.

YES!! that would be perfect!!

at least the part you're telling you just have!

the one that you put the .jpg image and put the markers!!

thanks!! =)

Ok, here is my map provider. It uses Zoomify image tiles.


/**
* @author migurski
* @revised by Michael
* $Id: ModifiedBlueMarbleMapProvider.as 07-12-2008 $
*/
package com.modestmaps.mapproviders
{
import com.modestmaps.core.Coordinate;
// Michael: Using linear projection
import com.modestmaps.geo.LinearProjection;
import com.modestmaps.geo.Transformation;
import com.modestmaps.mapproviders.AbstractImageBasedMapProvider;
import com.modestmaps.mapproviders.IMapProvider;

public class ModifiedBlueMarbleMapProvider
extends AbstractImageBasedMapProvider
implements IMapProvider
{
public function ModifiedBlueMarbleMapProvider()
{
super();

// Michael: The transformation and projection for this project are based on
// max zoom of 6 and lat/lon 0,0 through 10,10 using my own Zoomified imagetiles
// THIS NEEDS WORK!!
var t:Transformation = new Transformation(166.15776058793872, 0, 0,
0, -252.10142985756224, 44);
__projection = new LinearProjection(6, t);

// Michael: Coordinate(height, width, zoom).
// refers to imagetile names and zoom level (from first to last)

__topLeftOutLimit = new Coordinate(0, 0, 0);
__bottomRightInLimit = (new Coordinate(30, 45, 6)).zoomTo(6);
}

override public function toString():String
{
return "MODIFIED_BLUE_MARBLE";
}

// Michael: Remember to replace "localhost" when publishing to website
// Also when using Zoomify, dump all imagetiles in the same directory
override public function getTileUrl(coord:Coordinate):String
{
var sourceCoord:Coordinate = sourceCoordinate(coord);
return 'http://localhost/flex/game/imagemap/' +
(sourceCoord.zoom) + '-' + (sourceCoord.column) + '-' + (sourceCoord.row) +
'.jpg';
}

override public function sourceCoordinate(coord:Coordinate):Coordinate
{
var wrappedColumn:Number = coord.column % Math.pow(2, coord.zoom);

while (wrappedColumn < 0)
{
wrappedColumn += Math.pow(2, coord.zoom);
}

return new Coordinate(coord.row, wrappedColumn, coord.zoom);
}
}
}


Here is a simple marker, which I found somewhere on this website. Right now it's just a colored dot. Later it will be icons.


package Components
{
import flash.display.Sprite;
public class MyMarker extends Sprite
{
public function MyMarker()
{
graphics.beginFill(0xFF0000);
graphics.drawRect(0, 0, 10, 10);
graphics.endFill();
}

}
}


Hrm, I was going to post my mx:module, but these forums strip most of the text.

mmm just wondering? checking the code i realize that the images are place on the localhost! which kind of server i should use? apache?

and one last question, also i see that you put a bunch of images in the directory, can you put a sample code using your action script class?

thanks very much!! these responses have been very helpful

I'm running Abyss webserver on localhost, for testing only. When I'm done, I'll upload to a live server and change from localhost to www.gamename.com

The images are made with Zoomify (http://zoomify.com/express.htm). What zoomify does is take a really big image file, and split it into a bunch of 256x256 jpg images. For example, an image that is 11400x7650 when fed into zoomify will be split into 1824 individual tiles sized 256x256. I take take those files and dump them into http://localhost/flex/game/imagemap/. Zoomify produces another file called "ImageProperties.xml" that I place in http://localhost/flex/game/.

The folks at modest map have a tutorial for doing this. http://modestmaps.com/tutorial-actran... However, it doesn't completely work with AS 3.0 and flex. But you if you read it, it will help alot I think.

i just did everything you told me! now i cant see the image properly!! maybe its because as 3.0 and flex are not working well or im not using the example very well! i will keep trying to see if i can solve the problem!

but thanks michael, your information has been very helpful

tell me what you have, and I might be able to help

ok michael,

so im trying to develop a real time track system,

i just develop how to get the coordenates from my GPS to a java program,

im figuring out the way to send this data to flex, because i know you can do it,

but right now im trying to put the image .jpg of the map im going to use using modestmap,

im working with eclipse with the flex plug-in and right now using your action script class,

and i did everything you said but i cant see the map as it should be, i just see two parts and the rest are X marks, i dont know why, maybe its because modestmap doesn't integrate with flex very well or it's because not all of my image are 256x256, im a little bit frustated!

please give me a clue or something i can do!

thanks!!

You can't just plug an image into this without doing some extra stuff. First your image needs to be run through zoomify to produce the 256x256 tiles. Then you have to change 2 sections of code:

var t:Transformation = new Transformation(166.15776058793872, 0, 0, 0, -252.10142985756224, 44); __projection = new LinearProjection(6, t);

The above section is specific to my image. You have to calculate your own using the calculator: http://modestmaps.com/calculator.html

__bottomRightInLimit = (new Coordinate(30, 45, 6)).zoomTo(6);

For this section, you need to change the numbers to match the last file that zoomify creates. Zoomify files are named "0-0-0.jpg" through "z-c-r.jpg" (zoom-column-row). In my case, the last filename was "6-45-30.jpg". Yours will be different. Also the zoomTo(6) needs to match the first number from "6-45-30.jpg"

If you show me your map image, I could give you the numbers to use for both sections of code.

hey michael!

i already did that and these are my numbers:

var t:Transformation = new Transformation(457091.8017029589, -9493277.909784141, 2268418.1037941957, 10218126.778680877, -965893.1502820243, 12121804.595122231);
__projection = new LinearProjection(11, t);

but i cant still see nothing! just a bunch of X Marks :S

and also i can see that in the tutorial of modest map is this line

defineImageProperties('http://actransit.modestmaps.com/', 11258, 7085);

that you never use, just below super();

but here is the image

also, i was thinking!!

i really dont need to zoom the image at all,

the only thing i need its to plot coordinates into the image i just sent

The image you just posted.... is that a full size image? or did you shrink it to post it here?

it got shrink when i posted it, but its a 1399x812 image

that's what I needed. gimme a little bit. I'm learning while I help ;)

do you have a set of coordinates you need to use?

this project is for my thesis, im working on a real time track system for the internal bus of my university,

so i will set a gps device into the bus and send the coordinates to a server in which will be hosted the image i sent you, so i need to plot the coordinates into the map so i can set a marker moving in real time,

something like this

http://ncsu.transloc-inc.com/

but with only one bus

Try this:

link to working copy
link to source code
link to image tiles

FYI, I'm still having trouble with coordinate transformation. What I have posted will work just fine, but I had to struggle with it. I learned a few things tonight, but I'm still scratching my head.

michael im really exicted about this!

but i have two questions:

1) do i have to place the project in my localhost? or i can run it from eclipse workspace

2) i cant see where is the file map.swf located,

thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!

never mind! i just found the way to run the program! everything works just PERFECT!!! THANK YOU!!!!!!

i have another question, how do you calculate the transformation values!! i think that's the main problem here! because now im going to use a bigger image!!

Well, I'm not sure I can explain transformation because it's not working like I think it should. Try these threads, (the same ones I'm studying)

http://getsatisfaction.com/modestmaps...

Oh, and make sure you change the URL for your imagetiles in "FranImageMapProvider.as". It currently points to my webserver. You'll need to point it to yours.

sure! i can see your example and everything!

but when i change the image, because i'll use a bigger one! i have to change the transformation values, so when i have done all this!

my tansformation number doesnt seem to work very well because i cant see the image all and also i cant drag it,

what resolution picture are you using?

hi michael,

the image i want to use right now its a 3497x2030 and i was wondering, how do you do the transformation without the lat and lon values,

I'll try to explain, but first I'm going to make sure it will work for me.

thanks!!!

this is one important step for my thesis!!

Ok, here we go. I made an image that is 3497x2030. Then I processed it with Zoomify and produced 151 imagetiles. The last file in the list is "4-13-7.jpg". The numbers mean: Zoom level 4, 13th column, 7th row.

Place the "TileGroup0" directory on your server, and make sure that your script is pointing at it. Then place "ImageProperties.xml" in the parent directory.

Now, you need to pick three coordinates on this map, and plug them into the transformation calcutor http://modestmaps.com/calculator.html. For mine, I'll pick coordinates for top left corner, the bottom left corner, and the bottom right corner. Here are the numbers I placed into the calculator:

top left corner is image 4-0-0. Coordinates lat 33, lon -87
plug this in line 1: 33, -87, 0, 0, 4

bottom left corner is image 4-0-7. Coordinates lat 32, lon -87
plug this in line 2: 32, -87, 7, 0, 4

bottom right corner is image 4-13-7. Coordinates lat 32, lon -85
plug this in line 3: 32, -85, 7, 13, 4

I used linear projection, and the result is:
var t:Transformation = new Transformation(372.42256683503694, 0, 565.5000000000027, 0, -401.0704565915757, 230.9999999999997); __projection = new LinearProjection(4, t);

Now copy and paste those results into FranImageMapProvider.as

Next copy and paste this:
__topLeftOutLimit = new Coordinate(0, 0, 0);
__bottomRightInLimit = (new Coordinate(8, 14, 4)).zoomTo(4);

Explanation: The first coordinate is your top left imagetile, and the farthest outward possible zoom (0,0 is the top left image, and 0 is the most outward zoom). The next coordinate is your bottom right imagetile and the maximum zoom (7, 13, but add one to both numbers). 4 is the max zoom.

Now in map.mxml, when you call your <modest:map>, use these settings:
center="32.5,-86"
zoom="2"

Test your app.</modest:map>

Thank you very much Michael!

everything works JUST FINE!!

now im trying to add a zoom controller! so i can zoom in and zoom out of the image!!

lol, I had deleted my zoom controls because you said you didn't need to zoom. Anyways, it's easy to add zoom.

mx:Button x="10" y="40" label="-" id="ZoomOut" click="franimage.map.zoomOut();"/

mx:Button x="10" y="10" label="+" id="ZoomIn" click="franimage.map.zoomIn();"/

You will be able to zoom out too far, and I'm still trying to figure out how to stop that.

can you give me an example code?

where do i have to place the button?

im not sure! :S

In flex, open map.mxml and switch over to design view. On the bottom left in the components pane, find the "button" component and drag it onto your map. Now switch back to source view. Copy and paste this into your button tag:

click="franimage.map.zoomIn();"

It should look like this when you are done:

mx:Button x="10" y="40" label="-" id="Zoomin" click="franimage.map.zoomOut();"/

besure to include brackets < > around the the statement. This forum won't let me use them.

look in this mxml file for an example:

http://www.petrys.net/game/map.mxml