markus/lifomapserver
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow different configurations and designs per geojson

Browse Source 
Works, but makes it super messy...
This commit is contained in:
Markus Koch 2020-04-15 17:13:49 +02:00
parent 3d006119c0
commit b33b131f96
1 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
htdocs/index.html
View File

@ -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>