Voda ve va拧铆 obci - informa膷n铆 mapa

<!DOCTYPE html> <html> <head> <title>Voda ve va拧铆 obci - informa膷n铆 mapa</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> #mapa { width:100%; height:800px; } html, body { height:100%; margin:0; padding:0; font:11px Verdana,Arial,Helvetica,sans-serif; } p, div, ul, li { padding:0px; margin:0px; } h1 { font-size:200%; font-weight:bold; margin:5px 10px; padding:10px 0; color:#004380; text-align:center; } p.popis { text-align:center; padding-bottom:20px; font-size:120%; font-weight: bold; } ul { padding:0 0 10px 18px; } li { list-style:disc; } #menu { text-align:center; } #menu a { text-align:left; } .dropbtn { background-color:#0077bd; color:white; padding:16px; margin:0 5px 5px 0; font-size:16px; line-height:20px; border:none; cursor:pointer; } .dropbtn:hover, .dropbtn:focus { background-color:#004380; } .dropdown { position:relative; display:inline-block; } .dropdown-content { display:none; position:absolute; background-color:#f9f9f9; min-width:300px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; } .dropdown-content a { color:black; padding:8px 16px; font-size:14px; text-decoration:none; display:block; } .dropdown-content a:hover { color:#fff; } .dropdown-content a:hover { background-color:#0077bd } .show { display:block; } </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>VODA VE VA艩脥 OBCI - INFORMA膶N脥 MAPA</h1> <p class="popis">Jak媒 je zdroj pitn茅 vody ve va拧铆 obci? Jak谩 je jej铆 tvrdost? Kter茅 st艡edisko Vodkavy se u v谩s star谩 o vodovod 膷i kanalizaci?<br>To v拧e se dozv铆te v n谩sleduj铆c铆 informa膷n铆 map臎, sta膷铆 jen vyhledat v seznamu va拧i obec nebo 膷谩st obce. Karlovy Vary jsou rozd臎len茅 podle m臎stsk媒ch 膷tvrt铆.<br>Na map臎 jsou tak茅 schematicky zakreslen茅 trasy hlavn铆ch skupinov媒ch vodovod暖 provozovan媒ch Vodakvou.</p> <div id="menu"></div> <div id="mapa"></div> <script> var mapa; var znacka = new Array(); var info = new Array(); var pismeno = ""; var podmenu; function menu(i, nazev) { var prvni_znak = nazev.substring(0, 1); if (prvni_znak == "C" && nazev.substring(1, 2) == "h") { prvni_znak = "Ch"; } if (pismeno !== prvni_znak) { if (pismeno !== "") { podmenu = podmenu + "</div></div>"; div = document.getElementById("menu"); div.innerHTML = div.innerHTML + podmenu; } podmenu = ""; podmenu = "<div class='dropdown'><button onclick='zobrazPodmenu(\"" + prvni_znak + "\")' class='dropbtn'>" + prvni_znak + "</button><div id='myDropdown" + prvni_znak + "' class='dropdown-content'>"; pismeno = prvni_znak; } podmenu = podmenu + "<a href='#' onclick='zobrazZnacku(znacka[" + i + "]," + i + ")'>" + nazev + "</a>"; } function zobrazPodmenu(pismeno) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } document.getElementById("myDropdown" + pismeno).classList.toggle("show"); } window.onclick = function (event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } function zobrazZnacku(marker, i) { mapa.setCenter(marker.position); mapa.setZoom(14); var infowindow = new google.maps.InfoWindow({ content: info[i] }); infowindow.open(mapa, marker); } function initMap() { mapa = new google.maps.Map(document.getElementById('mapa'), { center: {lat: 50.0, lng: 12.9}, zoom: 9 }); var kmlLayer = new google.maps.KmlLayer({ url: "https://www.vodakva.cz/mapa/vodovody.xml?a=62", map: mapa }); $.ajax({ type: "GET", async: true, url: "https://www.vodakva.cz/mapa/obce.xml", dataType: "xml", success: nactiObce }); } function nactiObce(xml) { var image = { url: 'https://www.google.com/mapfiles/ms/icons/blue-dot.png', size: new google.maps.Size(32, 32), anchor: new google.maps.Point(0, 40) }; var obce = xml.documentElement.getElementsByTagName("obec"); for (var i = 0; i < obce.length; i++) { menu(i, obce[i].getAttribute("label")); var marker = new google.maps.Marker({ position: {lat: parseFloat(obce[i].getAttribute('lat')), lng: parseFloat(obce[i].getAttribute('lng'))}, map: mapa, icon: image, title: obce[i].getAttribute('label') }); znacka[i] = marker; var urlObec = obce[i].getAttribute("psw"); var aliasObec = urlObec.substring(urlObec.lastIndexOf("/") + 1, urlObec.length - 5); info[i] = "<h2 style=\"margin:0; padding-left:4px;\" >" + obce[i].getAttribute("label") + "</h2><p style=\"padding-left: 5px;\"><a href=" + urlObec + ">kontaktn铆煤daje</a></p><ul><li>zdroj pitn茅 vody: " + obce[i].getAttribute("zpv") + "</li><li><a href=https://www.vodakva.cz/images/obce/kvalita_vody/"+aliasObec+"_kvalita_vody.pdf target=_blank>kvalita vody</a></li><li>tvrdost vody: " + obce[i].getAttribute("tv") + " mmol/l </li><li>stupe艌 tvrdosti: " + obce[i].getAttribute("st") + "</li><li>n臎meck茅 stupn臎: " + obce[i].getAttribute("ns") + "</li><li>francouzk茅 stupn臎: " + obce[i].getAttribute("fs") + "</li><li>kanalizace: " + obce[i].getAttribute("k") + "</li></ul>"; google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { var infowindow = new google.maps.InfoWindow({ content: info[i] }); mapa.setCenter(marker.position); mapa.setZoom(14); infowindow.open(mapa, marker); } })(marker, i)); } podmenu = podmenu + "</div></div>"; div = document.getElementById("menu"); div.innerHTML = div.innerHTML + podmenu; } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgkZeWyPxNm5-AfmdffaBOMRV0D4Y_UB8&callback=initMap" async defer></script> </body> </html>

CINXE.COM

Voda ve va拧铆 obci - informa膷n铆 mapa