Skip to content

Instantly share code, notes, and snippets.

@uprel

uprel/demo.html

Last active April 18, 2017 22:52
Show Gist options
  • Save uprel/1e34ef11e6c0a5a4a672 to your computer and use it in GitHub Desktop.
Save uprel/1e34ef11e6c0a5a4a672 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. uprel revised this gist Jun 2, 2015. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <!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>
  2. uprel created this gist Jun 2, 2015.
    69 changes: 69 additions & 0 deletions mapbox_demo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    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: "&copy; <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: "&copy; 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'>&copy; Mapbox &copy; 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'>&copy; Mapbox &copy; 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'>&copy; Mapbox &copy; 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'>&copy; Mapbox &copy; 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);