JavaScript API | Documentation

Note, there are major changes to the API starting with version 3.0. More info.

Choose your map: HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 County Map HTML5 Congress Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map

Because our HTML5 maps are built using JavaScript and SVG, it is possible to manipulate the map in real time using JavaScript. We have put together an API to make it easy to communicate with our map by calling JavaScript functions. The API makes it possible for the map to communicate and interact with other elements on the page.

Standard Framework

1. Edit the properties of the map

   Edit the simplemaps_worldmap_mapdata object using JavaScript. For example:

   • To change the width of the map:

     simplemaps_worldmap_mapdata.main_settings.width=500;

   • To change the color of a state:

     simplemaps_worldmap_mapdata.state_specific['GA'].color='red';

   • To change the description of a location:

     simplemaps_worldmap_mapdata.locations[0].description='New';

2. Update the map with one of two functions

   • simplemaps_worldmap.load()
     

     Load or reload the map. This will create or recreate the map. Slower.

   • simplemaps_worldmap.refresh()
     Refresh the map. This updates the map properties (colors etc.) but does not redraw the map. Very fast.

Zooming

It's possible to use JavaScript to zoom around the map.

Zoom examples

simplemaps_worldmap.state_zoom("ID"); //Zoom to state by id
simplemaps_worldmap.region_zoom("0"); //Zoom to region by id
simplemaps_worldmap.region_zoom("0", function(){ alert("Zoom done")} ); //Zoom and callback when complete
simplemaps_worldmap.location_zoom('0', '4');

Trigger Popups

Map Instances (example)

Advanced/Miscellaneous

Load the Map Manually

At times, it is useful to load the map manually, instead of allowing the map to load itself after the page has loaded. To load the map manualy:

1. Edit the mapdata.js file so that main_settings.auto_load='no';. This prevents the map from loading automatically.
2. Load the map with simplemaps_worldmap.load();