107 lines
4.5 KiB
HTML
107 lines
4.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
|
||
|
|
<title>web_ready.tif</title>
|
||
|
|
|
||
|
|
<!-- Leaflet -->
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.5/dist/leaflet.css" />
|
||
|
|
<script src="https://unpkg.com/leaflet@0.7.5/dist/leaflet.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body { margin:0; padding:0; }
|
||
|
|
body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
|
||
|
|
#map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
|
||
|
|
.ctl {
|
||
|
|
padding: 2px 10px 2px 10px;
|
||
|
|
background: white;
|
||
|
|
background: rgba(255,255,255,0.9);
|
||
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||
|
|
border-radius: 5px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: 18pt;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.src {
|
||
|
|
font-size: 10pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/* **** Leaflet **** */
|
||
|
|
|
||
|
|
// Base layers
|
||
|
|
// .. OpenStreetMap
|
||
|
|
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', minZoom: 17, maxZoom: 23});
|
||
|
|
|
||
|
|
// .. CartoDB Positron
|
||
|
|
var cartodb = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>', minZoom: 17, maxZoom: 23});
|
||
|
|
|
||
|
|
// .. OSM Toner
|
||
|
|
var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.', minZoom: 17, maxZoom: 23});
|
||
|
|
|
||
|
|
// .. White background
|
||
|
|
var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==", {minZoom: 17, maxZoom: 23});
|
||
|
|
|
||
|
|
// Overlay layers (TMS)
|
||
|
|
var lyr = L.tileLayer('./{z}/{x}/{y}.png', {tms: 1, opacity: 0.7, attribution: "", minZoom: 17, maxZoom: 23});
|
||
|
|
|
||
|
|
// Map
|
||
|
|
var map = L.map('map', {
|
||
|
|
center: [41.200992901860744, 120.59209119332711],
|
||
|
|
zoom: 23,
|
||
|
|
minZoom: 17,
|
||
|
|
maxZoom: 23,
|
||
|
|
layers: [osm]
|
||
|
|
});
|
||
|
|
|
||
|
|
var basemaps = {"OpenStreetMap": osm, "CartoDB Positron": cartodb, "Stamen Toner": toner, "Without background": white}
|
||
|
|
var overlaymaps = {"Layer": lyr}
|
||
|
|
|
||
|
|
// Title
|
||
|
|
var title = L.control();
|
||
|
|
title.onAdd = function(map) {
|
||
|
|
this._div = L.DomUtil.create('div', 'ctl title');
|
||
|
|
this.update();
|
||
|
|
return this._div;
|
||
|
|
};
|
||
|
|
title.update = function(props) {
|
||
|
|
this._div.innerHTML = "web_ready.tif";
|
||
|
|
};
|
||
|
|
title.addTo(map);
|
||
|
|
|
||
|
|
// Note
|
||
|
|
var src = 'Generated by <a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright © 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> & <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>';
|
||
|
|
var title = L.control({position: 'bottomleft'});
|
||
|
|
title.onAdd = function(map) {
|
||
|
|
this._div = L.DomUtil.create('div', 'ctl src');
|
||
|
|
this.update();
|
||
|
|
return this._div;
|
||
|
|
};
|
||
|
|
title.update = function(props) {
|
||
|
|
this._div.innerHTML = src;
|
||
|
|
};
|
||
|
|
title.addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
// Add base layers
|
||
|
|
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);
|
||
|
|
|
||
|
|
// Fit to overlay bounds (SW and NE points with (lat, lon))
|
||
|
|
map.fitBounds([[41.19998373731829, 120.59343724655139], [41.202002066403196, 120.59074514010283]]);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|