/
githubmirror
/
Leaflet
Обзор
Документация
Войти
/
githubmirror
/
Leaflet
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
debug/tests/opacity.html
66 строк
2 KB
Simon Legner
Rename `Map` to `LeafletMap` and keep `Map` as alias (#9892)
11 ноя 2025, 21:28
Не верифицирован
11 ноя 2025, 21:28
2e9b617
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Leaflet debug page - Opacity</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> <link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../css/screen.css" /> <style> .mybox { background-color: red; } </style> <script type="importmap"> { "imports": { "leaflet": "../../dist/leaflet-src.js" } } </script> </head> <body> <div id="map"></div> <script type="module"> import {TileLayer, LatLng, LeafletMap, DivIcon, Point, Marker} from 'leaflet'; const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}); const latlng = new LatLng(50.5, 30.51); const map = new LeafletMap('map', {center: latlng, zoom: 15, layers: [osm]}); // Create a marker, clicking it toggles opacity const opaqueIcon = new DivIcon({ className: 'mybox', iconSize: new Point(100, 100), html: 'opaque. click to toggle', }); const transparentIcon = new DivIcon({ className: 'mybox', iconSize: new Point(100, 100), html: 'transparent', }); const marker = new Marker(latlng, {icon: opaqueIcon}); map.addLayer(marker); let visible = true; marker.on('click', () => { if (visible) { marker.setOpacity(0.3); marker.setIcon(transparentIcon); } else { marker.setOpacity(1); marker.setIcon(opaqueIcon); } visible = !visible; }); const marker2 = new Marker(new LatLng(50.5, 30.52)); map.addLayer(marker2); marker2.bindPopup( 'This is an amazing message. I shouldn\'t of deleted the Ipsum text' ); </script> </body> </html>