Navigation App<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\"\/>\n\n<style>\nbody { margin:0; font-family: Arial; }\n#map { height: 100vh; }\n\n#panel {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 300px;\n background: white;\n padding: 15px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n z-index: 1000;\n}\n\n#instructions {\n max-height: 200px;\n overflow-y: auto;\n margin-top: 10px;\n font-size: 14px;\n}\n\n.step {\n border-bottom: 1px solid #eee;\n padding: 5px;\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"panel\">\n <b>\ud83e\udded Navigacija<\/b>\n\n <select id=\"mode\">\n <option value=\"driving-car\">\ud83d\ude97 Avto<\/option>\n <option value=\"cycling-regular\">\ud83d\udeb4 Kolo<\/option>\n <option value=\"foot-walking\">\ud83d\udeb6 Pe\u0161<\/option>\n <\/select>\n\n <button onclick=\"getRoute()\">Start<\/button>\n\n <p id=\"summary\"><\/p>\n <div id=\"instructions\"><\/div>\n<\/div>\n\n<div id=\"map\"><\/div>\n\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n\n<script>\nconst apiKey = \"TVOJ_API_KLJU\u010c\"; \/\/ \u2190 zamenjaj!\n\nconst map = L.map('map').setView([46.1512, 14.9955], 8);\n\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\nlet userLocation;\nlet destination;\nlet routeLine;\n\n\/\/ GPS\nnavigator.geolocation.watchPosition(pos => {\n userLocation = [pos.coords.latitude, pos.coords.longitude];\n\n if (!window.userMarker) {\n window.userMarker = L.marker(userLocation).addTo(map)\n .bindPopup(\"Ti si tukaj\");\n } else {\n window.userMarker.setLatLng(userLocation);\n }\n\n map.setView(userLocation, 13);\n});\n\n\/\/ klik cilj\nmap.on('click', e => {\n destination = [e.latlng.lat, e.latlng.lng];\n\n if (window.destMarker) map.removeLayer(window.destMarker);\n\n window.destMarker = L.marker(destination).addTo(map)\n .bindPopup(\"Cilj\");\n});\n\n\/\/ ROUTE\nasync function getRoute() {\n if (!userLocation || !destination) {\n alert(\"Najprej dolo\u010di lokacijo in cilj!\");\n return;\n }\n\n const mode = document.getElementById(\"mode\").value;\n\n const url = `https:\/\/api.openrouteservice.org\/v2\/directions\/${mode}?api_key=${apiKey}&start=${userLocation[1]},${userLocation[0]}&end=${destination[1]},${destination[0]}`;\n\n try {\n const res = await fetch(url);\n const data = await res.json();\n\n if (!data.features) {\n alert(\"Napaka pri poti\");\n console.log(data);\n return;\n }\n\n const route = data.features[0];\n\n \/\/ pot\n const coords = route.geometry.coordinates.map(c => [c[1], c[0]]);\n\n if (routeLine) map.removeLayer(routeLine);\n\n routeLine = L.polyline(coords, {\n color: 'blue',\n weight: 6\n }).addTo(map);\n\n \/\/ summary\n const s = route.properties.summary;\n const km = (s.distance\/1000).toFixed(2);\n const min = Math.round(s.duration\/60);\n\n document.getElementById(\"summary\").innerHTML =\n `\ud83d\udccf ${km} km | \u23f1\ufe0f ${min} min`;\n\n \/\/ navodila\n const steps = route.properties.segments[0].steps;\n\n const container = document.getElementById(\"instructions\");\n container.innerHTML = \"\";\n\n steps.forEach(step => {\n const div = document.createElement(\"div\");\n div.className = \"step\";\n\n div.innerHTML =\n `\u27a1\ufe0f ${step.instruction}<br><small>${Math.round(step.distance)} m<\/small>`;\n\n container.appendChild(div);\n });\n\n } catch (err) {\n console.error(err);\n alert(\"Napaka: \" + err.message);\n }\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigation App \ud83e\udded Navigacija \ud83d\ude97 Avto\ud83d\udeb4 Kolo\ud83d\udeb6 Pe\u0161 Start<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":29,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":235,"date":"2026-05-03T10:37:56","date_gmt":"2026-05-03T10:37:56","guid":{"rendered":"https:\/\/dabudi.si\/?page_id=235"},"modified":"2026-05-03T18:42:49","modified_gmt":"2026-05-03T18:42:49","slug":"skrat-kuzma","status":"publish","type":"page","link":"https:\/\/dabudi.si\/index.php\/skrat-kuzma\/","title":{"rendered":"\u0160krat kuzma"},"content":{"rendered":"\n\n\n\n\nNavigation App<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\"\/>\n\n<style>\nbody { margin:0; font-family: Arial; }\n#map { height: 100vh; }\n\n#panel {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 300px;\n background: white;\n padding: 15px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n z-index: 1000;\n}\n\n#instructions {\n max-height: 200px;\n overflow-y: auto;\n margin-top: 10px;\n font-size: 14px;\n}\n\n.step {\n border-bottom: 1px solid #eee;\n padding: 5px;\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"panel\">\n <b>\ud83e\udded Navigacija<\/b>\n\n <select id=\"mode\">\n <option value=\"driving-car\">\ud83d\ude97 Avto<\/option>\n <option value=\"cycling-regular\">\ud83d\udeb4 Kolo<\/option>\n <option value=\"foot-walking\">\ud83d\udeb6 Pe\u0161<\/option>\n <\/select>\n\n <button onclick=\"getRoute()\">Start<\/button>\n\n <p id=\"summary\"><\/p>\n <div id=\"instructions\"><\/div>\n<\/div>\n\n<div id=\"map\"><\/div>\n\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n\n<script>\nconst apiKey = \"TVOJ_API_KLJU\u010c\"; \/\/ \u2190 zamenjaj!\n\nconst map = L.map('map').setView([46.1512, 14.9955], 8);\n\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\nlet userLocation;\nlet destination;\nlet routeLine;\n\n\/\/ GPS\nnavigator.geolocation.watchPosition(pos => {\n userLocation = [pos.coords.latitude, pos.coords.longitude];\n\n if (!window.userMarker) {\n window.userMarker = L.marker(userLocation).addTo(map)\n .bindPopup(\"Ti si tukaj\");\n } else {\n window.userMarker.setLatLng(userLocation);\n }\n\n map.setView(userLocation, 13);\n});\n\n\/\/ klik cilj\nmap.on('click', e => {\n destination = [e.latlng.lat, e.latlng.lng];\n\n if (window.destMarker) map.removeLayer(window.destMarker);\n\n window.destMarker = L.marker(destination).addTo(map)\n .bindPopup(\"Cilj\");\n});\n\n\/\/ ROUTE\nasync function getRoute() {\n if (!userLocation || !destination) {\n alert(\"Najprej dolo\u010di lokacijo in cilj!\");\n return;\n }\n\n const mode = document.getElementById(\"mode\").value;\n\n const url = `https:\/\/api.openrouteservice.org\/v2\/directions\/${mode}?api_key=${apiKey}&start=${userLocation[1]},${userLocation[0]}&end=${destination[1]},${destination[0]}`;\n\n try {\n const res = await fetch(url);\n const data = await res.json();\n\n if (!data.features) {\n alert(\"Napaka pri poti\");\n console.log(data);\n return;\n }\n\n const route = data.features[0];\n\n \/\/ pot\n const coords = route.geometry.coordinates.map(c => [c[1], c[0]]);\n\n if (routeLine) map.removeLayer(routeLine);\n\n routeLine = L.polyline(coords, {\n color: 'blue',\n weight: 6\n }).addTo(map);\n\n \/\/ summary\n const s = route.properties.summary;\n const km = (s.distance\/1000).toFixed(2);\n const min = Math.round(s.duration\/60);\n\n document.getElementById(\"summary\").innerHTML =\n `\ud83d\udccf ${km} km | \u23f1\ufe0f ${min} min`;\n\n \/\/ navodila\n const steps = route.properties.segments[0].steps;\n\n const container = document.getElementById(\"instructions\");\n container.innerHTML = \"\";\n\n steps.forEach(step => {\n const div = document.createElement(\"div\");\n div.className = \"step\";\n\n div.innerHTML =\n `\u27a1\ufe0f ${step.instruction}<br><small>${Math.round(step.distance)} m<\/small>`;\n\n container.appendChild(div);\n });\n\n } catch (err) {\n console.error(err);\n alert(\"Napaka: \" + err.message);\n }\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigation App \ud83e\udded Navigacija \ud83d\ude97 Avto\ud83d\udeb4 Kolo\ud83d\udeb6 Pe\u0161 Start<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":29,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}