3

I am creating a simple web map using vector tiles of type pbf. The vector tiles are created with tippecanoe like:

tippecanoe -pC -P -z 19 -Z 15 -e builds --drop-densest-as-needed --extend-zooms-if-still-dropping piers.GeoJSON ... water.GeoJSON ... green.GeoJSON w --force

When I display the layers in leaflet using vectorgrid, I can see, that the water polygons are covering the piers. The leaflet example code goes like this:

L.vectorGrid.protobuf('http://localhost:8080/{z}/{x}/{y}.pbf', {
    maxZoom: 19,
    maxNativeZoom: 16,
    vectorTileLayerStyles: {
    greenGeoJSON: {
        color: "#d4dad6",
        weight: 1,
        fillColor: "#ADD19E",
        opacity: 1,
        fillOpacity: 1,
        fill: true,
    },

    waterGeoJSON: function(properties, zoom) {
        var lineWidth = 0;
        if (properties.area > 10000000) {
            if (zoom == 15) {
                lineWidth = 3;
            }
            if (zoom == 16) {
                lineWidth = 3.25;
            }
            if (zoom == 17) {
                lineWidth = 3.5;
            }
            if (zoom >= 18) {
                lineWidth = 4;
            }
        }
        return ({
            weight: lineWidth,
            fillColor: "#99ccff",
            color: "#bfc7c8",
            opacity: 0.1,
            fill: true,
            fillOpacity: 1
            });
        },
        pierpolygonsGeoJSON: {
            weight: 1,
            fillColor: "#e3e3dc",
            color: "black",
            opacity: 1,
            fill: true,
            fillOpacity: 1
        }
    }
}).addTo(mymap);

Here is the current layer order: piers covered

and this is the same map without the water layer: without water

How can I reorder the layers, that are coming from a pbf? Can I change the pbf creation process so the water-layer will be at the right "zlevel"?

2

2 Answers 2

4

The following comment on github made this thing work: https://github.com/Leaflet/Leaflet.VectorGrid/issues/167#issuecomment-451029240

Instead of using the CDN version of vectorgrid, download src and replace the createTile function with the content of the comment.

Add a zorder number to all of your vectorTileLayerStyles, otherwise you'll receive errors.

The above code would look like this then:

L.vectorGrid.protobuf('http://localhost:8080/{z}/{x}/{y}.pbf', {
maxZoom: 19,
maxNativeZoom: 16,
vectorTileLayerStyles: {
greenGeoJSON: {
    color: "#d4dad6",
    weight: 1,
    fillColor: "#ADD19E",
    opacity: 1,
    fillOpacity: 1,
    fill: true,
    zorder:1
},

waterGeoJSON: function(properties, zoom) {
    var lineWidth = 0;
    if (properties.area > 10000000) {
        if (zoom == 15) {
            lineWidth = 3;
        }
        if (zoom == 16) {
            lineWidth = 3.25;
        }
        if (zoom == 17) {
            lineWidth = 3.5;
        }
        if (zoom >= 18) {
            lineWidth = 4;
        }
    }
    return ({
        weight: lineWidth,
        fillColor: "#99ccff",
        color: "#bfc7c8",
        opacity: 0.1,
        fill: true,
        fillOpacity: 1,
        zorder:2
        });
    },
    pierpolygonsGeoJSON: {
        weight: 1,
        fillColor: "#e3e3dc",
        color: "black",
        opacity: 1,
        fill: true,
        fillOpacity: 1,
        zorder:3
    }
}
}).addTo(mymap);

The higher zorder the later it will be drawn onto the canvas, and will cover underlying layers.

1

It's dirty but you can force the layer order through the naming of the layers. i.e. 0_waterGeoJSON and 1_greenGeoJSON

This is because the layers are stored as a object which is an 'unordered' type. This means that when Leaflet.VectorGrid iterates over the layers to display them, they are consistently given in alphabetical order by the layer name. (at least for protobuf)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.