diff --git a/dist/assets/index-Cc7V2Uke.js b/dist/assets/index-DbEEJCnn.js similarity index 59% rename from dist/assets/index-Cc7V2Uke.js rename to dist/assets/index-DbEEJCnn.js index d05b97d..d221788 100644 --- a/dist/assets/index-Cc7V2Uke.js +++ b/dist/assets/index-DbEEJCnn.js @@ -1,4 +1,4 @@ -(function(){const c=document.createElement("link").relList;if(c&&c.supports&&c.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const o of r)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function n(r){const o={};return r.integrity&&(o.integrity=r.integrity),r.referrerPolicy&&(o.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?o.credentials="include":r.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function s(r){if(r.ep)return;r.ep=!0;const o=n(r);fetch(r.href,o)}})();var e,g;let x="",P=!0,m,y=null,L;const $={top:5,bottom:window.innerHeight*.5},q={top:100,bottom:100,left:300,right:50};async function j(){const t=S(e.getStyle().layers),n=document.getElementById("serveiSelector2").value;let s=null;if(e.getLayer("clicked-layer")){const o=e.getSource("clicked-layer");o&&o._data&&(s=o._data)}let r;n==="orto"?r="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":n==="topo"?r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":n==="fosc"&&(r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(r),e.once("styledata",()=>{if(s){const o=localStorage.getItem("clickedLayerColor")||"#f9f91d";e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:s}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":o,"fill-outline-color":o,"fill-opacity":.5}},t)}I().then(function(){_()})})}async function I(){e.getSource("terrainMapZen")||e.addSource("terrainMapZen",{type:"raster-dem",url:"https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",tileSize:512,maxzoom:14})}function _(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(t){console.log("ERROR addTerrain"),console.log(t)}}function k(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function N(t){const c=S(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");for(let n=0;nAdreça: ${l.etiqueta} (distància: ${l.distancia} km)
`),p&&(s.innerHTML+=`Coordenades: ${t.toFixed(4)}, ${c.toFixed(4)}
`,s.innerHTML+=`Elevació: ${p} metres

`);for(let i=0;i{y=u,C(u,d)}),d.addEventListener("mouseover",()=>{N(u)}),d.addEventListener("mouseout",()=>{H()}),s.appendChild(d),s.appendChild(document.createElement("br"))}a.length>0&&!y?setTimeout(()=>{y=a[0],C(y,s.querySelector(".myButtonClass"))},25):y&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(y)&&C(y,u)})}w()}function C(t,c){const n=S(e.getStyle().layers);k();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let r=new maplibregl.LngLatBounds;for(let l=0;l{r.extend(f)}):i.type==="MultiPolygon"&&i.coordinates.forEach(f=>{f[0].forEach(b=>{r.extend(b)})})),document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("div");d.classList.add("layer-properties");const v=m[l].properties;for(const[f,b]of Object.entries(v)){const E=document.createElement("div");E.textContent=`${f}: ${b}`,d.appendChild(E)}const h=document.createElement("button");h.textContent="×",h.classList.add("closeButtonClass"),h.addEventListener("click",()=>{k(),d.remove(),h.remove(),c.classList.remove("highlighted-button")}),d.appendChild(h),c&&(c.parentNode.insertBefore(d,c.nextSibling),c.parentNode.insertBefore(h,c.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),c.classList.add("highlighted-button")}const a=window.innerWidth<750?$:q;r&&e.fitBounds(r,{padding:a})}function O(){e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1}),e.on("load",function(){I().then(function(){_()}),e.addControl(new maplibregl.NavigationControl,"top-right");let t=null;const c=20,n=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(n,"top-right");function s(r,o,a,l){const i=(a-r)*Math.PI/180,u=(l-o)*Math.PI/180,d=Math.sin(i/2)*Math.sin(i/2)+Math.cos(r*Math.PI/180)*Math.cos(a*Math.PI/180)*Math.sin(u/2)*Math.sin(u/2);return 6371e3*(2*Math.atan2(Math.sqrt(d),Math.sqrt(1-d)))}n.on("geolocate",function(r){const o=r.coords.longitude,a=r.coords.latitude;if(t&&s(t.lat,t.lon,a,o){document.querySelector(".myButtonClass.highlighted-button")&&C(y,document.querySelector(".myButtonClass.highlighted-button"))})):M(l,a,x);const p=localStorage.getItem("markerColor")||"#ff6e42";g?g.setLngLat([a,l]):g=new maplibregl.Marker({color:p}).setLngLat([a,l]).addTo(e)})})}function S(t){let c="background";for(var n=0;n${r.features[0].properties.etiqueta}
+(function(){const c=document.createElement("link").relList;if(c&&c.supports&&c.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const o of r)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function n(r){const o={};return r.integrity&&(o.integrity=r.integrity),r.referrerPolicy&&(o.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?o.credentials="include":r.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function s(r){if(r.ep)return;r.ep=!0;const o=n(r);fetch(r.href,o)}})();var e,g;let x="",P=!0,y,m=null,L;const $={top:5,bottom:window.innerHeight*.5},q={top:100,bottom:100,left:300,right:50};async function j(){const t=S(e.getStyle().layers),n=document.getElementById("serveiSelector2").value;let s=null;if(e.getLayer("clicked-layer")){const o=e.getSource("clicked-layer");o&&o._data&&(s=o._data)}let r;n==="orto"?r="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":n==="topo"?r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":n==="fosc"&&(r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(r),e.once("styledata",()=>{if(s){const o=localStorage.getItem("clickedLayerColor")||"#f9f91d";e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:s}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":o,"fill-outline-color":o,"fill-opacity":.5}},t)}I().then(function(){_()})})}async function I(){e.getSource("terrainMapZen")||e.addSource("terrainMapZen",{type:"raster-dem",url:"https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",tileSize:512,maxzoom:14})}function _(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(t){console.log("ERROR addTerrain"),console.log(t)}}function k(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function N(t){const c=S(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");for(let n=0;n${l.etiqueta} (distància: ${l.distancia} km)

`),p&&(s.innerHTML+=`Coordenades: ${t.toFixed(4)}, ${c.toFixed(4)}
`,s.innerHTML+=`Elevació: ${p} metres

`);for(let i=0;i{m=u,C(u,d)}),d.addEventListener("mouseover",()=>{N(u)}),d.addEventListener("mouseout",()=>{H()}),s.appendChild(d),s.appendChild(document.createElement("br"))}a.length>0&&!m?setTimeout(()=>{m=a[0],C(m,s.querySelector(".myButtonClass"))},25):m&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(m)&&C(m,u)})}w()}function C(t,c){const n=S(e.getStyle().layers);k();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let r=new maplibregl.LngLatBounds;for(let l=0;l{r.extend(f)}):i.type==="MultiPolygon"&&i.coordinates.forEach(f=>{f[0].forEach(b=>{r.extend(b)})})),document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("div");d.classList.add("layer-properties");const v=y[l].properties;for(const[f,b]of Object.entries(v)){const E=document.createElement("div");E.textContent=`${f}: ${b}`,d.appendChild(E)}const h=document.createElement("button");h.textContent="×",h.classList.add("closeButtonClass"),h.addEventListener("click",()=>{k(),d.remove(),h.remove(),c.classList.remove("highlighted-button")}),d.appendChild(h),c&&(c.parentNode.insertBefore(d,c.nextSibling),c.parentNode.insertBefore(h,c.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),c.classList.add("highlighted-button")}const a=window.innerWidth<750?$:q;r&&e.fitBounds(r,{padding:a})}function O(){e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1}),e.on("load",function(){I().then(function(){_()}),e.addControl(new maplibregl.NavigationControl,"top-right");let t=null;const c=20,n=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(n,"top-right");function s(r,o,a,l){const i=(a-r)*Math.PI/180,u=(l-o)*Math.PI/180,d=Math.sin(i/2)*Math.sin(i/2)+Math.cos(r*Math.PI/180)*Math.cos(a*Math.PI/180)*Math.sin(u/2)*Math.sin(u/2);return 6371e3*(2*Math.atan2(Math.sqrt(d),Math.sqrt(1-d)))}n.on("geolocate",function(r){const o=r.coords.longitude,a=r.coords.latitude;if(t&&s(t.lat,t.lon,a,o){document.querySelector(".myButtonClass.highlighted-button")&&C(m,document.querySelector(".myButtonClass.highlighted-button"))})):M(l,a,x);const p=localStorage.getItem("markerColor")||"#ff6e42";g?g.setLngLat([a,l]):g=new maplibregl.Marker({color:p}).setLngLat([a,l]).addTo(e)})})}function S(t){let c="background";for(var n=0;n${r.features[0].properties.etiqueta}
Carrer: ${r.features[0].properties.nom}
Municipi: ${r.features[0].properties.municipi}
Codi Postal: ${r.features[0].properties.codi_postal}
`).addTo(e)}),e.on("mouseleave","punts2",function(r){e.getCanvas().style.cursor="",s.remove()}))}function F(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function w(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}class R{onAdd(c){return this._map=c,this._container=document.createElement("button"),this._container.className="maplibregl-ctrl pitch-control",this._container.textContent="3D",this._container.onclick=()=>{this._map.getPitch()===0?(this._map.easeTo({pitch:60}),this._container.textContent="2D"):(this._map.easeTo({pitch:0}),this._container.textContent="3D")},this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}}function z(){var t=document.getElementById("notification");t&&t.classList.remove("show");var c=document.getElementById("myModal"),n=document.getElementById("configListContainer");c.style.display="block",fetch("https://api.icgc.cat/territori/info").then(o=>o.json()).then(o=>{n.innerHTML="";const a=document.createElement("div"),l=document.createElement("input");l.type="checkbox",l.id="selectAllCheckbox";const p=document.createElement("label");a.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",a.appendChild(l),a.appendChild(p),n.appendChild(a),l.addEventListener("change",function(){n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=l.checked})}),o.forEach(i=>{if(i.nomAPI!=="geocoder"&&i.nomAPI!=="elevacions"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${i.nomAPI}`,d.name=i.name,d.checked=!0;const v=document.createElement("label");v.htmlFor=`checkbox-${i.nomAPI}`,v.textContent=i.text,u.appendChild(d),u.appendChild(v),n.appendChild(u),d.addEventListener("change",function(){r()})}}),A(),r()}).catch(o=>console.error("Error fetching data:",o));var s=document.getElementsByClassName("close")[0];s.onclick=function(){B(),c.style.display="none"},window.onclick=function(o){o.target==c&&(B(),c.style.display="none")};function r(){const o=n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),a=Array.from(o).every(l=>l.checked);selectAllCheckbox.checked=a}}function B(){const t=document.querySelectorAll('.config-item input[type="checkbox"]'),c=Array.from(t).map(n=>({id:n.id,checked:n.checked}));localStorage.setItem("layerConfig",JSON.stringify(c))}function A(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(L=t,t.forEach(c=>{const n=document.getElementById(c.id);n&&(n.checked=c.checked)}))}function T(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function G(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function W(){O();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const n=t.value;D(n)}),document.getElementById("layerConfig").addEventListener("click",()=>{z()})}window.addEventListener("DOMContentLoaded",W);document.getElementById("layerColor").addEventListener("input",t=>{const c=t.target.value;localStorage.setItem("clickedLayerColor",c),Z(c)});function Z(t){e.getLayer("clicked-layer")&&(e.setPaintProperty("clicked-layer","fill-color",t),e.setPaintProperty("clicked-layer","fill-outline-color",t))}document.getElementById("markerColor").addEventListener("input",t=>{const c=t.target.value;localStorage.setItem("markerColor",c),J(c)});function J(t){if(g){g.setPopup(null);const c=g.getLngLat();g.remove(),g=new maplibregl.Marker({color:t}).setLngLat(c).addTo(e)}}"serviceWorker"in navigator&&window.addEventListener("load",()=>{navigator.serviceWorker.register("/serviceworker.js").then(t=>{console.log("Service Worker registered with scope:",t.scope)},t=>{console.log("Service Worker registration failed:",t)})});window.closePanel=G;window.openPanel=T;window.onBaseChange=j; diff --git a/dist/index.html b/dist/index.html index 62247ec..9046590 100644 --- a/dist/index.html +++ b/dist/index.html @@ -620,7 +620,7 @@ } - + diff --git a/src/main.js b/src/main.js index 427d0e2..e24aa61 100644 --- a/src/main.js +++ b/src/main.js @@ -203,7 +203,7 @@ async function apiConnect(lat, lon, service) { } } if (address) { - contentHtml.innerHTML += `Adreça: ${address.etiqueta} (distància: ${address.distancia} km)
`; + contentHtml.innerHTML += `

${address.etiqueta} (distància: ${address.distancia} km)

`; } if (elevation) { contentHtml.innerHTML += `Coordenades: ${lat.toFixed(4)}, ${lon.toFixed(4)}
`