simplemaps

JavaScript API | Documentation

Note: There are major changes to the API starting with version 3.0+. The old 2.9 docs are here.

Because our HTML5 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

simplemaps_worldmap.region_zoom(region_id) Zoom the map to the continent of your choosing where # is the continent number you would like to zoom.
simplemaps_worldmap.state_zoom(state_id) Zoom the map to the state of your choosing where id is the state where you would like to zoom.
simplemaps_worldmap.back() Zooms out. Equivalent to clicking the back arrow in the map.
simplemaps_worldmap.zoom_level Tells you the current zoom level of the map. ('out', 'region', 'state')

Trigger Popups

simplemaps_worldmap.popup(type, id) Open a popup/tooltip programmatically. Type can be ['location', 'state', 'region']. Example: simplemaps_worldmap.popup('location', '0')
simplemaps_worldmap.popup_hide() Hides any open popup

Map Instances (example)

create_simplemaps_worldmap() create a map instance with its own name. Example: var map1=create_simplemaps_worldmap();
map_instance.mapdata mapdata is bound to each map instance. Example: map1.mapdata.main_settings.state_color='red';

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();

HTML5 Map Documentation v3.2

The current version is 3.2. Older docs: 3.0, 2.9
Already a customer and need to update?

Customization

Installation

Common Questions

Troubleshooting

JavaScript API

© Simplemaps.com 2010-2015 | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
Deprecated Maps: Flash USA Map | Flash World Map | Flash Canada Map | Flash Europe Map | Flash Congress Map
Formerly FlashUSAmap.com and Flashworldmap.com