Sponsored Content This post is about a commercial product that we think will appeal to DailyJS readers.
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 mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:
in the main_settings object. To override that default and make the USA blue, you'd simply add:
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.
When you are finished, you can install the map on a webpage by embedding both scripts and adding a target <div>: