Geek Answers Handbook

Linear divIcons set behind polygon functions

I have a polygonal layer on my booklet map (geoJson layer):

var PolygonLayer = L.geoJson(json, { style: polygon_style});

With this layer, I have DivIcon tags based on basic attributes:

 var label = L.marker(polygonCenter, { icon: L.divIcon({ className: 'label', html: '<div>' + label + '</div>' }), }).addTo(map);

I also have several highlight styles for mice and click events.
If possible, I would like these divIcon labels to be set behind the polygons so that the cursor and pointer functions will not be blocked.
I tried setting the zIndexOffset token and the DivIcon size to [0,0], but nothing worked. Is there a way to set polygons before the labels?

+6
source share
1 answer

In the leaflet, the z-index of the panels is set automatically.

I believe this:

  • popup panel
  • marker bar
  • overlay panel
  • tile

top down

the overlay panel is the layer of your polygon. if you change the z-index of the marker panel behind the overlap panel, then your markers should appear behind your polygons.

see this code for an example.

http://codepen.io/anon/pen/MKvZZa

CSS

 #map{width:400px;height:400px;} .label{background-color:white;} .leaflet-marker-pane{ z-index:2 }

JavaScript:

 var map = L.map('map').setView([51.505, -0.09], 13); var accessToken='insert your mapbox access token here'; var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + accessToken, { attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>' }); mapboxTiles.addTo(map); var circle = L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map) var myIcon = L.divIcon({ iconSize: [70, 20], iconAnchor: [35, 10], className: 'label', html: '<div>' + 'test label' + '</div>' }) L.marker([51.508, -0.11], { icon: myIcon }).addTo(map);
+1
source

More articles:


All Articles