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!
Related
I want to overlay my data-layer on top of the water but below the land surface.
But the problem is that there is basically no "ground" layer on mapbox layers. There are different layers like 'water', 'roads' etc layered on top of a background which is basically 'land'
I have been able to use 'roads' on top on my data which gives the following images. but is there a way to visualize my data only on 'water' and not on 'land'?
For more information. data is in geojson format. I have used movelayer() funtion of mapbox and checked by moving my datalayer below each layer of map.getStyle().layers one by one.
Also, can this be done in different styles available in mapbox?
To do what you're trying to achieve, you'll have to find another tileset of land polygons to use as a mask. There isn't a way to dynamically clip a layer to within the polygons of another layer, for instance.
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.
I'm using Leaflet (with omnivore and the MapQuest tile plugins) to display a map with colored polygons. The map and polygons look/work fine, but there are these mysterious blue markers everywhere.
There's nothing in the JS about markers at all, and if I comment out the polygon.addTo(map); line, the markers disappear. So they're definitely related to the polygons, even though they're not directly positioned on the polygons.
Any idea why the markers are appearing, or how I can make them disappear?
SOLVED: It turns out that the problem was that I'm using MSSQL's ".Reduce(n)" function to simplify the polygons (for performance), and if you simplify the polygons too far, the results have "Point(...)" items in them - which leaflet renders as markers!
Now, off to figure out why MSSQL is turning things into points...
Welcome to SO!
Most probably your polygon variable is a Leaflet GeoJSON Layer Group built by the omnivore plugin, and the data you feed it with contains "Point" type geometries.
If you do not specify anything special to handle these points, Leaflet will render them with this default blue marker icon.
In that case, you could simply filter out those point features, whether after omnivore processing (use the ready event) or using a custom GeoJSON Layer Group with its filter option. There should be other posts describing such solutions.
See e.g. Mapbox: Filtering out markers in a Leaflet Omnivore KML layer
If you are not in this case, you would have to provide more information for people to be able to help you. Typically code that you use to build your polygon layer and sample data.
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 am new to OpenstreetMap and Leafletjs. I am trying to implement a map displaying journey time information on motorways (also called highways in some part of the world) by using different colors to show road congestion and the problem I'm facing is, once the map tiles are rendered, it comes with all information, like town/city names, road names etc.
On the basis of road information that I receive, I create road colorings in an overlay that sits on top of the tile layer. The problem is, once that happens, the road colorings cover the road names that appear on the tile layer. The problem can be seen in the image displayed below.
Is there a way, I could extract the road names so that I could put it in a layer above the road coloring layer so that road names appear on top of road colorings.
Thanks for any sort of help, Looking forward to some replies.
Thanks
In theory, you could create two sets of tiles: one with the road lines, another with the shields (labels). Render the shields tiles with a transparent background. Then hack Leaflet around to have a second tile layer above the overlay layer.
However... that's a whole bunch of hassle for a fairly simple problem. So: why not render the road numbers alongside the roads, rather than on top of them? That way, your overlay line won't obscure the numbers. Here's an example of a style that does this (disclaimer: my site!).
Assuming you're using Mapnik to render your tiles, you'll want to use TextSymbolizer rather than ShieldSymbolizer. Customising the style is (of course) much easier if you're using TileMill rather than pure Mapnik XML.
As you say, the roadnames (here ref icon symbolizers) are part of the OSM raster map tiles and can't changed easily.
So the easiest solution would be to switch to a mapstyle without labels.
Another idea would be to add more alpha to your cusom GPS track, so it get's more 'hollow' and fits better in the mapstyle. But the default OSM style isn't good for adding informations on top, as this basemap is already to detailed. Maybe it makes sense to use another one:
http://wiki.openstreetmap.org/wiki/Featured_tiles