I read a *.geojson file with
$.ajax(overlay).done(function(data) {
data = JSON.parse(data);
L.geoJson(data, {
pointToLayer: pointToLayer,
style: style,
onEachFeature: onEachFeature
});
return});
As far as I understand (newbie), for each marker in the file the pointToLayer -function is processed, for each polygon and linestring the style-function AND the onEachFeature-function. Right?
What is the difference between the last two functions (not considering the name)?
Gruss, wonk
The pointToLayer callback function runs on all Point GeoJSON features, then
the style function runs on all LineString and Polygon GeoJSON features, then
the onEachFeature callback function runs on both points (now L.Markers) and linestrings/polygons (now L.Polylines and L.Polygons).
Note that pointToLayer and style take a GeoJSON feature as input, whereas onEachFeature takes the instance of L.Layer as well. That L.Layer can come from either the pointToLayer callback or internally with the information from the style callback.
Related
I have already added geojson features to my leaflet map. I want to be able to loop through those geojson features. WHen I do map.eachLayer(function(layer) {...}) it only shows be the tile layer and none of the geojson that are added.
Rather than map.eachLayer, you should be using the .eachLayer method on the L.geoJson itself. For example:
var geoJsonLayer = L.geoJson(myGeoJson).addTo(map);
geoJsonLayer.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.name);
});
You can also specify a function to be applied to each feature at the time you create the L.geoJson, using the onEachFeature option.
Is there any way to load a GeoJson file with "simplestyle" (for example, created with geojsonio) directly into Leaflet, so it could use the color, stroke and other properties?
It seems that it is supported in the mapbox, but what about leaflet itself?
Thanks,
Alex
This isn't supported out-of-the-box by Leaflet but you could write your own logic using the pointToLayer function of L.GeoJSON:
Function that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created)
http://leafletjs.com/reference.html#geojson-pointtolayer
new L.GeoJSON(collection, {
pointToLayer: function (feature, latlng) {
// Return a custom marker
}
});
In that function you have access to each feature's properties so you can return a custom marker based on them. Hope that helps, also found the following gist on github which shows a implementation which might do what you are looking for:
https://gist.github.com/tmcw/3861338
I am following markercluster examples from Mapbox library, but can't solve my problem. If you guys take a look at my working example here, you will notice this line of code:
L.mapbox.featureLayer(markerLayer).on('ready', function(e) {
What I initally thought was I could put markers inside of markercluster featureLayer, but I guess it was a wrong approach. Any solutions? Thanks.
Example following here
The mapbox example you refer to makes an AJAX call to retrieve the GeoJSON data, hence it needs to attach an on "ready" listener.
In your case your GeoJSON data is defined in your scripts, so the "ready" event will not be triggered (besides, you should use L.mapbox.featureLayer with your GeoJSON object directly, not a Feature Layer).
You can simply use the eachLayer method to iterate through all created markers within the Feature Layer, and add them into your Marker Cluster Group.
var clusterGroup = new L.MarkerClusterGroup();
var markerLayer = L.mapbox.featureLayer(markers).eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
Updated Plunker: http://plnkr.co/edit/fN6xYcn1Lg532eLe39IS?p=preview
I have two geoJSON files, one is for drawing the lines(states.js), and another one is for adding markers on the map (marker.js).
However, when I add a line of code that is supposed to be adding the marker layer, nothing works.
var markerLayer = L.mapbox.featureLayer(markers).addTo(map);
How should I approach this? I thought featureLayer would work to add multiple layers, but it doesn't seem to be working well. Help is much appreciated.
Working example so far: Plunker
Example I'm following is here.
Couple of things wrong here. You forgot to declare your global L.mapbox.accessToken:
L.mapbox.accessToken = 'pk.eyJ1Ijoia2thZ2lsbCIsImEiOiJjaWdsdmJjeWkwMjMwdWFrcjI4eGZ3MGd2In0.WslWCpxaXxUOgUZP_VT1cg';
You're adding the statesData twice, once in a L.mapbox.featureLayer and once in a L.GeoJSON:
var statesLayer = L.mapbox.featureLayer(statesData).addTo(map);
statesLayer = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Once is more than enough: here's a example on Plunker: http://plnkr.co/edit/kV8h69VJt2jtpqwdCpJo?p=preview
I'm using the Leaflet.draw library to allow in map editing of geojson shapes. On multipolygon types though, I get the error message TypeError: layer.options is undefined from the library.
This looks like the same issue referenced here. Is there a workaround for this that allows drawing, editing, and deleting multipolygon type geojson?
Alternatively, you could also use Leaflet.PM, a drawing library for leaflet that is supporting MultiPolygons.
Add your geojson shapes via L.geoJson and leaflet.pm can handle it's editing, including holes.
Disclaimer: I'm the maintainer of leaflet.PM
My workaround is just splitting the MultiPolygon type geojson into several Polygons.
if (shape.type === "MultiPolygon") {
shape.coordinates.forEach(function(shapeCoords, i) {
var polygon = {type:"Polygon", coordinates: shapeCoords};
L.geoJson(polygon, {
onEachFeature: function (feature, layer) {
featureGroup.addLayer(layer);
}
});
});
}