{"id":3077,"date":"2025-11-05T06:47:14","date_gmt":"2025-11-05T06:47:14","guid":{"rendered":"https:\/\/borgodoro.staging-itineraria.it\/map\/"},"modified":"2025-12-19T14:42:49","modified_gmt":"2025-12-19T14:42:49","slug":"map","status":"publish","type":"page","link":"https:\/\/borgodoro.staging-itineraria.it\/en\/map\/","title":{"rendered":"Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3077\" class=\"elementor elementor-3077 elementor-510\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64f47ee e-con-full e-flex e-con e-parent\" data-id=\"64f47ee\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-064024a e-flex e-con-boxed e-con e-child\" data-id=\"064024a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27eb30b elementor-widget elementor-widget-ucaddon_side_border_heading\" data-id=\"27eb30b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_side_border_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Side Line Heading -->\n<style>\/* widget: Side Line Heading *\/\n\n#uc_side_border_heading_elementor_27eb30b\n{\n  display:flex;\n}\n\n#uc_side_border_heading_elementor_27eb30b .side_border_heading_title\n{\n  color:black;\n}\n\n#uc_side_border_heading_elementor_27eb30b .side_border_heading_subtitle\n{\n  line-height:1.5em;\n  color:gray;\n}\n#uc_side_border_heading_elementor_27eb30b .side_border_heading_line_holder{\nflex-shrink: 0;\n}\n\n#uc_side_border_heading_elementor_27eb30b .side_border_heading_line_spacer{\nflex-shrink: 0;\n}\n\n<\/style>\n\n<div id=\"uc_side_border_heading_elementor_27eb30b\">\n  <div class=\"side_border_heading_line_holder\"><div class=\"side_border_heading_line\" style=\"background-color:#1F4361;\"><\/div><\/div>\n  <div class=\"side_border_heading_line_spacer\"><\/div>\n  <div>\n    <div class=\"side_border_heading_title\"><\/div>\n    <div class=\"side_border_heading_subtitle\"><\/div>\n  <\/div>\n<\/div>\n<!-- end Side Line Heading -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74bbae2 elementor-widget elementor-widget-shortcode\" data-id=\"74bbae2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.6.0\/Control.FullScreen.css\" \/>\n\t<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n\t<script src=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.6.0\/Control.FullScreen.js\"><\/script>\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet-gpx\/1.5.0\/gpx.min.js\"><\/script>\n\n\t<button id=\"toggle-legend\" class=\"mobile-only\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/12\/ico_filtri_2.png\" width=\"20\"><\/button>\n\t<button id=\"geolocate-button\" class=\"mobile-only\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/icon-segnaposto.png\" width=\"20\"><\/button>\n\t<!--div id=\"zoom-label\">Ingrandisci per visualizzare gli itinerari locali<\/div-->\n\n\t<!-- Box filtro visibile sempre su desktop e apribile da mobile -->\n\t<div id=\"map-legend\" class=\"leaflet-gpx-legend collapsible\">\n\t  <div class=\"titleFiltroMappa\">Filter:<\/div>\n\t  <!--label for=\"filtro-piedi\"><input type=\"checkbox\" id=\"filtro-piedi\" name=\"filtro-piedi\" value=\"piedi\" class=\"filtro-checkbox\" checked> A piedi<\/label><br>\n\t  <label for=\"filtro-bici\"><input type=\"checkbox\" id=\"filtro-bici\" name=\"filtro-bici\" value=\"bici\" class=\"filtro-checkbox\" checked> In bici<\/label-->\n\t\t<label class=\"filtro-opzione\">\n\t\t  <input type=\"checkbox\" id=\"filtro-piedi\" name=\"filtro-piedi\" value=\"piedi\" class=\"filtro-checkbox\" checked>\n\t\t  On foot&nbsp;<span class=\"color-line\" style=\"background-color: #1D6B9B;\"><\/span> <!-- Itinerari a piedi -->\n\t\t<\/label>\n\t\t<label class=\"filtro-opzione\">\n\t\t  <input type=\"checkbox\" id=\"filtro-bici\" name=\"filtro-bici\" value=\"bici\" class=\"filtro-checkbox\" checked>\n\t\t  By bicycle&nbsp;<span class=\"color-line\" style=\"background-color: #b12944;\"><\/span> <!-- Itinerari in bici -->\n\t\t<\/label>\n\t\t<label class=\"filtro-opzione\">\n\t\t  <input type=\"checkbox\" id=\"filtro-poi\" name=\"filtro-poi\" value=\"poi\" class=\"filtro-checkbox\"> <!-- Attrattive -->\n\t\t  Points of interest\t\t<\/label>\n\t\t<label class=\"filtro-opzione\">\n\t\t  <input type=\"checkbox\" id=\"filtro-strutture\" name=\"filtro-strutture\" value=\"strutture\" class=\"filtro-checkbox\"> <!-- Alloggi -->\n\t\t  Accomodations\t\t<\/label>\n\t\t<label class=\"filtro-opzione\">\n\t\t  <input type=\"checkbox\" id=\"filtro-fontane\" name=\"filtro-fontane\" value=\"fontane\" class=\"filtro-checkbox\"> <!-- Fontanelle -->\n\t\t  Fountains\t\t<\/label>\n\t<\/div>\n\t\t\n\t<div id=\"map-loader\" class=\"map-loader\">Caricamento in corso\u2026<\/div>\n\t<div id=\"mapBici\" style=\"height: 600px\"><\/div>\n\n\t<script>\n\tconst gpxLayers = {};\n\tconst originalColors = {};\n\tconst layerCategories = {};\n\tconst poiLayers = {};\n\tconst strutLayers = {};\n\tconst fontanaLayers = {};\n\tconst boundsGroup = L.latLngBounds();\n\tlet loadedCount = 0;\n\tlet expectedCount = 0;\n\tlet initialBoundsCoords = [];\n\n\tconst map = L.map('mapBici', {\n\t  fullscreenControl: true,\n\t  fullscreenControlOptions: {\n\t\tposition: 'topright'\n\t  },\n\t  scrollWheelZoom: false\n\t}).setView([42.5, 12.5], 5);\n\t\/\/L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n\tL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\tmaxZoom: 19,\n\t\tattribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n\t}).addTo(map);\n\n\t\/\/ Geolocalizzazione da mobile con marker se subito disponibile\n\tif (window.innerWidth <= 768 && navigator.geolocation) {\n\t  navigator.geolocation.getCurrentPosition(function(position) {\n\t\tconst lat = position.coords.latitude;\n\t\tconst lng = position.coords.longitude;\n\t\tconst userMarker = L.circleMarker([lat, lng], {\n\t\t  radius: 6,\n\t\t  fillColor: '#3388ff',\n\t\t  color: '#fff',\n\t\t  weight: 2,\n\t\t  opacity: 1,\n\t\t  fillOpacity: 0.8\n\t\t}).addTo(map).bindPopup(\"Sei qui\");\n\t  });\n\t}\n\n\t\/\/ Pulsante \"\ud83d\udccd La mia posizione\"\n\tdocument.getElementById('geolocate-button').addEventListener('click', function () {\n\t  if (navigator.geolocation) {\n\t\tnavigator.geolocation.getCurrentPosition(function (position) {\n\t\t  const lat = position.coords.latitude;\n\t\t  const lng = position.coords.longitude;\n\t\t  const userMarker = L.circleMarker([lat, lng], {\n\t\t\tradius: 6,\n\t\t\tfillColor: '#3388ff',\n\t\t\tcolor: '#fff',\n\t\t\tweight: 2,\n\t\t\topacity: 1,\n\t\t\tfillOpacity: 0.8\n\t\t  }).addTo(map).bindPopup(\"Sei qui\").openPopup();\n\t\t  map.setView([lat, lng], 10);\n\t\t});\n\t  } else {\n\t\talert(\"Geolocalizzazione non supportata dal browser.\");\n\t  }\n\t});\n\t\tdocument.getElementById('map-loader').classList.remove('hidden');\n\t<\/script>\n\n\t<script>expectedCount = 0;<\/script>\t<!--script src=\"\/wp-content\/themes\/theme-rz\/js\/mappa.js\" defer><\/script-->\n\t<script>\n\t\t\n\tfunction setupFiltroMezzo() {\n\t  const checkboxes = document.querySelectorAll('.filtro-checkbox');\n\t  function aggiornaFiltro() {\n\t\tconst selected = Array.from(checkboxes)\n\t\t  .filter(cb => cb.checked)\n\t\t  .map(cb => cb.value);\n\t\tObject.entries(gpxLayers).forEach(([name, layer]) => {\n\t\t  const cat = layerCategories[name];\n\t\t  if (selected.includes(cat)) {\n\t\t\tif (!map.hasLayer(layer)) map.addLayer(layer);\n\t\t  } else {\n\t\t\tif (map.hasLayer(layer)) map.removeLayer(layer);\n\t\t  }\n\t\t});\n\t\t  \n\t\t\/\/ --- POI (categoria \"poi\")\n        Object.entries(poiLayers).forEach(([name, marker]) => {\n            if (selected.includes(\"poi\")) {\n                if (!map.hasLayer(marker)) map.addLayer(marker);\n            } else {\n                if (map.hasLayer(marker)) map.removeLayer(marker);\n            }\n        });\n\t\t\/\/ --- Strutture\n        Object.entries(strutLayers).forEach(([name, marker]) => {\n            if (selected.includes(\"strutture\")) {\n                if (!map.hasLayer(marker)) map.addLayer(marker);\n            } else {\n                if (map.hasLayer(marker)) map.removeLayer(marker);\n            }\n        });\n\t\t\/\/ --- FONTANE\n        Object.entries(fontanaLayers).forEach(([name, marker]) => {\n            if (selected.includes(\"fontane\")) {\n                if (!map.hasLayer(marker)) map.addLayer(marker);\n            } else {\n                if (map.hasLayer(marker)) map.removeLayer(marker);\n            }\n        });\n\t  }\n\t  checkboxes.forEach(cb => cb.addEventListener('change', aggiornaFiltro));\n\t  aggiornaFiltro();\n\t}\n\t\t\n\t\t\/\/ Layer per le fontane\nlet fontaneLayer = L.layerGroup().addTo(map);\n\n\/\/ Funzione per caricare le fontane nell'area visibile\nfunction caricaFontane() {\n    fontaneLayer.clearLayers();\n\n    const bbox = map.getBounds();\n    const query = `\n        [out:json][timeout:25];\n        (\n            node[\"amenity\"=\"drinking_water\"](${bbox.getSouth()},${bbox.getWest()},${bbox.getNorth()},${bbox.getEast()});\n        );\n        out;\n    `;\n\n    fetch(\"https:\/\/overpass-api.de\/api\/interpreter\", {\n        method: \"POST\",\n        body: query\n    })\n    .then(res => res.json())\n    .then(data => {\n        data.elements.forEach(el => {\n            if (el.lat && el.lon) {\n                L.marker([el.lat, el.lon], {\n                    icon: L.divIcon({\n                        className: \"icona-fontana\",\n                        html: \"\ud83d\udca7\",\n                        iconSize: [20, 20],\n                        iconAnchor: [10, 10]\n                    })\n                }).addTo(fontaneLayer);\n            }\n        });\n    });\n}\n\n\/\/ Carico le fontane al load e allo spostamento mappa\n\/\/map.on(\"moveend\", caricaFontane);\n\/\/caricaFontane();\n\n\t\t\n\tdocument.getElementById('toggle-legend').addEventListener('click', function() {\n\t  const legend = document.getElementById('map-legend');\n\t  legend.classList.toggle('collapsed');\n\t  this.classList.toggle('active'); \/\/ aggiungi\/togli classe \"active\" al bottone\n\t});\n\t\t\n\tmap.on('enterFullscreen', function(){\n\t\tconst btn = document.querySelector('.leaflet-control-zoom-fullscreen.fullscreen-icon');\n\t\tif (btn) {\n\t\t\tbtn.classList.add('exit-fullscreen');\n\t\t\tbtn.classList.remove('fullscreen');\n\t\t}\n\t});\n\n\tmap.on('exitFullscreen', function(){\n\t\tconst btn = document.querySelector('.leaflet-control-zoom-fullscreen.fullscreen-icon');\n\t\tif (btn) {\n\t\t\tbtn.classList.add('fullscreen');\n\t\t\tbtn.classList.remove('exit-fullscreen');\n\t\t}\n\t});\n\t\n\tmap.on('zoomend', function() {\n\t\tconst currentZoom = map.getZoom();\n\t\t\/\/caricaItinerariPerZoom(currentZoom);\n\t\tconst checkboxFontane = document.getElementById('filtro-fontane');\n\t\tif(currentZoom > 12){\n\t\t   \/\/document.getElementById('zoom-label').style.display = 'none';\n\t\t\tif (checkboxFontane) {\n\t\t\t\tcheckboxFontane.checked = true;\n\t\t\t}\n\t\t}else{\n\t\t   \/\/document.getElementById('zoom-label').style.display = 'flex';\n\t\t\tif (checkboxFontane) {\n\t\t\t\tcheckboxFontane.checked = false;\n\t\t\t}\n\t\t}\n\t\tsetupFiltroMezzo();\n\t});\n\n\t<\/script>\n\n\t<style>\n\t\t#mapBici{\n\t\t\theight: 500px;\n\t\t\tposition: relative;\n\t\t}\n\t\t.map-loader {\n\t\t  position: absolute;\n\t\t  top: 50%;\n\t\t  left: 50%;\n\t\t  transform: translate(-50%, -50%);\n\t\t  z-index: 1003;\n\t\t  background: rgba(255,255,255,0.9);\n\t\t  padding: 1em 1.5em;\n\t\t  border-radius: 5px;\n\t\t  font-size: 1.1em;\n\t\t}\n\t\t.hidden { display: none; }\n\t\t\n\t\t.titleFiltroMappa{\n\t\t\tfont-size: 21px;\n\t\t\tmargin-bottom:10px;\n\t\t}\n\t.leaflet-gpx-legend {\n\t  background: white;\n\t  padding: 8px;\n\t  border-radius: 4px;\n\t  box-shadow: 0 0 6px rgba(0,0,0,0.3);\n\t  max-height: 190px;\n\t  overflow-y: auto;\n\t  overflow-x: hidden;\n\t  width: 200px;\n\t  position: absolute;\n\t  top: 110px;\n\t  right: 10px;\n\t  z-index: 1001;\n\t  display: block;\n\t}\n\n\t.leaflet-gpx-legend.collapsible.collapsed {\n\t  display: none;\n\t}\n\t.mobile-only {\n\t  display: none;\n\t}\n\t\t#toggle-legend{\n  \t\t\tbackground: white;\n\t\t\ttop: 110px;\n\t\t\tpadding: 6px;\n\t\t\tline-height: 10px;\n\t\t\tborder-color: #777;\n\t\t}\n\t\t#toggle-legend.active {\n\t\t  background-color: #F29A5B;\n\t\t  color: white;\n\t\t  border: 1px solid #C0663B;\n\t\t}\n\t\t#geolocate-button {\n\t\t  position: absolute;\n\t\t\ttop: auto;\n\t\t  bottom: 10px;\n\t\t  right: 10px;\n\t\t  z-index: 1002;\n\t\t  background: white;\n\t\t  border: 1px solid #ccc;\n\t\t  padding: 8px 12px;\n\t\t  border-radius: 4px;\n\t\t  font-size: 16px;\n\t\t  cursor: pointer;\n\t\t  box-shadow: 0 0 6px rgba(0,0,0,0.3);\n\t\t\twidth: auto;\n\t\t  height: auto;\n\t\t  line-height: normal;\n\t\t}.filtro-opzione {\n\t\t  display: flex;\n\t\t  align-items: center;\n\t\t  margin-bottom: 8px;\n\t\t  font-size: 14px;\n\t\t  cursor: pointer;\n\t\t}\n\n\t\t.filtro-opzione input[type=\"checkbox\"] {\n\t\t  appearance: none;\n\t\t  width: 16px;\n\t\t  height: 16px;\n\t\t  border: 2px solid #999;\n\t\t  border-radius: 3px;\n\t\t  margin-right: 8px;\n\t\t  position: relative;\n\t\t  cursor: pointer;\n\t\t  background-color: white;\n\t\t  transition: background-color 0.2s, border-color 0.2s;\n\t\t}\n\n\t\t.filtro-opzione input[type=\"checkbox\"]:checked {\n\t\t  background-color: #333;\n\t\t  border-color: #333;\n\t\t}\n\n\t\t.filtro-opzione input[type=\"checkbox\"]::after {\n\t\t  content: \"\";\n\t\t  position: absolute;\n\t\t  top: 2px;\n\t\t  left: 5px;\n\t\t  width: 3px;\n\t\t  height: 8px;\n\t\t  border: solid white;\n\t\t  border-width: 0 2px 2px 0;\n\t\t  transform: rotate(45deg);\n\t\t  opacity: 0;\n\t\t}\n\n\t\t.filtro-opzione input[type=\"checkbox\"]:checked::after {\n\t\t  opacity: 1;\n\t\t}\n\n\t\t.color-line {\n\t\t  display: inline-block;\n\t\t  width: 20px;\n\t\t  height: 3px;\n\t\t  border-radius: 2px;\n\t\t  margin-right: 6px;\n\t\t}\n\t\t\t\n\t\t.leaflet-control-zoom-fullscreen.fullscreen-icon.fullscreen {\n\t\t\tbackground-image: url('https:\/\/unpkg.com\/leaflet.fullscreen@1.6.0\/icon-fullscreen-2x.png');\n\t\t\t\/*background-size: 18px 18px;*\/\n\t\t}\n\t\t.leaflet-control-zoom-fullscreen.fullscreen-icon.exit-fullscreen {\n\t\t\tbackground-image: url('https:\/\/slowitaly.tours\/wp-content\/uploads\/2025\/07\/icon_zoom-indietro.png');\n\t\t\tbackground-size: 18px 18px;\n\t\t}\n\t\t#zoom-label {\n\t\t\tposition: absolute;\n\t\t\tleft: 50px;\n    \t\ttop: 12px;\n\t\t\tz-index: 1002;\n\t\t\tbackground: white;\n\t\t\tcolor: #333;\n\t\t\tfont-size: 13px;\n\t\t\tpadding: 6px 10px;\n\t\t\tborder-radius: 4px;\n\t\t\tbox-shadow: 0 0 6px rgba(0,0,0,0.2);\n\t\t\tmax-width: 140px;\n\t\t\ttext-align: left;\n\t\t  }\n\t\t\n\t@media (max-width: 768px) {\n\t\t#map {\n\t\t\theight: 70vh;\n\t\t  }\n\t  .mobile-only {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 10px;\n\t\tright: 10px;\n\t\tz-index: 1002;\n\t  }\n\t  #geolocate-button {\n\t\tdisplay: block;\n\t  }\n\t\t.leaflet-gpx-legend{\n\t\t\ttop: 25%;\n\t\t\tright: 25%;\n\t\t\twidth: 50%;\n\t\t\tpadding: 15px;\n\t\t}\n\t  .leaflet-gpx-legend.collapsible {\n\t\tdisplay: none;\n\t  }\n\t  .leaflet-gpx-legend.collapsible.collapsed {\n\t\tdisplay: block!important;\n\t  }\n\t\t\n\t\t\n\t\t#toggle-legend{\n  \t\t\tbackground: white;\n\t\t\ttop: 110px;\n\t\t\tpadding: 6px;\n\t\t\tline-height: 10px;\n\t\t\tborder-color: #777;\n\t\t}\n\t\t#toggle-legend.active {\n\t\t  background-color: #F29A5B;\n\t\t  color: white;\n\t\t  border: 1px solid #C0663B;\n\t\t}\n\t\t\n\t  .leaflet-top.leaflet-left {\n\t\tleft: auto !important;\n\t\tright: 10px !important;\n\t  }\n\t  .leaflet-control {\n\t\tmargin-right: 10px !important;\n\t  }\n\t\t#zoom-label {\n\t\t\tright: 60px;\n        \ttop: 12px;\n        \tleft: auto;\n\t\t}\n\t  .leaflet-control-zoom,\n\t  .leaflet-control-zoom-fullscreen {\n\t\tbox-shadow: 0 0 6px rgba(0, 0, 0, 0.3);\n\t  }\n\t}\n\t<\/style>\n\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3077","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/pages\/3077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/comments?post=3077"}],"version-history":[{"count":1,"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/pages\/3077\/revisions"}],"predecessor-version":[{"id":3078,"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/pages\/3077\/revisions\/3078"}],"wp:attachment":[{"href":"https:\/\/borgodoro.staging-itineraria.it\/en\/wp-json\/wp\/v2\/media?parent=3077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}