Angular Leaflet - GeoJson hidden on layer change

Question

I have a leaflet map with 2 layers

First layer

layers: {
    baselayers: {
        osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz',
            visible : false,
            layerParams: {
                showOnSelector: true
            }
        },
        vplan: {
            name: 'vplan',
            type: 'imageOverlay',
            url: 'img/map.png',
            visible : false,
            bounds: [[config.bottomLeftLat, config.bottomLeftLong], [config.topRightLat, config.topRightLong]],
            layerParams: {
                showOnSelector: true,
                noWrap: false,
                opacity : 0.6
            }
        },
    }
}

As you can see OSM is openstreetmap and the other on is PNG image. Both layers are available in the layer selector - OK

Every second I make an Http request to retrieve geoJson data.

$scope.geojson = $http.get(...);

When landing on the page with the map, the geoJson is shown over the open street map - OK

My problem is that when switching to the other layer (PNG image) the geoJson is no more over the layer but behind. After setting the opacity to 0.6, I can see the geoJson behind.

How can I always put the geoJson on top of every layer ?

ghybs ghybs · Accepted Answer · 2016-07-07T08:06:50

If you are using Leaflet version 0.7.7 (or below), all your vector layers (typically from your GeoJSON data, except points) are grouped within a single SVG container.

That SVG container is a sibling of your Image Overlay (PNG image) in the Overlay Pane. Whenever you use the Layers Control to show your Image Overlay, it is appended at the end of that pane, hence it appears above the SVG container, hence above all the vector layers from your GeoJSON data.

To force it behind the SVG container, you can use the bringToBack() method.

To trigger that method when the Layer Control is used, you can add a listener on the map "baselayerchange" event.

If you are using Leaflet 1.0, you can specify your own custom pane for your Image Overlay (or your vector layers) and specify they stacking order through zIndex.

Angular Leaflet - GeoJson hidden on layer change

1 Answers