im working with map api. i try to hide the marker if the zoom level is below 15 and show the marker if the zoom level more than 15. here are my code :
const markerS = L.marker([0, 0], {icon: start}).addTo(mymap);
const api_url = 'json.php'
async function getjson() {
const response = await fetch(api_url);
const data = await response.json();
const start = (data[0])
const zoom = mymap.getZoom();
markerS.setLatLng([start.latitude, start.longtitude]);
if(zoom > 15) {
markerS.style.display == "block"
} else {
markerS.style.display = "none"
}
}
but the if logic doesn't work. the console.log show "Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'display') at getjson"
how i can fix this?
Leaflet marker instances are not DOM elements - they don't have a .style property. They do, however have a setOpacity method.
Change
markerS.style.display == "block"
markerS.style.display = "none"
to
markerS.setOpacity(100);
markerS.setOpacity(0);
respectively.