Chyby prosím na 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()); // Inicializácia L.Control.SimpleLocate a uloženie do premennej const simpleLocateControl = new L.Control.SimpleLocate({ position: "topleft", className: "button-locate", afterClick: (result) => { //console.log("afterClick", result); //if (!result.geolocation) console.log("Geolocation Error"); //if (!result.orientation) console.log("Orientation Error"); }, afterMarkerAdd: () => { //console.log("afterMarkerAdded"); // 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) => { //console.log("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 cesta = L.tileLayer("https://tile.OpenStreetMap.org/{z}/{x}/{y}.png", { maxZoom: 19, zoomAnimation: false, attribution: "© Ideme cez OpenStreetMap upravil Jardo OM7IT pre mapa.Radio73.sk" }).addTo(map); var topograf = L.tileLayer("https://tile.OpenTopoMap.org/{z}/{x}/{y}.png", { maxZoom: 15, zoomAnimation: false, attribution: "© Ideme cez OpenTopoMap upravil Jardo OM7IT pre 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: "© poháňa ArcGisOnline upravil Jardo OM7IT pre 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 upravil Jardo OM7IT pre mapa.Radio73.sk"}); 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 }); // Premenná pre vrstvu klikacieho bodu var clickMarkersLayer = L.layerGroup(); // Skupina pre klikacie body function handleMapClick(e) { // Súradnice kliknutého bodu var lat = e.latlng.lat.toFixed(6); // Formátovanie na 6 desatinných miest var lng = e.latlng.lng.toFixed(6); // Výpočet Maidenhead lokátora var locator = calculateLocator(parseFloat(lat), parseFloat(lng)); // Text pre pop-up var popupText = `Súradnice: ${lat}, ${lng}
Lokátor: ${locator}
Monent...`; // Pridanie značky (pin) na miesto kliknutia var marker = L.marker([lat, lng]) .bindPopup(popupText, { autoClose: false, closeOnClick: false }) // Pridanie pop-up s textom .addTo(clickMarkersLayer) // Pridaj marker do skupiny vrstvy .openPopup(); // Funkcia na získanie doplnujucuch udajov async function getElevation(lat, lng, marker) { const apiUrl = `https://mapa.radio73.sk/udaje_o_mieste.php?miesto=${lat},${lng}`; const response = await fetch(apiUrl); if (!response.ok) throw new Error("Chyba pri získavaní výšky"); const data = await response.json(); const udaje = data.udaje; // doplnujuce udaje // Aktualizácia popup okna marker.setPopupContent( `Súradnice: ${lat}, ${lng}
Lokátor: ${locator}
${udaje}` ); marker.openPopup(); } // Načítanie výšky hneď po pridaní markeru getElevation(lat, lng, marker); } // Zapnutie alebo vypnutie klikacieho bodu map.on('overlayadd', function (e) { if (e.layer === clickMarkersLayer) { map.on('click', handleMapClick); // Zapni funkciu kliknutia } }); map.on('overlayremove', function (e) { if (e.layer === clickMarkersLayer) { map.off('click', handleMapClick); // Vypni funkciu kliknutia clickMarkersLayer.clearLayers(); // Vymaž existujúce markery } }); // Vlastná vrstva APRS const aprsLayer = L.layerGroup();//.addTo(map); // Aktualizácia APRS dát let refreshInterval; async function updateAPRSData() { try { const response = await fetch('https://mapa.radio73.sk/aprs.php?json_data'); const data = await response.json(); aprsLayer.clearLayers(); // Vyčistenie vrstvy if (data.entries) { data.entries.forEach(entry => { const icon = L.icon({ iconUrl: `https://mapa.radio73.sk/aprs/${entry.symbol_table}${entry.symbol_code}.png`, iconSize: [25, 25] }); const marker = L.marker([entry.lat, entry.lng], { icon }).bindPopup(` ${entry.name || entry.call}
Symbol: ${entry.symbol}
Čas: ${new Date(entry.lasttime * 1000).toLocaleString()}
Súradnice: ${entry.lat}, ${entry.lng}
Alt: ${entry.alt || 'N/A'} m `); aprsLayer.addLayer(marker); }); } } catch (error) { console.error('Chyba pri načítaní APRS dát:', error); } } map.on('overlayadd', function (e) { if (e.name === "APRS") { updateAPRSData(); refreshInterval = setInterval(updateAPRSData, 30000); // Aktualizácia každých 10 sekúnd } }); map.on('overlayremove', function (e) { if (e.name === "APRS") { clearInterval(refreshInterval); // Zastavenie aktualizácie } }); L.control.layers( { "CESTA": cesta, "TEREN": topograf, "SATELIT": satelit, "SVETLÁ": svetla }, { "TURISTIKA": tura_znacenie, "CIKLISTIKA": bike_znacenie, "LOKATORY": maidenhead, "KLIKACIE BODY": clickMarkersLayer, "APRS": aprsLayer, }, { collapsed: true, } ) .addTo(map);

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

A teraz trocha o funkciách:

ľavá časť z hora obsahuje  + – , na zväčšenie a zmenšenie mapy, alebo klasika prstami na mobile ako obrázok, alebo koliesko myši…

ďalšia ikonka štvorca umožňuje zobraziť mapu v takzvanom fullscren čiže plné okno, celá obrazovka..

v cca strede je ikonka, ktorá ukáže moju polohu (samozrejme treba to mať povolené vo svojom zariadení inak nebude fungovať)

v ľavom spodnom rohu sú 2 políčka a to jedno ukazuje GPS súradnice ukazovateľa myši, pripadne ťuk prstom, ďalší ukazuje mierku (poznáme)

a teraz tie zaujímavejšie veci:

v pravo hore je rozklikávací nástroj na vrstvy a zapínanie vypínanie funkcií. Aktuálne sú 4 dostupné vrstvy a to CESTNÁ, TERÉN, SATELIT, SVETLÁ. tá svetlá no.. bola free, tak som dal..

pod nimi sú checkboxy teda zaťukávacie políčka. Keď je označené, funkcia je aktíva ak nie tak neaktívna. Štandardne sú všetky funkcie neaktívne.

prvé dve sú len vrstvy, ktoré sa pridajú do aktuálnej mapy ako turistická a cyklo mapa. Turistická ma opodstatnenie, ale aj ta cyklo pre fajnšmejkrov.

Ďalšia vrstva sú lokátory. A teda do aktuálnej mapy vloží lokátorové štvorce. Ich presnosť je stanovená tým ako je priblížená mapa. od 2 písmenkových po 8 písmenkové. Myslím že funkciu nemusím viac rozoberať.

Klikacie body a teda body, kedy na mape označíte miesto a ukáže súradnice, lokátor, nadmorskú výšku (tu je trocha problém, nakoľko poskytovateľ geografických údajov nezohľadňuje asi našu nadmorskú výšku) a informácie o kótach, ktoré sa v danom lokátore nachádzajú. Toto platí len pre územie čiech a slovenska, údaje sú prevzaté z databáz denníka CL6. Podobný projekt je zobrazený na stránkach súťaže FairPlay CB závod https://www.radio73.sk/sutaz/?sutaz=Sutaz_FairPlay_2025&ID=lokatory kde po kliknutí na lokátor ukáže kóty.

APRS je aktuálne len v štádiu skúšania a vývoja, nakoľko je k dátam ťažší prístup a väčšinou vyžadujú vlastný server. Možno len ponúknem výpis niektorých značiek, neviem ešte sa k tomu vyjadriť.

V prípade návrhov, vylepšení, chýb ma neváhajte kontaktovať. Ak však uvidíte nejakú vážnejšiu chybu, môže to byť spôsobné tým, že na tom aktuálne pracujem 🙂

OM7IT Jardo