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/Test.zip', { 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)) {
map.removeLayer(properties);
} else {
console.log("no property layer active");
}
}
if (map.getZoom() >= 10){
if (map.hasLayer(properties)){
console.log("property layer already added");
} else {
map.addLayer(properties);
}
}
}
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.
UPDATE
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);
