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/v0.7.7/leaflet-src.js'></script>
- <script src="leaflet-side-by-side.js"></script>
- <link href='http://cdn.leafletjs.com/leaflet/v0.7.7/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: '© <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
- }).addTo(map);
-
- var stamenLayer = L.tileLayer('//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> — ' +
- 'Map data {attribution.OpenStreetMap}',
- minZoom: 1,
- maxZoom: 16
- }).addTo(map)
-
- L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
- </script>
- </body>
- </html>
|