The problem with maps is that each state image has a square or a rectangle for its boundary even if there is transparency like in png files. Therefore they overlap each others.
I solved this problem by using the html map tag.
If you do that, it is a pain because you have to find each x and y axis when the lines change direction. However when you have it done you can set a click event and then load symbols of states with whichever easing or animation you want to.
Here is the code with some explanation:
// find the coordinates of each shape by placing a temporary rectangle on the map and move it around the shape - take x and y axis every time
// and separate by commas.
$('<img id="usmap" width="551" height="379" src="images/states_imgmap.png" usemap="#usmap">'+
// for a polygone use shape="poly"
'<area id="California" shape="poly" title="California region:West" coords="13,83,48,94,41,129,79,190,72,219,15,159,9,107"/>'+
// for a rectangle shape use shape="rect"
'<area id="Colorado" shape="rect" title="Colorado Region: Mountain" coords="143,128,202,184"/>'+
// here is a help box but you could use a click event with whatever you want it to do.
// I would have symbols with animation for each state that could be deleted with a click event for example.
Sample: Colorado, California
Also Joel had given me an example using the same system:
Another idea is to use SVG files but I have not done that at this time.
Thank you for the thoughtful replies. I have probably chosen a very ambitious project for my first Edge Animate endeavor and I have very little web experience - most of my background is in print.
I had hoped to leverage my Illustrator knowledge by creating SVG files from my custom US Illustrator map. However I am finding the SVG files do not behave as I would have hoped - in multiple ways.
I had hoped that making one file for the US, then 50 individual selectable state files would enable each to be selected individually, then move and increase while their relevant statistic appear. However, because the files exported from Illustrator extend to the entire artboard, each file is the full width of the stage, not to their paths. Doesn't that negate their ability to be selected, or am I missing something?
Secondly I had imagined that SVG files would scale infinitely, however I've noted warnings that iOS devices have trouble with files over 1024 so I've exported my files to that dimension and in any window in excess of that amount pixelation occurs.
I have not used SVG files in my projects, so I really have little knowledge on how to implement them in Edge. I think you might want to start another thread and ask these questions there.
The only way I have done my maps is with the example I gave you which worked perfectly for me or with loading different files with arrays objects and then using hide() and show() with buttons.
I hope you find answers to your questions. We have some very smart people here!
1 person found this helpful
Out of curiousity has anyone played around with using edgecommons SVG options in this manner. I have just started looking into edgecommons, today wanting to get more info on spotlight. Options with edgecommons says you can reach into a SVG to change specific features. I wonder if you could also use it to change color, size, etc of individual map shapes within a SVG. If I run across any good links on this today I will come back and drop them here. Thanks for the ear. I am a graphics reporter at a newspaper so this would be an obvious for my needs.
I just looked at the sample and yes, you can. It seems that it is exactly what you need and I will look into it myself. Seems like a great way to do maps. Actually I cannot believe I missed it!
Tutorial link in the file:
I'm all over it. Will update the post with results.
Zero luck getting this to work with my map.
SyntaxError: missing } after property list usmap2_edgeActions.js
No idea what to do about that.^
I Will definitely look into it. I like challrnges.