47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
|
<!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>
|