Открытие div блока при клике на polyline в leaflet

@aleksey517 · Регистрация: 16.03.2022

Студворк — интернет-сервис помощи студентам

Не подскажете, как активировать всплывающее окно в виде блока div?
Оно сделано и лежит в состоянии display: none;
Необходимо сделать, чтобы при клике на полилинию он активировался (хотя бы display: block)
Как это реализовать в leaflet?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="popup1" class="popup1">
    <div class="popup_body">
        <div class="popup_content">
            <a href="" class="popup_close">x</a>
            <div class="popup_title">ФОТОГРАФИИ ОБЪЕКТА</div>
                <div class="image-slider swiper-container">
                    <div class="image-slider_wrapper swiper-wrapper">
                        <div class="image-slider_slide swiper-slide">
                            <div class="image-slider_image">
                                <div class="popup_img"><img src="https://www.cyberforum.ru/images/Screenshot_1932.png" width="500">
                                    <div class="popup_text">ДО</div>
                                </div>
                                <div class="popup_img"><img src="https://www.cyberforum.ru/images/Screenshot_1933.png" width="500">
                                    <div class="popup_text">ПОСЛЕ</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
    </div>
</div>

Это само окно так называемого поп-апа вместе со слайдером картинки.

И есть вот такая вот полилиния в leaflet:

Java
1
2
3
4
5
6
7
8
9
10
11
var TooltipClass = {
  'className': 'class-tooltip'
}
var latlngs = [
    [58.67034,30.28318],[58.66888,30.28338],[58.6610,30.2849],[58.6588,30.2851],[58.6573,30.2851],[58.6565,30.2854],[58.6551,30.2861],[58.6498,30.2875]
];
 
 
var polyline1 = L.polyline(latlngs, {color: '#92D34D', opacity: 0.95, weight: 7}).bindTooltip("<big>Ремонт</big>", { 
  sticky: true,  offset: [10, 0],     ...TooltipClass // using spread operator (ES2018)
  }, TooltipClass).addTo(map);

И css поп-апа:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.popup1 {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}
 
 
.popup_body {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 30px 10px 10px;
}
.popup_content {
    background-color: #fff;
    color: #000;
    max-width: 1007px;
    padding: 0px;
    position: relative;
}
.popup_close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    color: rgb(172, 172, 172);
    text-decoration: none;
}
.popup_title {
    font-size: 25px;
    padding: 30px;
    justify-content: left;
    margin: 0px 0px 0px 0px;
}
.image-slider_image :last-child {
    margin-right: 0px;
}
.popup_img {
    float: left;
    margin-right: 7px;
    text-align: center;
}
 
.popup_text {
    align-items: center;
    padding: 20px 0;
}

Новые блоги и статьи Все статьи Все блоги /
Основы OpenGL 3.3 и Qt 6.9. Трансформированный треугольник 8Observer8 27.06.2025 На русском https:/ / rutube. ru/ video/ e424497dd6b7ae7e11494027c4b31a54/ https:/ / vkvideo. ru/ video-231040171_456239019 https:/ / www. youtube. com/ watch?v=mfD-ZL7wa_4 Bastyon	Федерация аутентификации на основе JWT-токенов с Keycloak и .NET в гетерогенных инфраструктурах ArchitectMsa 27.06.2025 Тот самый момент, когда впервые столкнулся с проблемой интеграции десятка разрозненных систем аутентификации в одной корпоративной экосистеме. Кажый сервис жил своей жизнью - тут Basic Auth, там. . .	Гайд по современным СУБД (небесспорный) Codd 26.06.2025 Когда я только начинал свой путь в IT как рядовой программист, база данных казалась мне чем-то простым и понятным. Ну, серьезно — это же просто место, где лежат данные, верно? Напиши SELECT * FROM. . .	Использование C# с AWS S3: Примеры с AWS SDK для .NET stackOverflow 26.06.2025 Amazon S3 (Simple Storage Service) уже давно стал стандартом де-факто в мире облачного хранения данных. Особенно приятно, что для разработчиков . NET предусмотрен отличный SDK, который значительно. . .	Веб-автоматизация с Python и Selenium AI_Generated 25.06.2025 Selenium с Python — это комбинация, которая выдержала проверку временем. Несмотря на появление новых инструментов вроде Playwright или Puppeteer, связка Python-Selenium остаётся золотым стандартом. . .
CQRS и Event Sourcing на C# ArchitectMsa 25.06.2025 За последние несколько лет сложность корпоративных приложений выросла в геометрической прогрессии. Простые монолитные системы уступили место распределенным микросервисам, а нагрузка на корпоративные. . .	Хак домофона или как открыть дверь по номеру yariko 25.06.2025 Забыли дома ключ. Не проблема. Можно открыть дверь домофона, просто позвонив на свой номер квартиры. Идея состоит в следующем. Внутрь трубки абонента встраивается контроллер, который по звонку сам. . .	Как украсить новогоднюю елку с Q# и Qiskit EggHead 24.06.2025 Что может быть необычнее, чем применить законы квантовой механики для украшения новогодней елки? Пока другие развешивают обычные гирлянды, я решил объединить свою страсть к квантовым вычислениям с. . .	Системы нулевого доверия на C# UnmanagedCoder 24.06.2025 Традиционная архитектура безопасности работает по принципу средневекового замка: создаём высокие стены вокруг корпоративной сети, укрепляем ворота межсетевыми экранами и системами обнаружения. . .	Снова не мой путь. Циклическое среднее, я обеими руками за проверку условия, в ракурсе данной задачи - циклическое среднее в топку. Hrethgir 24.06.2025 Привет. Такой вопрос - нужно выводить среднее математическое между двумя направлениями, интервал значений которых может лежать в диапазоне одного оборота по кругу. Проблема заключается в том, что. . .