map: Include layer selection in URL

This provides a permalink which includes the map settings.

Signed-off-by: Adrian Schmutzler <freifunk@adrianschmutzler.de>
This commit is contained in:
Adrian Schmutzler 2018-11-23 19:10:45 +01:00
parent f26f01f73c
commit 24e934b66c
3 changed files with 32 additions and 8 deletions

View File

@ -26,9 +26,9 @@ var overlay_config = {
maximumAge: 1000*3600*24*10
}
var routers = new L.TileLayer(tileurls.routers + '/{z}/{x}/{y}.png', overlay_config).addTo(map);
var routers_v2 = new L.TileLayer(tileurls.routers_v2 + '/{z}/{x}/{y}.png', overlay_config).addTo(map);
var routers_local = new L.TileLayer(tileurls.routers_local + '/{z}/{x}/{y}.png', overlay_config).addTo(map);
var routers = new L.TileLayer(tileurls.routers + '/{z}/{x}/{y}.png', overlay_config);
var routers_v2 = new L.TileLayer(tileurls.routers_v2 + '/{z}/{x}/{y}.png', overlay_config);
var routers_local = new L.TileLayer(tileurls.routers_local + '/{z}/{x}/{y}.png', overlay_config);
var hoods = new L.TileLayer(tileurls.hoods + '/{z}/{x}/{y}.png', overlay_config);
var hoods_v2 = new L.TileLayer(tileurls.hoods_v2 + '/{z}/{x}/{y}.png', overlay_config);
var popuplayer = new L.TileLayer('');
@ -56,17 +56,27 @@ if (window.matchMedia("(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-r
var popup;
var popupopen = false;
function update_mappos_permalink() {
function update_permalink() {
if (typeof mapurl != 'undefined') {
var pos = map.getCenter();
var zoom = map.getZoom();
window.history.replaceState({}, document.title, mapurl + '?mapcenter='+pos.lat.toFixed(5)+','+pos.lng.toFixed(5)+','+zoom);
window.history.replaceState({}, document.title,
mapurl + '?mapcenter=' + pos.lat.toFixed(5) + ',' + pos.lng.toFixed(5) + ',' + zoom
+ '&layers=' + (map.hasLayer(routers)|0) + ',' + (map.hasLayer(routers_v2)|0) + ',' + (map.hasLayer(routers_local)|0) + ','
+ (map.hasLayer(hoods)|0) + ',' + (map.hasLayer(hoods_v2)|0) + ',' + (map.hasLayer(popuplayer)|0) );
}
}
function initialLayers() {
routers.addTo(map);
routers_v2.addTo(map);
routers_local.addTo(map);
}
map.on('moveend', update_mappos_permalink);
map.on('zoomend', update_mappos_permalink);
map.on('moveend', update_permalink);
map.on('zoomend', update_permalink);
map.on('overlayadd', update_permalink);
map.on('overlayremove', update_permalink);
map.on('click', function(pos) {
// height = width of world in px

View File

@ -33,11 +33,24 @@
<script src="{{ url_for('static', filename='js/map.js') }}"></script>
<script type="text/javascript">
if (window.location.search.match("^\\?mapcenter")) {
var maploc = window.location.search.replace("?mapcenter=", "").split(",");
var getargs = window.location.search.replace("?mapcenter=", "").split("&");
var maploc = getargs[0].split(",");
map.setView([maploc[0], maploc[1]], maploc[2]);
if (getargs.length > 1 && getargs[1].match("layers=")) {
var getlayers = getargs[1].replace("layers=", "").split(",");
if(getlayers[0]==1) { routers.addTo(map); }
if(getlayers[1]==1) { routers_v2.addTo(map); }
if(getlayers[2]==1) { routers_local.addTo(map); }
if(getlayers[3]==1) { hoods.addTo(map); }
if(getlayers[4]==1) { hoods_v2.addTo(map); }
if(getlayers[5]==1) { popuplayer.addTo(map); }
} else {
initialLayers();
}
}
else {
map.setView([49.45, 11.1], 10);
initialLayers();
}
</script>
{% endblock %}

View File

@ -90,6 +90,7 @@
</script>
<script src="{{ url_for('static', filename='js/map.js') }}"></script>
<script type="text/javascript">
initialLayers();
{%- if router.lng and router.lat %}
var router_pos = [{{ router.lat }}, {{ router.lng }}];
map.setView(router_pos, 18);