summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMarkus Koch <markus@notsyncing.net>2020-04-15 17:13:49 +0200
committerMarkus Koch <markus@notsyncing.net>2020-04-15 17:13:49 +0200
commitb33b131f963881744b40ee00619299cf8a3fd454 (patch)
treea928e409607821699088f19beb1a0fb376af4ec4
parent3d006119c069809af189abc589e5afc4edcd9500 (diff)
downloadlifomapserver-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.html71
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>