V tomto příkladu je ukázáno následující:
Vysvětlující poznámky viz komentáře v kódu.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| crossorigin=""> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Example 1</title> | |
| </head> | |
| <body> | |
| <nav> | |
| <a href="#">HOME</a> | |
| <a href="#">MAP</a> | |
| <a href="#">CONTACT</a> | |
| </nav> | |
| <div id="map"></div> | |
| <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" | |
| crossorigin=""></script> | |
| <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script> | |
| <!-- <script src="vozejkmap.js"></script> --> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| "use strict"; | |
| const MAP = L.map("map").setView([49.20495, 16.59711], 10); | |
| const URL = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"; | |
| const URL_OSM = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; | |
| const URL_GMAPS = "https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&scale=2"; | |
| const CARTO = L.tileLayer(URL); | |
| const OSM = L.tileLayer(URL_OSM); | |
| const GMAPS = L.tileLayer(URL_GMAPS, { | |
| // subdomény dlaždic Google Maps, | |
| // mt0.google.com/…, mt1.google.com/…, mt2.google.com/…, mt3.google.com/… | |
| subdomains: ["mt0", "mt1", "mt2", "mt3"] | |
| }); | |
| MAP.addLayer(CARTO); | |
| const BASE_LAYERS = { | |
| "Carto": CARTO, | |
| "OpenStreetMap": OSM, | |
| "Google Maps": GMAPS | |
| }; | |
| // nová clusterová bodová vrstva, L.markerClusterGroup() poskytuje plugin Leaflet.markercluster | |
| const VOZEJK_CLUSTER = L.markerClusterGroup() | |
| .bindPopup(layer => layer.feature.properties.description) | |
| // případně je možné vytvářet i složitější pomocí HTML elementů: | |
| // .bindPopup(layer => { | |
| // const RESULT = document.createElement("p"); | |
| // const AUTHOR = layer.feature.properties.author_name; | |
| // const DESCRIPTION = layer.feature.properties.description; | |
| // RESULT.innerText = `Author: ${AUTHOR}\n${DESCRIPTION}`; | |
| // return RESULT; | |
| // }) | |
| .addTo(MAP); | |
| // clusterovou vrstvu přidáme do slovníku překryvných vrstev | |
| const OVERLAYS = { | |
| "Vozejk Map": VOZEJK_CLUSTER | |
| }; | |
| // vytvoříme kontrolní prvek pro výběr vrstev, první argument jsou přepínací podkladové vrstvy, druhý překryvné | |
| // uložit si referenci na objekt správce vrstev je nutné, abychom mohli později vrstvy do správce vrstev přidávat nebo je z něj odebírat | |
| const LAYERS = L.control.layers(BASE_LAYERS, OVERLAYS); | |
| MAP.addControl(LAYERS); | |
| // místní soubor – relativní URL můžeme použít pokud stránku při vývoji prohlížíme přes webserver | |
| const VOZEJK_URL = "vozejkmap.geojson"; | |
| // pokud pracujeme přes souborový systém (otevření webu přímo přes správce souborů), je potřeba použít URL souboru v internetu | |
| // const VOZEJK_URL = "https://gist.githubusercontent.com/SLeitgeb/f136a1d4d28c2f9ebdfe035bc3027b6d/raw/87b3bea8252bea3438fe7dfa937b79dcb83f0bea/vozejkmap.geojson"; | |
| fetch(VOZEJK_URL) | |
| .then(response => response.json()) | |
| .then(data => { | |
| const VOZEJK = L.geoJSON(data); | |
| VOZEJK_CLUSTER.addLayer(VOZEJK); | |
| // geoJSON vrstvu můžeme také jednoduše přidat přímo do mapy a seznamu vrstev pokud nechceme data clusterovat: | |
| // VOZEJK | |
| // .bindPopup(layer => layer.feature.properties.description) | |
| // .addTo(MAP); | |
| // LAYERS.addOverlay(VOZEJK, "Vozejk Map"); | |
| // LAYERS.removeLayer(VOZEJK_CLUSTER); | |
| // MAP.removeLayer(VOZEJK_CLUSTER); | |
| }); | |
| // tuto variantu použijeme pokud data nahráváme pomocí triku v index.html, <script src="vozejkmap.js"></script> | |
| // const VOZEJK = L.geoJSON(DATA) | |
| // .bindPopup(layer => layer.feature.properties.description) | |
| // .addTo(MAP); | |
| // LAYERS.addOverlay(VOZEJK, "Vozejk Map"); |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-family: Verdana, Geneva, Tahoma, sans-serif; | |
| } | |
| div#map { | |
| width: 100vw; | |
| height: calc(100vh - 49px); | |
| } | |
| nav { | |
| width: 100%; | |
| height: 49px; | |
| background-color: #44c1e7; | |
| } | |
| nav a { | |
| padding: 15px; | |
| text-decoration: none; | |
| display: block; | |
| float: left; | |
| color: #061c46; | |
| } | |
| nav a:hover { | |
| background-color: #84f0ff; | |
| } |
(Sorry about that, but we can’t show files that are this big right now.)