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.
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.
mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:
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.
All customizations are automatically saved to the
When you are finished, you can install the map on a webpage by embedding both scripts and adding a target
All around, SimpleMaps aims to simplify the process of creating interactive maps while retaining the flexibility that has made SVG maps so popular.