Leaflet geojson Popup

Communities Deutschland (Germany)
1

Hallo,

dieser Code ist bei mir dafür zuständig, dass die Koordinaten von Rettungspunkten aus einer GEOJson-Datei ausgelesen werden und an der betreffenden Stelle dann ein Icon angezeigt wird.
Das macht der Code auch ganz gut.

Die Datei rettung.geojson enthält auch den Namen des jeweiligen Rettungspunktes (z.B. “OF-118 Neu - Isenburg”).
Was muss ich ergänzen, um den passenden Namen auf einem Popup angezeigt zu bekommen?


  // lade GeoJSON von einer externen Datei
  $.getJSON("rettung.geojson",function(data){
    var rettungIcon = L.icon({
      iconUrl: './icon/rettungspunkt2.svg',
      iconSize: [25,30]
    });
    L.geoJson(data,{
      pointToLayer: function(feature,latlng){
	  return L.marker(latlng,{icon: rettungIcon});
      }
    }).addTo(map);
  });

Danke im Voraus.

Franz Luwein

2

du musst noch an den Marker einen Pupup dranbinden…

https://leafletjs.com/reference-1.5.0.html#geojson

Mit onEachFeature scheint sowas zu gehen:
onEachFeature: function () {}

Beim Beispiel wird dabei die funktion “onEachFeature” aufgerufen… und ein Popup gebaut dafür…

https://leafletjs.com/examples/geojson/example.html

3

Danke für den Rat.

Meine Programmierkenntnisse reichen jedoch nicht, um das umzusetzen.

Gruß

Franz Luwein

4

So schwer dürfte es nicht sein… Wenn du bis dahin gekommen bist… Aber dazu bräuchte es ein bisschen was aus dem geojosm… Also einen Rettungspunkt…

5 
	function onEachFeature(feature, layer) {
		var popupContent = "<p>I started out as a GeoJSON " +
				feature.geometry.type + ", but now I'm a Leaflet vector!</p>";

		if (feature.properties && feature.properties.popupContent) {
			popupContent += feature.properties.popupContent;
		}

		layer.bindPopup(popupContent);
	}

  // lade GeoJSON von einer externen Datei
  $.getJSON("rettung.geojson",function(data){
    var rettungIcon = L.icon({
      iconUrl: './icon/rettungspunkt2.svg',
      iconSize: [25,30]
    });
    L.geoJson(data,{
      pointToLayer: function(feature,latlng){
	  return L.marker(latlng,{icon: rettungIcon});
      },

     onEachFeature: onEachFeature
    }).addTo(map);
  });

Die “function onEachFeature” muss halt auf deine Bedürfnisse angepasst werden … :slight_smile:

6

Hallo miche101,

DANKE!

Ich denke, dass ich damit klar komme.
Wenn es nicht will, muss ich halt weiter fragen/probieren.

Gruß

Franz Luwein

7

Die Attribute deines Punktes kriegst du in der onEachFeature-Funktion vermutlich über “feature.attributes.”, und dann der Name des Namens (vermutlich “name”), also vermutlich feature.attributes.name .

8

Hallo Miche101,
hallo gormo,

ich habs hinbekommen.


  // lade GeoJSON von einer externen Datei hier: RETTUNGSPUNKTE
	$.getJSON("rettung.geojson",function(data){
     var rettungIcon = L.icon({
      iconUrl: './icon/rettungspunkt2.svg',
      iconSize: [25,30]
    });
    L.geoJson(data,{
		pointToLayer: function(feature,latlng){
    var marker = L.marker(latlng,{icon: rettungIcon});
		marker.bindPopup("<h3>Name: " + feature.properties.name + '</h3>' + "<h3>id: " + feature.properties.id + '</h3>');
	return marker; 
}
    }).addTo(geoJsonLayerRettung);
  });
   
var geoJsonLayerRettung = new L.LayerGroup();

Damit bekomme ich

  • den Name und die ID des Rettungspunktes angezeigt
  • kann den betreffenden Layer in einem Controle ein- und ausschalten

Gruß

Franz Luwein

9

Gratuliere.

Nur als Anreiz: https://wambachers-osm.website/emergency/#zoom=13&lat=50.1103&lon=8.2085&layer=OpenStreetMap.org&overlays=FFFFFFTFFFFF

Gruss
walter