freifunk-franken
/
monitoring
mirror of https://github.com/FreifunkFranken/fff-monitoring.git
3
0
Fork 0
Code Issues Releases Wiki Activity

add meta for map on smartphones

This commit is contained in:
Dominik Heidler 2015-09-03 10:53:59 +02:00
parent 699c00d6a7
commit 4a5812b827
1 changed files with 49 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
map/static/map.html
View File

@ -1,36 +1,53 @@
<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>
<div id="map" style="width: 100%; height: 100%;"></div>
<!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%;
}
</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 &copy; <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);
<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 &copy; <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
*/
});
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>
</script>
</body>
</html>