Is there a way of automatically generating a HTML-Map compatible list of coordinates of polygon-like objects (e.g. countries on a map) with very distinctive borders?
Example image:
Map of CEE countries http://www.bankaustria.at/landkarten/CEE_2007_w524.jpg
Final output:
<map id ="ceemap" name="ceemap">
<area shape="poly" coords="149,303,162,301,162,298,171,293,180,299,169,309,159,306,148,306,149,303" href="austria.html" target ="_blank" alt="Austria" />
<!-- ... -->
</map>
Any tools/scripts extracting the coordinates of a polygon-like selection would be helpful.
Circle image maps will have the coordinates: coords=”x,y,radius” where xy are the coordinates of the center of the circle and the radius is the radius of the circle. Polygon image maps will have the coordinates: coords=”x1,y1,x2,y2,x3,y3….” where each xy pair defines a corner of the shape.
The <map> tag is used to define an image map. An image map is an image with clickable areas. The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Thanks for your help!
Although Jonathans hint to use the Sobel filter definitely would work, I chose Sparrs approach of first converting the bitmap into a vector image (via Inkscape) and then processing the SVG file. After studying some of the basics of the SVG spec, it was pretty easy to extract the - for HTML image maps needed - X/Y coordinates from all the other junk and generate a suitable code.
Although it’s no rocket science, someone might find this piece of code useful:
// input format: M 166,362.27539 C 163.525,360.86029 161.3875,359.43192 161.25,359.10124 C ...
private static void Svg2map(string svg_input)
{
StringBuilder stringToFile = new StringBuilder();
// get rid of some spaces and characters
var workingString = svg_input.Replace("z", "").Replace(" M ", "M").Replace(" C ", "C");
// split into seperate polygons
var polygons = workingString.Split('M');
foreach (var polygon in polygons)
{
if (!polygon.Equals(String.Empty))
{
// each polygon is a clickable area
stringToFile.Append("<area shape=\"poly\" coords=\"");
// split into point information
var positionInformation = polygon.Split('C');
foreach (var position in positionInformation)
{
var noise = position.Trim().Split(' ');
// only the first x/y-coordinates after C are relevant
var point = noise[0].Split(',');
foreach (var value in point)
{
var valueParts = value.Split('.');
// remove part after comma - we don't need this accurancy in HTML
stringToFile.Append(valueParts[0]);
// comma for seperation - don't worry, we'll clean the last ones within an area out later
stringToFile.Append(",");
}
}
stringToFile.AppendLine("\" href=\"targetpage.html\" alt=\"Description\" />");
}
}
// clean obsolete commas - not pretty nor efficient
stringToFile = stringToFile.Replace(",\"", "\"");
var fs = new StreamWriter(new FileStream("output.txt", FileMode.Create));
fs.Write(stringToFile.ToString());
fs.Close();
}
Open the map in Inkscape. If it is a bitmap, use Path -> Trace Bitmap to trace the edges. Clean up the vector data to include only the paths that you want to appear in your imagemap. Save the document, I suggest to a POVRay file. Now you have a list of vertices (and plenty of markup or metadata that you don't care about) in a plain text format. Converting from that to the requisite HTML syntax is still a problem, but not nearly as complex as the first step.
For what it is worth, there is a long standing feature request for Inkscape to include an option to export HTML image maps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With