I am creating a MapBox project with a geoJson vector layer. I have been using the following example as my guide.
https://www.mapbox.com/blog/neighborhood-mapping-with-dynamic-vector-data-layers/
When I hover over any geoJson feature the stroke is changed to 2 pixels. However the stroke gets clipped by the neighboring features sometimes. I believe this has something to do with how the different features are stacked. So if I hover on a feature which is stacked near the bottom the neighboring features are covering that stroke.
Here is an example...
http://www.vandam.com/chpc/inconsistent_stroke.jpg
Is their a way to set the stroke to be inside of the polygon or a way to bring a feature to the top of the stack when hovering?
Thanks for any help!
By adding the function
layer.bringtoFront();
after setting the hover styling your polygons will come to front.
Related
I am new to Leaflet and I want to create a raster and add it to my map. The raster is inside inside a polygon, which means I have many polygons (squares). Currently, I am adding just squares, but this makes everything very slow. It should look like this:
.
I also want to display a popup when hovering over a square with some information related to the square.
What I just tried:
I tried to use the GridLayer class for this but it seems I can mask it so that it just shows only specific squares.
There a various plugins but I do not really understand what they are doing
Has anyone an idea how this can be implemented?
Thank you
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.
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.
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 was asked to see if I could using leaflet draw a circle and as I'm drawing it show what the current expanding radius is. Either as a tooltip or write it to a page label. I noticed the circle option has a showRadius option but can you capture this value as your drawing the circle?
Kind of like the measure tool that uses the drawing plugin can show your distance as you move the mouse.
This way the user can see how big their circle is as they are drawing it.
Any ideas, examples, hints?
Leaflet.draw plugin does that.
Check out this demo
However, it shows radius only when you create a circle. Unfortunately, not when you edit it.