Autogenerate ImageMap Starts by Tracing Polygons?

[socrtwo]

I have a travel website where user can click on countries or states from the US to indicate where they have vistied. The counries or states then turn colors. The site is here: [wherehaveibeen.info ].

I would now like to generalize my methods so I can quickly get up and running maps and their repsective imagemaps of other countries like India, China, Canada and Mexico so users can also indicate in these countries which states or provinces they have visited.

I am using Wikipdia's PNG grey maps from here: [en.wikipedia.org ]. I can get black and white versions of these maps using edge detection and changing the map color to 2 colors as well as a couple of other steps using Irfan View. I can then also feed these two color outline only maps into an ASCII art generator program and get the outlines of the countries and states and provinces mostly replaced with say the # sign ASCII character and everything else, like water or state/province interiors left blank.

The question then is how do I find the X and Y pixel location of all the polygon borders? So I need first to identify the polygons in the ASCII art, in other words those section represented by the ASCII space character, and then find the X and Y location of the borders of the polygon as represented in the image grid location by the # character borders. Two polygons might obviously have some common border # character locations.

I know this can probably be done in Excel or other spreadsheet. Is there a way to do all of this say in Perl, PHP, Javascript or Python? I could start a Sourceforge project for a web service that would allow users then to automatically get a start at an imagemap by:
1. Uploading the images.
2. Using an edge detection say via IrfanView's commandline application, PHP GD or ImageMagic operation.
3. Decrease the color depth of the image to just two colors, black and white maybe with IrfanView's command line tool.
4. Allow editing of the image to thicken lines.
5. Convert this image two two character ASCII art.
6. Detect all the polygons and give the X,Y locations of all the polygon border pixels.
6. Autogenerate the imagemap skeleton code with each of the pixel locations of the polygon borders specified.

[socrtwo]

I see I can use GD PHP's imagecolorat and cycle through all the pixels to find those that are black. This works:

<?php
$im = ImageCreateFromPNG("india.png");
$width = imagesx($im);
$height = imagesy($im);
for ($cy=0;$cy<$height;$cy++) {
 echo '<p>';
 for ($cx=0;$cx<$width;$cx++) {
 $rgb = ImageColorAt($im, $cx, $cy);
 $col = imagecolorsforindex($im, $rgb); 
if ($col["red"] == 0 && $col["green"] == 0 && $col["blue"] ==0){
 echo $cx.", ".$cy." ";
 } else {echo "";}
}
}
?>

Can anybody suggest how to find the polygons in the huge multipolygon complex that results from running the above code on say a black and white 2 color map of India, where all the borders are black and the interior of the states and Indian Ocean is white?

Here is image of India: [wherehaveibeen.info ] and the mess of coordinates that needs to separated into respective state polygons: [wherehaveibeen.info ]

[socrtwo]

An almost perfect solution to this issue is by using SVG images and this translator of the svg code to imagmap area tags: [electricfairground.com ]. The result is the appropriate image map area tags, although the svg image may need to be resized, and the country or state/province areas all seem to be offset and occasionally jumbled up. So this require opening a page generated with the SVG image or exported PNG copy of the SVG file, in a wysiwig editor that allows you to move imagemap elements. Mapedit, is the best program for this, I think, although the free GIMP has an imagemap plugin that might work.

I'm trying to figure out what the pattern of the offset is and if I do I'll post it here:[wherehaveibeen.info ]. The author of the "Polygonator" clued me into his service and using svg map images from his article here: [electricfairground.com ]. He advocates there, the tracing of png images into svg images via Inkscape. But since Wikipedia already has maps in SVG format, why not go straight to the code? It turns out that svg files basically already have the polygons separated and the border regions speciied, at least in the Wikipedia grey maps,

http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

, they just need some cleaning up with the Polygonator.

I found if I opened up the SVG code in Notepad++ i could copy and paste in the entire contents of the SVG file and the polygonator will remove the unneeded code. A little clean up of the imagemap area tags is required afterwards but not much. The biggest problem is the mentioned generated area tags regions offests and the occasionl jumbled up overlapping locations of the imagemap areas in the generated code.

[edited by: whoisgregg at 7:58 pm (utc) on Jul 28, 2010]
[edit reason] Fixed URL code :) [/edit]

[whoisgregg]

Thanks for posting your progress, socrtwo! I've been following this thread knowing just how difficult this problem would be to solve but not having any specific advice to offer.

Glad to see you're making great headway with a solution. :)

[socrtwo]

Gregg,

Thanks so much for the appreciation. I found an additional solution on Sourceforge. The project Inkscapemap [sourceforge.net...] takes the idea one step further and makes a GUI where you can open an SVG map and work with the area tags in bulk. It's brilliant! However it doesn't work natively with the SVG maps I tried from the Wikimedia maps page mentioned before.

After I updated Java, the author's demo map did work for me. I'm not sure what the problem is, but maybe the software has too much error checking. I'm trying to reach the author to ask for a solution. I would love myself to create an online service version of his program. That would be pretty cool.

Thanks again, and let me know if you have any suggestions. On another subject I'm also trying to get my image map coloring done on a layer of a GIS display such as Geoserver, OpenLayer or Mapserver. They all have the imagemap feature built in, but the examples I've tried in one case didn't work (Geoserver), was too confusing (Openlayer), or gave me a 404 error message (Mapserver)...I guess I just have to press on per usual and work through the issues.