How to avoid that several MultiPolygon GeoJSON layers overlap within leaflet javascript library?

Question

I'm writing a web-site to show different isochrone over city-map: http://130.192.68.210:8080/citychrone/citychrone.html

I have several MultiPolygon GeoJSON layer in my Leafletjs library based project. I would like that when a layer overlap another only one of this can be visible in the overlapping region. Each of this layer has an opacity less than 1, so is not enough to set the ordering of the layer on the map. I'm wondering if it is possible to give a priority to layer, so when they overlap just one of them is visible. Another possibility is to make one layer an "hole" of another layer, it is possible?

Answer 1

Turfjs is great for doing geometric operations like this in Javascript.

In your case, you can create holes in a polygon by "erasing" parts of it, using turf-erase: http://turfjs.org/static/docs/module-turf_erase.html. The example on that page shows something similar to what you want to do.