This question already has an answer here:
Leaflet polyline disappears on pan
(1 answer)
Closed 3 years ago.
I've added a polyline on a leafletjs map. However, after I zoom in far enough for the view bounds to only show some of the polyline and I drag away towards the other side of the polyline while holding the mouse button down, the polyline is not being drawn while the new side of the map renders, but only after I release the mouse.
Is there any way to bypass this default behavior?
An example of my situation can be found here.
Leaflet polyline - https://leafletjs.com/reference-1.5.0.html#polyline
This Leaftet Github issue is relevant - you can add an invisible margin outside the bounds of the map in which the polyline will render and will appear when you drag back.
Like this:
var map = new L.Map('map');
map.getRenderer(map).options.padding = 100;
Related
See attached image, I have a Mapbox map and a marker that is "centred in the map", what I want is the marker's point to be at the centre (where the red arrow is) and not the middle of the marker.
the marker is Mapbox, setting the lng lat is Mapbox, getting the centre of the map is Mapbox, does anyone know if Mapbox construct the marker in such a way where the end point is the middle?
if not, is there a way to adjust ?
thanks
Martin
for anyone else needing this information
1)
mapbox allows the markers centre to be set when you add the marker, so you can say the centre is top, bottom, centre etc etc
2)
out of the box the mapbox markers are centred in the correct place using "centre". proved this by debugging the GPS from mapbox and comparing to google maps lng,lat and then using every setting to see which one was exactly the same mapping
This question already has an answer here:
Global map tiles disappear past zoom level 19
(1 answer)
Closed 3 years ago.
When I use the latest Leaflet, or even the beta, Leaflet just displays grey area.
I have gone through the logs on my webserver, and Leaflet doesn't even try to load any x19 tile.
var lagx1 = L.tileLayer('https://myserver.org/tiles/x1/{z}/{x}/{y}.png', {detectRetina:false, id: 'mapbox.light', attribution: attribution});
Using Google, it seems to have been a problem since before version 1.00.
Does anyone have a fix or a work-around?
Leaflet should have a fixed height of the map html element, otherwise he doesn't know how many tiles to display. If I remember, google is a layer displayed over the tile layer using a tricky hack. So maybe consider setting like 200px to the height of the map html element.
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 have a mapbox project that I need to be able to re-center the map when a popup closes. Right now, clicking a marker will pan the map and after the user closes the popup they are left with the map panned over to the new location. I simply need the map to recenter to the original location I set as my map center.
I've not found a method using the mapbox api so I don't have any code to start. I'm more looking for someone who might have experience with such a configuration.
Since mapbox.js is built on top of leaflet you can use the Leaflet API.
You can listen for popupclose events. Then you can call map.setView() and center the map at the original position.
Here is a working example
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.