Using leaflet mobile maps, you can easily get "lost" if you zoom in too far or pan in the wrong direction, so I'd like to display some kind of dynamic hint arrows(?) around the edge of the map which point to those offscreen markers. Something like the illustration below which I stumbled on here while trying to find a solution.
You would probably be interested in Leaflet EdgeMarker plugin (demo):
[…] allows you to indicate Markers, Circles and CircleMarkers that are outside of the current view by displaying [a chosen icon (like an arrow)] at the edges of the map.
Related
I'm working website which uses a lot of markers. And for performance reasons I'm going to render only visible markers after each move.
I'm using mapbox js library via react-mapbox-gl react library.
Any advice how to get visible coordinates from map? Top left and bottom right visible coordinates is enough.
You can use map.getBounds() or map.getBounds().toArray().
When should one use a marker instead of a feature layer of points in Mapbox?
Points layers can be updated and styled dynamically using all the styling tools of Mapbox GL JS. Features in points layers can also be clicked, presenting a popup just like with a marker.
Given this, when would one want to use a marker?
As Andrew mentioned there are two sides two this:
Accessibility
Markers are implemented as DOM elements and thus can be included in the tab order and can be given accessibility attributes
Animation
As markers are DOM elements animating them is quite easy with a bit of CSS & JS. You can animate points on a circle layer too, but its much more of a hassle.
Small point count
The number of markers/points you can display at once is somewhat limited by what the DOM can manage. My suggestion is that, if you have more than 500 points to display, you should opt for a circle layer instead of markers (this is a very rough estimates and depends on other parameters as well, animation, point size etc.). Using a circle layer you will hit - depending on the hardware - a limit in the 10s of thounds of points.
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 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.
Screenshot from Mapbox docs:
It seems as though Mapbox won't render given coordinates multiple times on the same map, even if the map is zoomed out far enough to view the same latitude and longitude pairing twice. Is there a way around this?
Use the worldCopyJump option of L.mapbox.map (L.map):
With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.
Working example on Plunker: http://plnkr.co/edit/cbDNH6Rs5SbBKGY7LQGe?p=preview
Reference: http://leafletjs.com/reference.html#map-worldcopyjump