Last active
April 18, 2017 22:52
-
-
Save uprel/1e34ef11e6c0a5a4a672 to your computer and use it in GitHub Desktop.
Leaflet multi map with sync plugin for showing MapQuest and MapBox tiles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Leaflet Sync Demo</title> | |
| <link rel="stylesheet" href="../leaflet/leaflet.css" /> | |
| <link rel="stylesheet" href="../leaflet/plugins/zoomdisplay/dist/leaflet.zoomdisplay.css" /> | |
| <style type="text/css"> | |
| html, body { width: 100%; height: 100%; margin: 0; } | |
| #map1, #map2 { width: 49.5%; height: 100%; } | |
| #map1 { float: left; } | |
| #map2 { float: right; } | |
| #cont { width: 100%; height: 300px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cont"> | |
| <div id="map1"></div> | |
| <div id="map2"></div> | |
| </div> | |
| <script type="text/javascript" src="../leaflet/leaflet.js"></script> | |
| <script type="text/javascript" src="../leaflet/plugins/sync/L.Map.Sync.js"></script> | |
| <script type="text/javascript" src="plugins/zoomdisplay/dist/leaflet.zoomdisplay.js"></script> | |
| <script type="text/javascript" src="../leaflet/mapbox_demo.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var center = [48.737300, 16.133228]; | |
| var mqLayer = L.tileLayer("http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", { | |
| subdomains: "1234", | |
| attribution: "© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. Tiles Courtesy of <a href='http://www.mapquest.com/'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>" | |
| }); | |
| var mqSat = L.tileLayer("http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png", { | |
| subdomains: "1234", | |
| attribution: "© Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. Tiles Courtesy of <a href='http://www.mapquest.com/'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>" | |
| }); | |
| var mapBoxTerrain = L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox © OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a>", | |
| maxZoom: 20, | |
| id: 'mapbox.streets', | |
| accessToken: 'your access token' | |
| }); | |
| var mapBoxSat = L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox © OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a>", | |
| maxZoom: 20, | |
| id: 'mapbox.satellite', | |
| accessToken: 'your access token' | |
| }); | |
| var mapBoxStreet = L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox © OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a>", | |
| maxZoom: 20, | |
| id: 'mapbox.streets-basic', | |
| accessToken: 'your access token' | |
| }); | |
| var mapBoxHybrid = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: "<a href='http://www.mapbox.com/about/maps/' target='_blank'>© Mapbox © OpenStreetMap</a> <a class='mapbox-improve-map' href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a>", | |
| maxZoom: 20, | |
| id: 'mapbox.streets-satellite', | |
| accessToken: 'your access token' | |
| }); | |
| var map1 = L.map('map1', { | |
| layers: [mqLayer], | |
| center: center, | |
| zoom: 3 | |
| }); | |
| var map2 = L.map('map2', { | |
| layers: [mapBoxTerrain], | |
| center: center, | |
| zoom: 3 | |
| }); | |
| map1.attributionControl.setPrefix(''); | |
| map2.attributionControl.setPrefix(''); | |
| L.control.layers({ | |
| "MapQuest OSM": mqLayer, | |
| "MapQuest Aerial": mqSat | |
| }).addTo(map1); | |
| L.control.layers({ | |
| "mapBox Street": mapBoxTerrain, | |
| "mapBox Street Classic": mapBoxStreet, | |
| "mapBox Satellite": mapBoxSat, | |
| "mapBox Hybrid": mapBoxHybrid | |
| }).addTo(map2); | |
| map1.sync(map2); | |
| map2.sync(map1); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment