Generate HTML-Map from image

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:

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" />       
    <!-- ... -->

Any tools/scripts extracting the coordinates of a polygon-like selection would be helpful.


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.

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
					// comma for seperation - don't worry, we'll clean the last ones within an area out later
			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));

Need Your Help

Avoid extra static variables for associated objects keys

objective-c objective-c-runtime associated-object

When using associated objects, an Objective-C runtime feature available starting from iOS 4 and OSX 10.6, it's necessary to define a key for storing and retrieving the object at runtime.

Parse .strings file with Python

iphone python objective-c core-foundation

I'm trying to write a small Python script to parse the .strings file in my iPhone application project and determine which keys might not be in use. I'm, also doing some string matching to filter ou...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.