How can I toggle the GeoJSON layers in my leaflet map as I would the L.marker layers?
https://jsfiddle.net/mawr35vj/
Please pardon me if this is a simple question, I'm still new to leaflet and have spent all day on this.
Here is the GeoJSON I would like toggled in the sidebar.
fetch('https://data.cityofnewyork.us/resource/ek5y-zcyf.geojson?$where=latitude is not null')
.then(function (response) {
// Read data as JSON
return response.json();
})
.then(function (data2) {
// Create the Leaflet layer for the data
var complaintLayer = L.geoJson(data2, {
// We make the points circles instead of markers so we can style them
pointToLayer: function (geoJsonPoint, latlng) {
return L.circleMarker(latlng);
},
// Then we can style them as we would other features
style: function (geoJsonFeature) {
return {
fillColor: '#0000ff',
radius: 6,
fillOpacity: 0.7,
stroke: false
};
}
});
});
-I tried assigning it a "var"
-I tried adding "complaintLayer" in the overlays as I did with the L.marker
-And many other various things that I can't remember but is obviously not working...
Update:
I'm trying to load the GeoJSON and assign it a variable, but having difficulty. I'm looking at this and related threads: How can I assign the contents of a geojson file to a variable in Javascript?
I got it to work if I just copy and paste the GeoJSON into the script, but having difficulty if I want to load it from a local file or API.
You can put complaintLayer
in an array for a marker control, but the variable must be in the right scope - from the code you've posted it looks like it's local to the function it's populated in, so it won't be visible outside.
Per peeebeee's suggestion, I fixed the issue by loading the data and putting them into a "promise."
you can see a working example below: https://jsfiddle.net/4x3sk1va/
Example of a promise below (taken from https://glitch.com/@ebrelsford )
// Fetch collisions data from our Glitch project
var collisionsFetch = fetch('https://cdn.glitch.com/03830164-a70e-47de-a9a1-ad757904d618%2Fpratt-collisions.geojson?1538625759015')
.then(function (response) {
// Read data as JSON
return response.json();
});
// Fetch lanes data from our Glitch project
var lanesFetch = fetch('https://cdn.glitch.com/fcedf615-7fef-4396-aa74-2e03fc324d71%2Fpratt-bike-routes.geojson?1538628711035')
.then(function (response) {
// Read data as JSON
return response.json();
});
// Once both have loaded, do some work with them
Promise.all([collisionsFetch, lanesFetch])
.then(function (fetchedData) {
console.log('Both datasets have loaded');
// Unpack the data from the Promise
var collisionsData = fetchedData[0];
var laneData = fetchedData[1];
// Add data in the order you want--first goes on the bottom
L.geoJson(collisionsData).addTo(map);
L.geoJson(laneData).addTo(map);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.