I have an application which displays several layers on a Leaflet map.
I create GeoJSONS from a database, then create layers from those GeoJSON and then i put my layers on LayerGroups.
On zoom/dezoom, i add or remove layers from their group to show only some layers.
Everything is fine except sometimes, when i drag my map, some elements disappear.
before dragging:
after dragging to the right:
after dragging to the original position:
This happens even if i put only 2 layers on my map.
I have tested not to remove my layers but to change the feature style (fill to 0, stroke to 0 for POLYGON layers) but nothing changed.
Has anyone an idea of what can cause this ?
Related
When zooming into the map, do the tiles ever get unloaded? Or do they just stack on top of each other? For example - if I zoom in from zoom level 4 to zoom level 6, do the new set of tiles replace the old ones? Or do they simply cover them?
The reason I am asking is that I am loading a 3D terrain mesh on top of each tile that loads, but I have found that I am getting multiple terrains stacking on top of each other (refer to my aforementioned zoom level example).
Ideally I would like to simply unload the terrain cover whenever the corresponding tile unloads, but the mapbox-gl library does not seem to expose that event...
Any info on this subject would help me figure out a working solution. Thanks!
I have a map that covers the entire screen and I have a layer that overlays the map. That layer goes from bottom to top.
the user interacts with this layer by clicking on different options and these options draw markers on the map.
When I centralize the map, the markers are hidden behind the layer that superimposes the map, thus eliminating the visibility of the marker.
How could I centralize the map and then move it one third above the layer?
This question is a remake of
How can I change the location center of a map using Leaflet API?
Try doing it this way
var offset = map.getSize().y * 0.15;
map.panBy(new L.Point(0, -offset), {animate: false});
But every time I click on an option in the layer to create a marker, the map moves and I lose the center.
jsfiddle
Excuse the example image
The idea is that after the map makes the setView place its center above the blue layer that superimposes the map so as not to hide the markers.
I try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.
I have 3 layers, one GeoJSON that is used with leaflet-draw and two (vector and canvas/heatmap) that just display overlays.
My problem is, the overlays get added later dynamically with the layer-control, while the GeoJSON layer is always there. When the overlays get added, some of the draw features and general interaction with the GeoJSON layer top to work, because my overlays are always on top.
How can I get the GeoJSON layer back to the front?
Using layer.bringToFront() didn't work.
If the layers are being added through the layer control, you can keep your GeoJSON layer on top by bumping it back using .bringToFront() each time an overlayadd event is fired:
map.on('overlayadd', function() {
yourGeoJsonLayerName.bringToFront();
});
A somewhat unwieldy example fiddle is here:
http://fiddle.jshell.net/nathansnider/yt65dkyt/
Though layer ordering can be handled more gracefully in the Leaflet 1.0 betas by assigning layers to panes with a persistent zIndex, it looks like Leaflet Draw doesn't officially support 1.0 yet, so .bringToFront it is!
I am using mapbox and featureGroup control.
World map is repeating horizontally.How can I prevent horizontal repeating of world map.
I have tried 'no-wrap:true' ,but this seems to work only for tile layer.
For featureGroup,Please suggest some way.
var map = L.mapbox.map(mapData, MapBoxAccess.mapBoxAccess.accessId);
var featureGroup = L.featureGroup().addTo($scope.map);
I am adding my polygons and polylines on featureGroup
Please find attached image for better understanding.
That actually is the intended behavior and features cannot repeat across the globe like this. If you wanted to prevent scrolling across the globe, you can set bounds over the map so that someone can't scroll or pan side to side. Also, there is a Leaflet method called WorldCopyJump which will also bounce the view back to the bounds.