user6450463 user6450463 - 4 months ago 37
Javascript Question

Leaflet JS - changng esri shape into marker on certain zoom level

I'm using leaflet.shapefile plugin with Leaflet JS, and I'm trying to change the esri shape/polygon into normal marker icons depending on a certain zoom level

The plugin allows me to upload a zipfile onto our webserver, which then is processed by the plugin and added as a layer into Leaflet JS

var properties = new L.Shapefile('data/', { style: propertyStyle, onEachFeature: propertyOnEachFeature })

What I would like to achieve: when the user zoomed in the polygon shape is visible, however when the user zooms above zoomlevel 10, it should display a marker instead, as the esri shape/polygons are very small and nearly not visible.

The zooming in and out part was easily done with:

map.on('zoomend', function() {
if (map.getZoom() <10){
if (map.hasLayer(properties)) {
} else {
console.log("no property layer active");
if (map.getZoom() >= 10){
if (map.hasLayer(properties)){
console.log("property layer already added");
} else {

However I dont know how to change the L.ShapeFile to a L.Marker or what the right approach would be.

Thanks for the help and advice.


The answer 'IvanSanchez' provided me was exactly what i was looking for.
With this a simple plugin 'Leaflet.Deflate' I was able to simply convert any shape, polygon, circle or line to a marker and all it took was to include the plugin js and a one liner:

L.Deflate({minSize: 20}).addTo(map);