Introduction to SimpleMaps

2015-04-09 00:00:00 +0100 by Alex R. Young

Interactive maps are a great way to visualize geographic data or improve website navigation. Now that SVG is supported by all modern browsers, it has become a popular format for interactive maps. Vector maps scale beautifully and are an attractive and lightweight alternative to Google Maps and OpenStreetMap.

SimpleMaps is a commercial interactive map library. It adds region-level zooming, responsiveness, legacy browser support, latitude/longitude calibration, mobile-friendly tooltips and more to an otherwise static SVG file. If you'd prefer to implement these features on your own, it also offers a free library of web-optimized SVG maps (MIT licensed).

This tutorial will demonstrate what is possible with SimpleMaps and how to get started. To begin, go to http://simplemaps.com/world and download the world map trial. Open test.html in a web browser to view the map.


The map consists of two JavaScript files: worldmap.js and mapdata.js. The vector paths and the map logic are stored in the worldmap.js file. All customizations to the map are stored in the mapdata.js file. The map can be easily customized by making changes to the mapdata.js file in a text editor and refreshing the browser.

The mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:

state_color: 'red',

in the main_settings object. To override that default and make the USA blue, you'd simply add:

color: 'blue',

to the US state_specific object. The description property for each country accepts HTML which will be displayed in the tooltip upon hover or (when a mobile device is detected) click.

To speed up the customization process, SimpleMaps offers an online customization tool that makes it easy to customize properties quickly using a spreadsheet. Countries, locations, and regions can all be customized using this Excel-like interface. Changes to the map are reflected in real time.


All customizations are automatically saved to the mapdata.js file. This makes it easy to switch between the convenience of the spreadsheet editor and the control of making changes directly to the JavaScript object. It is even possible to edit the JavaScript code online using the "Code" tab.


When you are finished, you can install the map on a webpage by embedding both scripts and adding a target <div>:

<script type="text/javascript" src="mapdata.js"></script>
<script type="text/javascript" src="worldmap.js"></script>
<div id="map"></div>

To fully integrate SimpleMaps with other web page elements you can utilize its JavaScript API. This makes it possible to update the map, listen for map events, and dynamically zoom around the map.

All around, SimpleMaps aims to simplify the process of creating interactive maps while retaining the flexibility that has made SVG maps so popular.