Search code examples
imagemapborder

How to Automatically Create ImageMaps of Grey Maps from Wikipedia?


I have a project using various members of Wikipedia's grey maps: http://en.wikipedia.org/wiki/Wikipedia:Blank_maps. I fill them in with colors depending on which countries, states or provinces a user selects by clicking on the shape or by checking a checkbox.

I would like to write a script that creates imagemaps automatically of each country, state or province by somehow getting the X and Y pixel location of the borders of a country, state or province albeit without the names of these entities, which I will fill in later. I have already done the World map by hand and found a open source US map image map demo. I would now like to create my maps more rapidly.

I use PHP and GD to floodfill the shapes, so I guess I could use one central pixel location of the shapes as well. Any suggestions? This script is a possibility but is still somewhat manual: http://abhinavsingh.com/blog/2009/03/using-image-maps-in-javascript-a-demo-application/. Also Mapedit, http://www.boutell.com/mapedit/, has a magic wand feature that works pretty well, but again I have a feeling this can be done automatically.


Solution

  • 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: http://wherehaveibeen.info/images/india.png and the mess now of the coordinates for the imagemap that needs to be split up into separate polygons: http://wherehaveibeen.info/images/black.php