Friday, November 7, 2014

Tips to share a leaflet map with multiple ROIs

Do you have a Leaflet map? Yes. Can you panned and and zoomed to a particular event or ROI in the map? Yes. Then, how can you share that map zoomed or centered with ROI/events to your webpage or email as a link? One of the answers may be set the zoom level and set view near the ROI.  Alright, what will you do if you have a map with multiple ROI/events? Do you make multiple maps with multiple zoom level and view? You can, but probably not a good idea to do that. 

The solution comes here, leaflet-hash.js, solves your needs, it is a JavaScript library written by Michael Lawrence Evans, which appends the URL hashes to web pages automatically and the hash changes with Leaflet map on drag or zoom. The hash consists of map zoom level and latitude/longitude of the center of map viewport, everything you need to share the map with focused ROI as link in following simple steps:

1.  Prepare a basic Leaflet map using the Leaflet Quick Start Guide
2. Include leaflet-hash.js.
3. Once you have initialized the map (an instance of L.Map), add the following code:
4.  // Assuming your map instance is in a variable called map
     var hash = new L.Hash(map);

Mike has a nice demo of Leaflet hash implementation at


Interactive Mapping , Leaflet , Web Mapping


Post a Comment


© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me