diff options
author | Markus Koch <markus@notsyncing.net> | 2020-04-15 17:13:49 +0200 |
---|---|---|
committer | Markus Koch <markus@notsyncing.net> | 2020-04-15 17:13:49 +0200 |
commit | b33b131f963881744b40ee00619299cf8a3fd454 (patch) | |
tree | a928e409607821699088f19beb1a0fb376af4ec4 | |
parent | 3d006119c069809af189abc589e5afc4edcd9500 (diff) | |
download | lifomapserver-b33b131f963881744b40ee00619299cf8a3fd454.tar.gz lifomapserver-b33b131f963881744b40ee00619299cf8a3fd454.tar.bz2 lifomapserver-b33b131f963881744b40ee00619299cf8a3fd454.zip |
Allow different configurations and designs per geojson
Works, but makes it super messy...
-rw-r--r-- | htdocs/index.html | 71 |
1 files changed, 53 insertions, 18 deletions
diff --git a/htdocs/index.html b/htdocs/index.html index 44e65ac..75f053b 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -110,28 +110,17 @@ return satellite; } - function load_geojson(name, url, active=1) { + function load_geojson(name, url, active=1, style = {}, onEachFeature = null, onClick=null) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), { - onEachFeature: function (feature, layer) { - label = String(feature.properties.name) - layer.bindPopup( - '<h1><a href="https://wiki.linux-forks.de/mediawiki/index.php/'+feature.properties.name+'">'+feature.properties.name+'</a> ('+feature.geometry.coordinates+')</h1>'+ - '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + - '<p>'+feature.properties.description+'</p>' - ); - layer.bindTooltip(label, {permanent: true, direction: "center", className: "city-names"}).openTooltip(); - }/*, - pointToLayer: function(feature,latlng){ - label = String(feature.properties.name) - return new L.CircleMarker(latlng, { - radius: 1, - }).bindTooltip(label, {permanent: true, direction: "center", opacity: 0.7}).openTooltip(); - }*/ + style: style, + onEachFeature: onEachFeature }); + if (onClick) + geojson.on('click', onClick) layers.addOverlay(geojson, name); if (active) geojson.addTo(mymap); @@ -149,7 +138,53 @@ load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04'); //load_svg("Test", "./overlay.svg", 0); - load_geojson("Cities", "./geojson/cities.json"); + load_geojson( + "Cities", + "./geojson/cities.json", + 1, + {}, + function (feature, layer) { + label = String(feature.properties.name) + layer.bindPopup( + '<h1><a href="https://wiki.linux-forks.de/mediawiki/index.php/'+feature.properties.name+'">'+feature.properties.name+'</a> ('+feature.geometry.coordinates+')</h1>'+ + '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + + '<p>'+feature.properties.description+'</p>' + ); + layer.bindTooltip(label, {permanent: true, direction: "center", className: "city-names"}).openTooltip(); + }, + null); + load_geojson( + "All Places", + "./geojson/all.json", + 1, + {}, + null, + onClick = function(e){ + console.log(e.sourceTarget.feature); + popup + .setLatLng(e.latlng) + .setContent("Here is <a href=\"https://wiki.linux-forks.de/mediawiki/index.php/" + e.sourceTarget.feature.properties.name + "\">" + e.sourceTarget.feature.properties.name + "</a>") + .openOn(mymap); + }); + load_geojson( + "Test", + "./geojson/test.json", + 0, + { + radius: 8, + fillColor: "#ff7800", + color: "blue", + opacity: 1, + fillOpacity: 0.5 + }, + null, + onClick = function(e){ + console.log(e.sourceTarget.feature); + popup + .setLatLng(e.latlng) + .setContent("You clicked on <a href=\"https://wiki.linux-forks.de/mediawiki/index.php/" + e.sourceTarget.feature.properties.name + "\">" + e.sourceTarget.feature.properties.name + "</a>") + .openOn(mymap); + }); L.control.scale().addTo(mymap); @@ -162,7 +197,7 @@ .openOn(mymap); } - mymap.on('click', onMapClick); + //mymap.on('click', onMapClick); </script> </body> </html> |