17

In a mapbox application that I am building, I am loading multiple markers onto the page depending on the users geolocation, the problem is though that I need certain markers to be above others, but the markers are not respecting the zIndex that I set. Here is my code.

function addMarker(type, radius, height, lat, long, id, special, name) {
    var circle_options;
    switch (type) {
        case marker.RESTRICTED:
            circle_options = {
                color: '#D90000',
                fillColor: '#D90000',  // Fill color
                fillOpacity: 0.4,    // Fill opacity
                stroke: false,
                zIndexOffSet: -1

            };
            break;

        case marker.NOT_RECOMMENDED:
            circle_options = {
                color: '#FF8000',
                fillColor: '#FF8000',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            };
            break;
        case marker.USER_RECOMMENDED:
            circle_options = {
                color: '#9FCC1C',
                fillColor: '#9FCC1C',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            };
            break;
        case marker.APPROVED:
            circle_options = {
                color: '#006ADC',
                fillColor: '#006ADC',  // Fill color
                fillOpacity: 0.75,
                stroke: false,
                zIndexOffSet: 1000
            };
            break;
    }
    var mark = L.circle([
   lat, long
    ], radius * 1609.34, circle_options);

    if (nav.currentPage() == 'location-details') {
        if (mapElement) {
            mapElement.setView([lat, long], zoomMap[radius])
            mapElement.removeLayer(use);
            mapElement.removeLayer(ic);

        }
    }
    else if (nav.currentPage() == 'home') {
        mark.objectId = id;
        circles.push(mark);
    }
    mark.on('click', function (e) {
        var self = id;
        circles.some(function (item) {
            if (self == item.objectId) {
                nav.navigate('location-details', false, item.objectId);
                return true;
            }
        });
    })
    mark.addTo(mapElement)
}
Hossein Narimani Rad
  • 31,361
  • 18
  • 86
  • 116
Elias Nichols
  • 183
  • 1
  • 7
  • why not just add the markers in the order you want them to display? There is no functionality for z-index in Mapbox – Vincent McNabb Jan 25 '15 at 01:16
  • 1
    [L.Circle](https://www.mapbox.com/mapbox.js/api/v2.1.5/l-circle/) extends [L.Path](https://www.mapbox.com/mapbox.js/api/v2.1.5/l-path/) so you could possibly use the `bringToFront()` and `bringToBack()` methods. But it does not allow you to precisely control the z-index, see this [feature request](https://github.com/Leaflet/Leaflet/issues/185). And Vincent is right about the order : see [With JavaScript, can I change the Z index/layer of an SVG element?](http://stackoverflow.com/questions/482115/with-javascript-can-i-change-the-z-index-layer-of-an-svg-g-element) – slaur4 Feb 20 '15 at 12:28
  • 3
    Can you make a [jsfiddle](http://jsfiddle.net) for it? – BDD Apr 25 '15 at 16:41
  • 1
    Are you using positioned elements? https://developer.mozilla.org/en-US/docs/Web/CSS/z-index – user2182349 Apr 29 '15 at 11:40

2 Answers2

3

Looks like there's no zIndexOffSet option among Path options you can pass as a last param to L.Circle().

Though there is a className option which you could use to assign custom classes with different pre-set z-indexes to your markers.

dekkard
  • 6,121
  • 1
  • 16
  • 26
0

If you're working with Layers, you can use this feature to control the order of rendering of your markers:

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-symbol-sort-key

Chris
  • 4,212
  • 5
  • 37
  • 52