Using the Leaflet Sync plugin to display multiple Leaflet maps on one webpage

The Leaflet Sync plugin allows the user to display multiple leaflet powered maps on one web page. In addition, the sync function allows the maps to move in sync as the user clicks the zoomControl buttons.

Download the plugin at https://github.com/turban/Leaflet.Sync

 

//Create a map object, load as layer the var osm, set the center and zoom.  Note that this is the variable creating the map going into the div container-map1  

   var map1 = L.map('map1').setView( [9.3, 8.9] , 5);

//Create the second map object, load as layer var stamen, set the center 
and zoom.  Note that this is the variable creating the map going into 
the div container-map2   
var map2 = L.map('map2').setView(9.3, 8.9] , 5);

// Create a var object and load tile layer from openstreet maps to map1

var osm = L.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’,{attribution: ‘&copy; <a href=”http://www.openstreetmap.org/copyright”>OpenStreetMap</a&gt; &copy; <a href=”https://mapsnigeriainitiative.wordpress.com”>mapsNI</a>&#8217;}).addTo(map1);

//Create a var object and load tileLayer from Stamen maps to map2

var stamen = L.tileLayer(‘http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png’, { attribution: ‘&copy; <a href=”http://www.openstreetmap.org/copyright”>OpenStreetMap</a&gt; &copy; <a href=”http://cartodb.com/attributions”>CartoDB</a>&#8217;, subdomains: ‘abcd’, maxZoom: 19}).addTo(map2);

 

//Sync the two maps
        map1.sync(map2);
        map2.sync(map1);
//In our example, we add one marker to map1 and another to map2. 
This is just for demonstration purposes.
L.marker([9,8]).addTo(map1);
L.marker([9,8]).addTo(map2);

Screenshot of the example displaying the two leaflet maps side by side on a 
webpage.
Capture-8
 See live map by clicking the link below:
http://htmlpreview.github.io/?https://github.com/mayotunde/work/blob/master/leafletsync.html
Download the plain text version here- 
https://www.dropbox.com/s/a0m6a57jm1pu38r/Using%20Leaflet%20sync%20plugin.txt?dl=0

See Source code below:
ppt-001

Check out further documentation at https://github.com/turban/Leaflet.Sync

 

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s