My Account     Contact Us     Cart

Creating HTML callouts for MAP Web Author

MAP Web Author, a feature of Avenza MAPublisher for Adobe Illustrator is a versatile tool offering access to map attributes for HTML as well as Flash.

The above map was made with Toronto Transit Commission data freely distributed by the city of Toronto. I purposely made this map long and narrow to reveal a potential issue that can arise when presenting a lot of attribute data in map callouts. As you hover over the red points representing transit stops, you will notice the callout bubble with attribute information for each stop. As you hover around the centre of the map, you will notice that callouts popping up above the half way point of the map have their titles truncated, and those below will sometimes not show the callout’s final line.

This is due to the fact that callouts, as generated by the MAP Web Author API can only be seen over the extents of the flash map. One can set the flash map to be bigger than needed to allow callouts to fully display, but this will complicate panning and zooming functions.

Instead, what we can do is create HTML callouts whose placement are not limited to the extents of the flash map. These HTML callouts can be populated with attributes from the exported flash map. HTML callouts offer a further advantage with respect to image placement. Flash callouts only support HTML version 1.0, which has very limited image placement functionality.

Let’s look at some of the code behind this map. The “popup” div is one of two div objects in the code, the other being the “map” div. The appearance properties of the popup div are set with CSS as follows:

#popup {
	position:absolute;
	top: 100px;
	left: 100px;
	width: 300px;
	height: 125px;
	background: #00ccff;
	padding:2px 2px 2px 2px;
	visibility:hidden;
}

A javascript listener is added to the mouse move event for the map div. When the mouse is over-top a map feature the function shows the popup div, moves it next to the mouse and updates its attribute values. When the mouse is not over a feature, the function hides the popup div.

function onMouseMove (event) {
	var f = theMap.retrieve(AVENZA.FEATURE);
	if (f.attributes) {
		$("#popup").css("top", event.pageY+20);
		$("#popup").css("left", event.pageX+20);
		$("#popup").css("visibility", "visible");

		$("#name").html(f.attributes.name);		
		$("#stopid").html(f.attributes.stopid);
		$("#accesible").html(f.attributes.accessible);
		$("#Latitude").html(f.attributes.latitude);
		$("#Longitude").html(f.attributes.longitude);
		$("#sundayonly").html(f.attributes.sundayonly);
		$("#trapezeid").html(f.attributes.trapezeid);	
	}
	else {
		$("#popup").css("visibility", "hidden");
	}
}

The jQuery AJAX library is used to update the CSS and HTML of the popup div.

Source code for the HTML callout map can be found here. To adapt this code for your own uses update paths and attribute names to match your own web map.


Leave a Reply