leafeltjs (mapbox) z-index ordering not working

Question

Another developer created our original map but I'm tasked with making some changes. One of these is making sure the activated marker is brought to the front when clicked on (where it is partially overlapped by other markers).

The developers have used mapbox 2.2.2.

I have looked at leafletjs's docs, have followed some instructions on other posted solutions (e.g. solution one and solution two). Neither of these makes any difference.

Examining the marker in Chrome's console I can see the value of options.zIndexOffset is being set (10000 in my test case). I've even set _zIndex to an artificially high value and can see that reflected in the marker's data structure. But visually nothing is changing.

This is how the map is set up initially. All features are from a single geojson feed:

    L.mapbox.accessToken = '<access token here>';

    var map = L.mapbox.map('map', 'map.id', {
    }).setView([37.8, -96], 3);

    var jsonFeed, jsonFeedURL;

    var featureLayer = L.mapbox.featureLayer()
      .addTo(map)
      .setFilter(function (f) {
        return false;
      });

    $.getJSON(jsonFeedURL, function (json) {
      jsonFeed = json;
      jsonFeedOld = json;
      // Load all the map features from our json file
      featureLayer.setGeoJSON(jsonFeed);

    }).done(function(e) {
      // Once the json feed has loaded via AJAX, check to see if
      // we should show a default view
      mapControl.activateInitialItem();
    });

Below is a snippet of how I had tried setting values to change the z-index. When a visual marker on the featureLayer is clicked, 'activateMarker' is called:

featureLayer.on('click', function (e) {
  mapControl.activateMarker(e);
});

The GEOjson feed has urls for the icons to show, and the active marker icon is switched to an alternative version (which is also larger). When the active feature is a single Point I've tried to set values for the marker (lines commented out, some of the various things I've tried!)

    activateMarker: function (e) {

      var marker = e.layer;
      var feature = e.layer.feature;
      this.resetMarkers();

      if (feature.properties.hasOwnProperty('icon')) {
        feature.properties.icon['oldIcon'] = feature.properties.icon['iconUrl'];
        feature.properties.icon['iconUrl'] = feature.properties.icon['iconActive'];

        feature.properties.icon['oldIconSize'] = feature.properties.icon['iconSize'];
        feature.properties.icon['iconSize'] = feature.properties.icon['iconSizeActive'];
      }
      if (feature.geometry.type == 'Point') {
        marker.setZIndexOffset(10001);
        marker.addTo(featureLayer);
      }
      //featureLayer.setGeoJSON(jsonFeed);
    }

Any advice would be greatly appreciated! I'm at the point where I don't know what else to try (and that's saying something).

I've updated the content to show how the individual feature is activated and the code where I tried to alter the marker's z-index — appaulmac
The suggestion by ghybs about the fact that the setGeoJSON was resetting the layers was the key I needed to track down a solution. I did try pointToLayer but couldn't work it into the file as it was built. However I discovered 'addTo' on my travels and this appears to work just as I hoped. — appaulmac

ghybs ghybs · Accepted Answer · 2016-08-12T21:18:50

What probably happens is that you just flush your markers with the last call to .setGeoJSON():

If the layer already has features, they are replaced with the new features.

You correctly adjust the GeoJSON data related to your icon, so that when re-created, your featureLayer can use the new values to show a new icon (depending on how you configured featureLayer).

But anything you changed directly on the marker is lost, as the marker is removed and replaced by a new one, re-built from the GeoJSON data.

The "cleanest" way would probably be to avoid re-creating all features at every click.

Another way could be to also change something else in your GeoJSON data that tells featureLayer to build your new marker (through the pointToLayer option) with a different zIndexOffset option.

leafeltjs (mapbox) z-index ordering not working

1 Answers