This is what I’m doing, when I click the “Enter Building” text it will zoom in to the specific coordinates and it will show the buttons for different floors (1, 2, 3, 4). This is working right now.
This is what it looks like when I click “Enter Building”
When I click the Zoom Out in the top left corner, it should hide/disable the floor buttons. But my problem is, it’s not working. My other problem is whenever I click the “Enter Building” again, it duplicates the Floor Buttons.
here’s the code:
layer.on("popupopen", () => {
$("#enter-btn").click(function () {
map.setView(
[
layer.feature.geometry.coordinates[1],
layer.feature.geometry.coordinates[0],
],
25
);
var floor1 = L.easyButton(
"<strong>1</strong>",
function () {
zoomLevel();
},
{
position: "bottomleft",
}
).addTo(map);
var floor2 = L.easyButton(
"<strong>2</strong>",
function () {
zoomLevel();
},
{
position: "bottomleft",
}
).addTo(map);
var floor3 = L.easyButton(
"<strong>3</strong>",
function () {
zoomLevel();
},
{
position: "bottomleft",
}
).addTo(map);
var floor4 = L.easyButton(
"<strong>4</strong>",
function () {
zoomLevel();
},
{
position: "bottomleft",
}
).addTo(map);
// remove building marker
markerClusters.removeLayer(buildings);
// sync sidebar data
syncSidebar();
// close sidebar
animateSidebar();
// disable or enable floor button
function zoomLevel() {
map.on("zoomend", function (e) {
var max = 21,
current = map.getZoom();
if (current < max) {
floor1.disable();
floor2.disable();
floor3.disable();
floor4.disable();
}
if (current >= max) {
floor1.enable();
floor2.enable();
floor3.enable();
floor4.enable();
}
});
}
});
});
I’m very sorry if my explanation is not very clear.