I want to bind the additional information from geojson to a leaflet marker popup. I looked up a few things from the leaflet documentation but it doesn't work.
var map = L.map('map').setView([51.9, 7.6], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/5e4495ff4b0d454eb0443225198b7e6c/997/256/{z}/{x}/{y}.png', {
maxZoom: 16
}).addTo(map);
var polygon = {
"type": "Feature",
"properties": {
"name":"City BoundingBox",
"style": {
"color": "#004070",
"weight": 4,
"opacity": 1
}
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[7.5,52.05],
[7.7,51.92],
[7.6,51.84],
[7.4,51.94],
[7.5,52.05]
]]
}
};
var myLayer = L.geoJson().addTo(map);
//myLayer.addData(polygon);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
<?php
$mdjson = file_get_contents("http://xxx/ows?service=WFS&version=1.0.0&outputFormat=JSON&request=GetFeature&typeName=xx:yy&maxFeatures=50");
echo "var geojsonMD = ".$mdjson.";";
?>
myLayer.addData(geojsonMD);
L.geoJson(geojsonMD, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, myLayer) {
layer.bindPopup(feature.properties.description);
}
}).addTo(map);
Hope you can help me.
Best regards.
GeoJSON objects are added to the map through a GeoJSON layer. To create it and add it to a map, we can use the following code: L. geoJSON(geojsonFeature).
See this example stand-alone. Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this: marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");
Create a polygon using the L. Pass the locations/points as variable to draw the polygon, and an option to specify the color of the polygon. var polygon = L. polygon(latlngs, {color: 'red'}); Add the polygon to the map using the addTo() method of the Polygon class.
GeoJSON is a format for encoding a variety of geographic data structures. GeoJSON supports the following geometry types: Point , LineString , Polygon , MultiPoint , MultiLineString , and MultiPolygon . Geometric objects with additional properties are Feature objects.
Assuming the service returns data with similar properties as the polygon, you can indeed add them to one and the same layer.
var myLayer = L.geoJson(geojsonMD, {
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
})
myLayer.addData(polygon);
myLayer.addTo(map);
http://jsfiddle.net/Wn5Kh/ (without the downloaded data, for I do not have the URL)
If the geojsonMD
has different feature properties, there's nothing wrong with adding two GeoJson layers. One for the data you retrieve from the service, and one with the polygon.
As explained in the Leaflet documentation, you should use the "onEachFeature" to attach a popup with the desired information to each feature of your GeoJson:
The onEachFeature option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked
You can use it this way:
var myLayer = L.geoJson(polygon, {
onEachFeature: yourOnEachFeatureFunction
}).addTo(map);
function yourOnEachFeatureFunction(feature, layer){
if (feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
In this example the popup will show the content of the property "name" for each clicked feature
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With