Možno ste už zaznamenali, ale nedávny problém s Google mapami ma prinútil zamyslieť, či túto službu naďalej využívať. To ale nastalo s tým, že som do máp začal vkladať a značiť viac údajov ako bolo únosné, konto sa zmenilo na platené a ostal mi tam pekný dlh rádovo 100kách eur. ale…

Keďže existujú aj rôzne Open projekty rozhodol som sa po dlhšom uvažovaní pre Open Street Map. Je to vlastne mapový podklad vytváraný komunitou nadšencov ktorý ho zveľaďujú, zaznamenávajú každú zmenu a je celkom rýchlo aktualizovaný. To je ale iba ten mapový základ, čiže veľa veľa obrázkov. Tieto mapové podklady exitujú rôzne varianty ako topografické, satelitné a iné, ale aj platené. Ja sa zaujímam o časť tej bezplatnej. No aby sa to celé dalo používať je potrebné mať nejaký ten aplet, ktorý to bude zobrazovať. Všetky tie rôzne veci ako lupa, prepínanie vrstiev, hýbanie mapou, kreslenie objektov, a taaak ďalej. Na tento základ som použil takzvaný Leaflet od ukrajinského tvorcu  Volodymyr Agafonkin ktorý napísal open source (knižnica z otvoreným zdrojom – kódom) pre používanie máp.

to je z tej nezáživnej časti programovania na ktorej som sa učil ale aj učím a vytváram niečo čo bude použiteľné aj pre naše projekty, súťaže a rôzne iné implementácie. Celá mapa je zatiaľ v testovacom štádiu, čo ale neznamená že nie je funkčná, len proste treba odladiť detaily, funkcie.

Mapa je dostupná na adrese: https://mapa.radio73.sk

function calculateLocator(lat, lng) { lat += 90; lng += 180; const A = 'A'.charCodeAt(0); const locator = [ String.fromCharCode(A + Math.floor(lng / 20)), // Prvý znak (longitude) String.fromCharCode(A + Math.floor(lat / 10)), // Druhý znak (latitude) Math.floor((lng % 20) / 2), // Tretí znak (longitude) Math.floor(lat % 10), // Štvrtý znak (latitude) String.fromCharCode(A + Math.floor((lng % 2) * 12)), // Piaty znak (longitude) String.fromCharCode(A + Math.floor((lat % 1) * 24)) // Šiesty znak (latitude) ]; return locator.join(''); } var map = L.map("map").setView([48,765, 19,276], 8); var maidenhead = L.maidenhead(); L.control.scale({imperial: false, maxWidth: 200,}).addTo(map); L.control.mousePosition().addTo(map); map.addControl(new L.Control.Fullscreen()); map.addControl(L.control.search()); var cesta = L.tileLayer("https://tile.OpenStreetMap.org/{z}/{x}/{y}.png", { maxZoom: 19, zoomAnimation: false, attribution: "© OpenStreetMap upravil Jardo OM7IT mapa.Radio73.sk" }).addTo(map); var topograf = L.tileLayer("https://tile.OpenTopoMap.org/{z}/{x}/{y}.png", { maxZoom: 15, zoomAnimation: false, attribution: "© OpenTopoMap upravil Jardo OM7IT mapa.Radio73.sk"}); var satelit = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { maxZoom: 20, zoomAnimation: false, attribution: "© ArcGisOnline upravil Jardo OM7IT mapa.Radio73.sk"}); var svetla = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { maxZoom: 20, zoomAnimation: false, attribution: "© CartoDB Jardo OM7IT mapa.Radio73.sk"}); var offline = L.tileLayer("http://localhost:8080/styles/basic-preview/512/{z}/{x}/{y}.png", { maxZoom: 20, zoomAnimation: false, attribution: "© Moje z MBTiles (Offline Mapa)"}); var tura_znacenie = L.tileLayer("https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png", { maxZoom: 19, zoomAnimation: false, attribution: "Wanderwege © Lonvia", opacity: 0.7}); var bike_znacenie = L.tileLayer("https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png", { maxZoom: 19, zoomAnimation: false, attribution: "Wanderwege © Lonvia", opacity: 0.7}); var casove_pasma = L.timezones.bindPopup(function (layer) {return L.Browser.ie? layer.feature.properties.time_zone : new Date().toLocaleString("en-GB", {timeZone:layer.feature.properties.tz_name1st, timeZoneName:"short"});}); // Inicializácia L.Control.SimpleLocate a uloženie do premennej const simpleLocateControl = new L.Control.SimpleLocate({ position: "topleft", className: "button-locate", afterClick: (result) => { }, afterMarkerAdd: () => { // Nájdeme element markeru a pridáme click event const elem = document.getElementById("leaflet-simple-locate-icon-spot"); if (elem) { elem.addEventListener("click", (event) => { // Používame `simpleLocateControl` namiesto `control` const latlng = simpleLocateControl.getLatLng(); const latlng_str = `Pozicia: [${Math.round(latlng.lat * 100000) / 100000}, ${Math.round(latlng.lng * 100000) / 100000}]`; const accuracy = simpleLocateControl.getAccuracy(); const accuracy_str = `Presnost: ${Math.round(accuracy)}m`; const angle = simpleLocateControl.getAngle(); const angle_str = `Smer: ${Math.round(angle)}°`; // Zobrazíme popup na mape L.popup() .setLatLng(latlng) .setContent(`

${latlng_str}

${accuracy_str}

${angle_str}

`) .openOn(map); // Zastavenie propagácie udalosti event.stopPropagation(); event.preventDefault(); }); } }, afterDeviceMove: (event) => { // Získaj aktuálnu polohu z kontroléra const latlng = simpleLocateControl.getLatLng(); // Vystredi mapu na aktuálnu polohu if (latlng) { map.setView(latlng, map.getZoom()); } // Prípadne môžeš použiť map.panTo(latlng) } }).addTo(map); var toggleBackgroundControl = L.control({position: "topleft"}); toggleBackgroundControl.onAdd = function(map) { var div = L.DomUtil.create("div", "toggle-background-control"); div.innerHTML = ""; //div.innerHTML = "D/N"; div.onclick = function() { document.getElementById("map").classList.toggle("zmena_pozadia_mapa"); }; return div;}; toggleBackgroundControl.addTo(map); function updateBackground() { var now = new Date(); var times = SunCalc.getTimes(now, 48.76472,19.2761); var sunset = times.sunset; var sunrise = null; if (now >= sunset || now