MAP Web Author FAQ

A: Our recommended procedure is as follows:

1. Upload your map to your web server. After running the web export from MAPublisher in Illustrator you should have a file index.html and a folder index_data in the location you chose to export to (if you named your index.html file differently, the _data folder will be named accordingly). Copy index_data up to your web server, into the folder that contains the web page that you want your map to appear in.
2. Place an html div element into the location in the page where you want your map and give it an id.
3. Add a script element into the page header that calls AVENZA.embedViewer with the id of the div for your map. Take a look at the index.html file that MAPublisher created for your map as an example (in fact, it’s easiest to just copy and paste from index.html to your web pages as needed).
4. Your web map is ready to go!

How you place the div into your page depends on how it is laid out. Here are some examples of maps embedded into pages with common types of html layout techniques. View source on the pages to see how they work and to get a feel for how to embed Avenza web maps.

• A page laid out with positioned div elements (Recommended) [view]
• A page laid out with proportionally sized div elements [view]
• A page with a standard flow layout (i.e. without explicitly positioned elements) [view]
• A page laid out with tables [view]
• A page using an iframe [view]

Q: I can’t access the head section of the page that I’m embedding my map in. Is there another place I can put the script elements required for the JavaScript API?

A: Aside from the head section the script elements can be placed anywhere in the page after the div for your map. For example:

<div id="cntr">
	<div id="map">
	<p>
	For the cool interactive map, you need to install
	<a href="http://www.adobe.com/go/getflash">Adobe Flash Player</a>
	</p>
	</div>
	<script type="text/javascript" src="map_data/swfobject.js"></script>
	<script type="text/javascript" src="map_data/avenza.js"></script>
	<script type="text/javascript">
		AVENZA.embedViewer("map", "750", "500",
			{
				baseURL: "map_data"
			}
		);
	</script>
</div>

Q: What version of Flash Player do Avenza web maps require?

A: We require 9.0.115.

Q: I get a dotted border in the web page around my map when it’s clicked on. How do I get rid of that?

A: Some older browsers display that border around Flash objects when they are clicked on. Add this to the CSS for your page to remove it.

object { 
	outline:none;
}

Q: Can I use Avenza web maps without using the JavaScript API?

A: Yes. We recommend using our API, but Avenza web maps are just normal Flash SWF Movies and can be included in pages using standard Flash embedding techniques. If you want to change the options for Flash Player or can’t use JavaScript on your site embedding the map on your own is an option.

• A map embedded in a page using the swfobject JavaScript API [view]
• A map embedded in a page without using JavaScript, just html object tags [view]

Q: I’ve got an Avenza web map embedded into a page without using the AVENZA.embedViewer API. Can I still use the other API functions with it?

A: Yes. You need to create an AVENZA.Viewer object for your map first though. Here is an example.

Q: Can I have more than one web map deployed to the same directory on my server?

A: Yes. Use the baseURL map parameter to the AVENZA.embedViewer API to set the maps to load from different subdirectories. In fact it’s possible to have more than one map
embedded in the same web page this way. Refer to this example to see how.

Q: In version 8.1 there was an option to export the map using “External (layerCheckboxes.js)” that does not appear in 8.2. How do I use that feature now?

A: Using external HTML check boxes to hide and show layers is still supported in 8.2. That feature is now accessed through the JavaScript API. An example of how to use it can be found here.

Q: Why doesn’t the background loading image appear for my map?

A: The background loading image is inserted by the Avenza JavaScript API behind the flash map as it is embedded into the page. In order for the API to do its work a couple of conditions must be met.

1. The map must be using the NETWORK security sandbox. This will be the case if the sandbox is set to AUTO and it being loaded from a web-site or if NETWORK is explicitly chosen from the export dialog.
2. The element containing the “map” div element must be positioned using CSS and the “map” div itself must not be positioned. Like this:

   <div style="position:relative">
   	<div id="map">
   	</div>
   </div>
   

   The example html file created by MAPublisher is formatted this way and we suggest you use it as a source for copy and pasting into your own pages.

Another issue is that if a background color is specified for the “map” div using CSS it will become opaque and the background loading image will not be visible through the loading map.

Q: I want to change the background loading image. Can I replace it or remove it?

A: The image is saved in a file called map.png in the data folder for your exported map. You can update the file or remove it. If you remove the file, you should set the disableBackgroundImageElement option in the AVENZA.embedViewer API to avoid having the viewer attempt (and fail) to download the file at runtime.

Q: Why doesn’t the background loading image for my map match the initial pan and zoom that I have set in the embedViewer API call?

A: The background image is created in Illustrator as part of the exporting process. Changes made to the initial pan and zoom settings after that will not be taken into account. To create an updated background image, just reexport it again from Illustrator with the newer settings.

Q: How do I set custom button images for my map viewer with 8.2?

A: This feature is accessed through CSS. Specifically you set the image property of the CSS for the button you want to customize. An example of how to do this can be found here.

Q: My exported map is performing slowly at runtime. What can I do to speed it up?

A: In general, runtime performance is largely based on the complexity and amount of artwork and web tags that appear in the map. The most effective things you can do are:

1. Reduce overall map size.
2. Simplify artwork.
3. Reduce the number of web tags in the map.
4. Simplify web tag content.

Though likely less effective, here are some additional tips to try out:

• Turn off the Overview Map. Rendering the smaller version of the map can be expensive.
• Turn on the Use Centroid Instead of Mouse for Callout Position option. This will improve performance of the hover callout.
• Turn off the Use Preserve Appearance Setting For Flash Export option. This will allow Illustrator to further simplify your map when exporting it to SWF.
• Set the JPEG Image Quality & Resolution option to low.
• Rasterize complicated artwork in your Illustrator file. The Timeline example map demonstrates how to do this.
• Use a fixed width and height for callout bubbles instead of auto-size.

Q: Can I setup my web map to have its binary content (swfs, images, zips) served from a different server than the html page that it is embedded in?

A: Yes. Normally a MAPublisher web map is deployed to a single directory on a single web server. In a cross domain deployment files from a web map may be deployed in different directories on several servers. The most common reason for a cross domain deployment is to separate out binaries (images, swfs, zips) from html so that they can be served from an optimized server.

Configuration of where different web map components are loaded from is done using the JavaScript API.

To set up a cross domain deployment:

1. 1. Deploy the html, JavaScript (.js), swf, image files (.png, .jpg, etc.) and map data files (map.xml or map.xml.zip) to the servers where you want them.

1. 1. Install a crossdomain.xml Flash security policy file on the site that html content is served from. Instructions can be found on Adobe’s site here.

1. Set the URLs for the viewer, SWFs, images and map data in the parameters to the AVENZA.embedViewer API like this:

   AVENZA.embedViewer("map", "515", "400", {
   		viewerBaseURL: "http://192.168.1.171/XDomainViewer/",
   		swfBaseURL: "http://192.168.1.171/XDomainSWF/",
   		imageBaseURL: "http://192.168.1.171/XDomainImage/",
   		mapDataBaseURL: "http://192.168.1.171/XDomainData/"
   	}
   );
   

   Not all four have to be set. Refer to the JavaScript API documentation for more details.