Видимость блока в зависимости от значения map.getZoom

Question

На базе библиотеки LeafletJS создал интерактивную карту с отображением меток и точек. Не могу сделать зависимость отображения div'а в зависимости от значения map.getZoom() (значение масштаба карты) Выполнить это пытаюсь с помощью вставки скрипта в блок с условием:

<div class="headermap">
<script type="text/javascript">
if (map.getZoom() == 2) {
document.write ('<p class="titlemap">Наши проекты</p>')
}
</script>

К сожалению никакой реакции я не получил. Надпись как не появлялась так и не появляется.

Прошу помощи. Страница с картой - https://sapfir.niti.ru/testmap/

Answer 1

В Вашем примере ошибка (index):20 Uncaught ReferenceError: map is not defined надо разместить код в testmap/maps/leaf-demo.js, где у Вас определяется карта

Если я правильно понял Вам надо использовать event в LeafletJS

map.on('zoomend', function() {
    if (map.getZoom() == 2) {
      document.write ('<p class="titlemap">Наши проекты</p>')
    }
})

БЛОГ НА HUSL

Видимость блока в зависимости от значения map.getZoom

Ответы (1 шт):