60 lines
1.9 KiB
HTML
60 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
|
|
<style type="text/css">
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
html, body, #map {
|
|
height: 100%;
|
|
}
|
|
#map {
|
|
cursor: default;
|
|
}
|
|
.leaflet-dragging #map {
|
|
cursor: grabbing;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script type="text/javascript">
|
|
var map = L.map('map').setView([49.46200, 11.1030], 17);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
|
maxNativeZoom: 19,
|
|
maxZoom: 22
|
|
}).addTo(map);
|
|
var links = new L.TileLayer('http://localhost:8000/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
|
|
var routers = new L.TileLayer('http://localhost:8001/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
|
|
layersControl = new L.Control.Layers({}, {"links": links, "routers": routers});
|
|
map.addControl(layersControl);
|
|
//var marker = L.marker([49.47502, 10.99253]).addTo(map);
|
|
|
|
map.on('click', function(e) {
|
|
console.log(e.latlng);
|
|
console.log(map.getZoom());
|
|
// height = width of world in px
|
|
size_of_world_in_px = map.options.crs.scale(map.getZoom());
|
|
deg_lng_per_pix = 360 / size_of_world_in_px;
|
|
deg_lat_per_pix = 180 / size_of_world_in_px;
|
|
/*
|
|
db.routers.create_index([("location", "2dsphere")])
|
|
49,11
|
|
50,12
|
|
-> difference 1,1
|
|
-> in pix at zoom level 0 1.4,0.7
|
|
-> pythagoras -> distance in px
|
|
*/
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|