my LeafLet map contains a GeoJSON and a Maptiler layer.
First I set up my map by var map = L.map(...). Right after that I add my GeoJSON layer. Then I load my map style via AJAX, change a few things in it, and finally add it to the map as well.
After the map is initialized, both layers seem to have a mismatch in zoom and pan (see image).
I just figured out that the Mapbox-GL-LeafLet-plugin (https://github.com/mapbox/mapbox-gl-leaflet) which is advised by Maptiler, is not working for me.
When I use an open, unstyled TileLayer, the problem is gone.
Related
Im trying to bind geoserver WFS GetFeature request with BBOX and adding the geojson layer to Mapbox map object so that whenever map is panned and zoomed in/out, the geojson data within the map screen visible window will be downloaded and rendered instead of loading entire table geojson data. Here is the code snippet.
function geturl(){
return 'http://localhost:8080/geoserver/demo/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=demo:assets&outputFormat=application/json'
+'&bbox='
+map.getBounds().getSouthWest().lat+','
+map.getBounds().getSouthWest().lng+','
+map.getBounds().getNorthEast().lat+','
+map.getBounds().getNorthEast().lng
}
map.on('load', () => {
map.addSource('city_assets', {
type: 'geojson',
data:geturl()
})};
Although I could see the points were loaded only in the viewing BBOX window for the first time, I don't see rest of the point data being downloaded and rendered when I zoom in/out or pan around.
It would be really helpful if someone can guide me if I have missed anything to make it working. Please feel free to ask for additional info. Thanks.
-Prem
When I use the following code to go through all the layers in a leaflet map,
map.eachLayer(function (layer) {
console.log(layer);
});
I just wants what rule is used to create this order. Is it because of the ZIndex of the layer? Or is it because the layer is added in different time? If the layer is added early, it will be in the bottom.
Thanks,
Good question, it seems the LeafletJS docs don't say anything about the ordering of the layers via eachLayer, so...
Looking at the code on github, L.Map.eachLayer loops through L.Map._layers which is an object (not an array). So technically the layers could come back in any order...
That said, the individual layers are added to the _layers object in the order they are added to the map. So in all likelihood, eachLayer will be iterating over the layers in that same order (whatever order they were added to the map).
so i have a mapbox base map and want to load a dynamic choropleth area map over the top of it. it will cover all continents. i've looked into doing this before using geojson but the resulting file was over 9mb. is there a way to have different geojson vectors loaded at different zoom levels as to reduce the file size ?
the reason the file was so big was because it was a very detailed vector overlay. basically i'd like to replicate the vectors of 'am map' but with the performance of mapbox, with much better vector resolution at bigger zoom levels. (http://www.amcharts.com/javascript-maps/)
the only other way to do this is by using geojson markers that are loaded on top of the base map, but this doesn't give the same visual impact of the fully coloured continent vectors..
any help would be greatly appreciated!
x
Well, you could watch zoomend on the map to add/remove overlays as needed.
map.on('zoomend', function() {
var currentZoom = map.getZoom();
overlayGroup.clearLayers() //remove existing
overlayGroup.addLayer(myZoomLevelMapping[currentZoom]) //add layer for this zoom level.
})
I have a mapItems layer (MarkerClusterGroup) which I use for all my map items. On the run I am adding and removing points from that layer (oh and that's GeoJSON).
And using this to fit all points nicely inside the map:
map.fitBounds(mapItems.getBounds());
Now weird thing happens when I add more points, so the bounds of the layer expands. But when I remove those points, bounds of that map (after using fitBounds of course) stays the same as maximum even though there are no points in some areas.
What could be a problem? Do I have to reset bounds of that layer somehow? Or is it better to destroy layer and create a new one each time I'm loading points to that map?
P.S. I just noticed that If I'm not using L.MarkerClusterGroup but L.FeatureGroup instead, everything works just fine... So it's something to do with clustering.
OK, so my problem was using this to clear the layer:
layer.eachLayer(
function (sublayer) {
layer.removeLayer(sublayer);
}
);
And this doesn't seem to work with L.MarkerClusterGroup. Instead I'm now using this and everything works fine:
layer.clearLayers();
I'm using leaflet.draw, and when a rectangle is created, i'm fetching rectangle's data using layer.toGeoJSON(), and then i save it into a db using ajax.
After that, when the user display the map again, i'm loading previously saved data, and push them into the featureGroup reserved for leaflet.draw using L.GeoJSON.geometryToLayer()
Problem is that my previously created rectangle is now a real polygon for leaflet.draw.
"Rectangle" does not exist in geoJson specs, so i can understand that.
Now, in "properties" of the geojson, i know that the previous shape was a rectangle, with the "type" attribut.
My question is : is there a way to force a shape to be a rectangle in a leaflet.draw point of view ?
Thanks in advance !
I ran into this same problem and have come up with a solutions which works for me although it isn't the most elegant method.
Using leaflet.draw I receive a new layer on which I call layer.toGeoJSON() to save the rectangle to my database. On refresh of the page I'm pulling that GeoJSON representation back from my database and storing it with:
var geojson = JSON.parse(geojson_string);
What I tried first was to build my own Rectangle from the points and add it to drawnItems.
var bounds = L.latLngBounds(geojson.geometry.coordinates);
var rect = L.rectangle(bounds);
drawnItems.addLayer(rect);
This code did not throw an error, but it also didn't show a rectangle on the map. After further investigation I found the coordinate pairs output from layer.toGeoJSON() and the coordinate pairs needed by L.latLngBounds() were reversed (i.e. one was [lat, lng] and the other was [lng, lat]) which caused the Rectangle to be created but in entirely the wrong location. To get around this I constructed the layer first as a GeoJSON layer which results in a polygon, but then use that representation's bounds to construct my Rectangle.
var geojson_layer = L.GeoJSON.geometryToLayer(geojson);
var rect = L.rectangle(geojson_layer.getBounds());
drawnItems.addLayer(rect);
This successfully creates a Rectangle which leaflet.draw recognizes and allows for the edit tools to work correctly.