lain
/
leaflet-side-by-side


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
    <title>Leaflet Side-by-side</title>
    <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
    <script src="leaflet-side-by-side.js"></script>
    <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    </style>
</head>

<body>
    <div id='map'></div>

    <script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
    }).addTo(map);

    var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        attribution:
            'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
            'Map data {attribution.OpenStreetMap}',
        minZoom: 1,
        maxZoom: 16
    }).addTo(map)

    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
    </script>
</body>
</html>