From e0dfbec9fca6d341e2567971ff05de3d12ba6abc Mon Sep 17 00:00:00 2001 From: Marcrb3 Date: Fri, 2 Aug 2024 10:55:43 +0200 Subject: [PATCH] add refugisclimatics --- dist/assets/index-CCfNKGSy.js | 4 +++ dist/assets/index-D-Z07tEl.js | 4 --- dist/index.html | 2 +- src/main.js | 66 ++++++++++++++++++++++++++++++++++- 4 files changed, 70 insertions(+), 6 deletions(-) create mode 100644 dist/assets/index-CCfNKGSy.js delete mode 100644 dist/assets/index-D-Z07tEl.js diff --git a/dist/assets/index-CCfNKGSy.js b/dist/assets/index-CCfNKGSy.js new file mode 100644 index 0000000..c8de8a9 --- /dev/null +++ b/dist/assets/index-CCfNKGSy.js @@ -0,0 +1,4 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))s(l);new MutationObserver(l=>{for(const n of l)if(n.type==="childList")for(const i of n.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function r(l){const n={};return l.integrity&&(n.integrity=l.integrity),l.referrerPolicy&&(n.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?n.credentials="include":l.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(l){if(l.ep)return;l.ep=!0;const n=r(l);fetch(l.href,n)}})();var e,x;let A="",F=!0,h,k=null,M,S="#000000";const R={top:60,bottom:window.innerHeight*.5+25,left:60,right:60},G={top:100,bottom:100,left:300,right:50};async function W(){const o=document.getElementById("serveiSelector2").value;let r=null,s=null;if(e.getLayer("clicked-layer")){const n=e.getSource("clicked-layer");n&&n._data&&(r=n._data,e.getLayer("clicked-layer-labels")&&(s=n._data))}let l;o==="orto"?(l="https://geoserveis.icgc.cat/styles/icgc_orto_estandard.json",S="#FFFFFF"):o==="topo"?(l="https://geoserveis.icgc.cat/styles/icgc_mapa_base_topografic.json",S="#000000"):o==="fosc"&&(l="https://geoserveis.icgc.cat/styles/icgc_mapa_base_fosc.json",S="#FFFFFF"),e.setStyle(l),e.once("styledata",()=>{const n=_(e.getStyle().layers),i=localStorage.getItem("clickedLayerColor")||"#f9f91d";r&&(e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:r}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":i,"fill-outline-color":i,"fill-opacity":.5}},n),s&&(e.removeLayer("clicked-layer"),e.getLayer("clicked-layer-labels")||(e.addLayer({id:"clicked-layer",type:"circle",source:"clicked-layer",paint:{"circle-radius":8,"circle-color":i}}),e.addLayer({id:"clicked-layer-labels",type:"symbol",source:"clicked-layer",layout:{"text-field":["get","Codi_ICC"],"text-font":["Arial-Bold"],"text-size":12,"text-offset":[0,1.5],"text-anchor":"top"},paint:{"text-color":S}})))),o==="topo"?e.setSky({"sky-color":"#a5f0f0","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"}):o==="orto"?e.setSky({"sky-color":"#37709e","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"}):o==="fosc"&&e.setSky({"sky-color":"#232423","sky-horizon-blend":.3,"horizon-color":"#969996","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#383838"}),j().then(function(){q()})})}async function j(){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 q(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(t){console.log("ERROR addTerrain"),console.log(t)}}function P(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getLayer("clicked-layer-labels")&&e.removeLayer("clicked-layer-labels"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function Z(t){const o=_(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");for(let r=0;r${a.etiqueta} (distància: ${a.distancia} km)

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

`);for(let c=0;c{k=u,w(u,d)}),d.addEventListener("mouseover",()=>{Z(u)}),d.addEventListener("mouseout",()=>{J()}),s.appendChild(d),s.appendChild(document.createElement("br"))}i.length>0&&!k?setTimeout(()=>{k=i[0],w(k,s.querySelector(".myButtonClass"))},25):k&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(k)&&w(k,u)})}T()}function w(t,o){const r=_(e.getStyle().layers);P();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let l=new maplibregl.LngLatBounds;for(let a=0;a{const g=L.geometry.coordinates;g&&g.length===2&&typeof g[0]=="number"&&typeof g[1]=="number"&&l.extend(g);const C=L.properties;C&&(m.forEach(b=>{if(C[b]!==void 0){const E=document.createElement("div");E.textContent=`${b}: ${C[b]}`,c.appendChild(E)}}),c.appendChild(document.createElement("br")))})}else if(t==="Vèrtex xarxa utilitària"){const v=h[a].features,y={type:"FeatureCollection",features:v};e.addSource("clicked-layer",{type:"geojson",data:y}),e.addLayer({id:"clicked-layer",type:"circle",source:"clicked-layer",paint:{"circle-radius":8,"circle-color":p}}),e.addLayer({id:"clicked-layer-labels",type:"symbol",source:"clicked-layer",layout:{"text-field":["get","Codi_ICC"],"text-font":["Arial-Bold"],"text-size":12,"text-offset":[0,1.5],"text-anchor":"top"},paint:{"text-color":S}});const m=["Codi_ICC","Municipi","distance_km","Enllaç"];v.forEach((L,H)=>{const g=L.geometry.coordinates;g&&g.length===2&&typeof g[0]=="number"&&typeof g[1]=="number"&&l.extend(g);const C=L.properties;C&&(m.forEach(b=>{if(C[b]!==void 0){const E=document.createElement("div");if(b==="Enllaç"){const B=document.createElement("a"),O=C[b];B.href=O,B.textContent="Fitxa ↓",B.target="_blank",B.classList.add("button-link"),E.appendChild(B)}else E.textContent=`${b}: ${C[b]}`;c.appendChild(E)}}),c.appendChild(document.createElement("br")))})}else{const f=h[a].geometry;if(f){e.addSource("clicked-layer",{type:"geojson",data:{type:"Feature",geometry:f,properties:{}}}),e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":p,"fill-outline-color":p,"fill-opacity":.5}},r),f.type==="Polygon"?f.coordinates[0].forEach(y=>{y&&y.length===2&&typeof y[0]=="number"&&typeof y[1]=="number"&&l.extend(y)}):f.type==="MultiPolygon"&&f.coordinates.forEach(y=>{y[0].forEach(m=>{m&&m.length===2&&typeof m[0]=="number"&&typeof m[1]=="number"&&l.extend(m)})});const v=h[a].properties;if(v)for(const[y,m]of Object.entries(v)){const L=document.createElement("div");L.textContent=`${y}: ${m}`,c.appendChild(L)}}}document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("button");d.textContent="×",d.classList.add("closeButtonClass"),d.addEventListener("click",()=>{P(),c.remove(),d.remove(),o.classList.remove("highlighted-button")}),c.appendChild(d),o&&(o.parentNode.insertBefore(c,o.nextSibling),o.parentNode.insertBefore(d,o.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),o.classList.add("highlighted-button")}const i=window.innerWidth<750?R:G;l.isEmpty()||e.fitBounds(l,{padding:i})}function U(){Q(),e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/styles/icgc_mapa_base_topografic.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1,maxPitch:85}),e.on("load",function(){j().then(function(){q()}),e.addControl(new maplibregl.NavigationControl,"top-right"),e.setSky({"sky-color":"#a5f0f0","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"});let t=null;const o=20,r=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(r,"top-right");function s(l,n,i,a){const c=(i-l)*Math.PI/180,u=(a-n)*Math.PI/180,d=Math.sin(c/2)*Math.sin(c/2)+Math.cos(l*Math.PI/180)*Math.cos(i*Math.PI/180)*Math.sin(u/2)*Math.sin(u/2);return 6371e3*(2*Math.atan2(Math.sqrt(d),Math.sqrt(1-d)))}r.on("geolocate",function(l){const n=l.coords.longitude,i=l.coords.latitude;if(t&&s(t.lat,t.lon,i,n){document.querySelector(".myButtonClass.highlighted-button")&&w(k,document.querySelector(".myButtonClass.highlighted-button"))})):z(a,i,A);const p=localStorage.getItem("markerColor")||"#ff6e42";x?x.setLngLat([i,a]):x=new maplibregl.Marker({color:p}).setLngLat([i,a]).addTo(e)}),X()})}function _(t){let o="background";for(var r=0;r${l.features[0].properties.etiqueta}
+ Carrer: ${l.features[0].properties.nom}
+ Municipi: ${l.features[0].properties.municipi}
+ Codi Postal: ${l.features[0].properties.codi_postal}
`).addTo(e)}),e.on("mouseleave","punts2",function(l){e.getCanvas().style.cursor="",s.remove()}))}function V(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function T(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function Q(){document.getElementById("mapLoader").style.display="flex"}function X(){document.getElementById("mapLoader").style.display="none"}class Y{onAdd(o){return this._map=o,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 ee(){var t=document.getElementById("notification");t&&t.classList.remove("show");var o=document.getElementById("myModal"),r=document.getElementById("configListContainer");o.style.display="block",fetch("https://api.icgc.cat/territori/info").then(n=>n.json()).then(n=>{r.innerHTML="";const i=document.createElement("div"),a=document.createElement("input");a.type="checkbox",a.id="selectAllCheckbox";const p=document.createElement("label");i.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",i.appendChild(a),i.appendChild(p),r.appendChild(i),a.addEventListener("change",function(){r.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=a.checked})}),n.forEach(c=>{if(c.nomAPI!=="geocoder"&&c.nomAPI!=="elevacions"&&c.nomAPI!=="h3"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${c.nomAPI}`,d.name=c.name,d.checked=!0;const I=document.createElement("label");I.htmlFor=`checkbox-${c.nomAPI}`,I.textContent=c.text,u.appendChild(d),u.appendChild(I),r.appendChild(u),d.addEventListener("change",function(){l()})}}),N(),l()}).catch(n=>console.error("Error fetching data:",n));var s=document.getElementsByClassName("close")[0];s.onclick=function(){$(),o.style.display="none"},window.onclick=function(n){n.target==o&&($(),o.style.display="none")};function l(){const n=r.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),i=Array.from(n).every(a=>a.checked);selectAllCheckbox.checked=i}}function $(){const t=document.querySelectorAll('.config-item input[type="checkbox"]'),o=Array.from(t).map(r=>({id:r.id,checked:r.checked}));localStorage.setItem("layerConfig",JSON.stringify(o))}function N(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(M=t,t.forEach(o=>{const r=document.getElementById(o.id);r&&(r.checked=o.checked)}))}function D(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function te(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function oe(){U();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const r=t.value;K(r)}),document.getElementById("layerConfig").addEventListener("click",()=>{ee()})}window.addEventListener("DOMContentLoaded",oe);document.getElementById("layerColor").addEventListener("input",t=>{const o=t.target.value;localStorage.setItem("clickedLayerColor",o),ne(o)});function ne(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 o=t.target.value;localStorage.setItem("markerColor",o),re(o)});function re(t){if(x){x.setPopup(null);const o=x.getLngLat();x.remove(),x=new maplibregl.Marker({color:t}).setLngLat(o).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=te;window.openPanel=D;window.onBaseChange=W; diff --git a/dist/assets/index-D-Z07tEl.js b/dist/assets/index-D-Z07tEl.js deleted file mode 100644 index b4550b3..0000000 --- a/dist/assets/index-D-Z07tEl.js +++ /dev/null @@ -1,4 +0,0 @@ -(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))s(l);new MutationObserver(l=>{for(const n of l)if(n.type==="childList")for(const i of n.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function r(l){const n={};return l.integrity&&(n.integrity=l.integrity),l.referrerPolicy&&(n.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?n.credentials="include":l.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(l){if(l.ep)return;l.ep=!0;const n=r(l);fetch(l.href,n)}})();var e,b;let A="",F=!0,h,g=null,B,S="#000000";const D={top:60,bottom:window.innerHeight*.5+25,left:60,right:60},R={top:100,bottom:100,left:300,right:50};async function G(){const o=document.getElementById("serveiSelector2").value;let r=null,s=null;if(e.getLayer("clicked-layer")){const n=e.getSource("clicked-layer");n&&n._data&&(r=n._data,e.getLayer("clicked-layer-labels")&&(s=n._data))}let l;o==="orto"?(l="https://geoserveis.icgc.cat/styles/icgc_orto_estandard.json",S="#FFFFFF"):o==="topo"?(l="https://geoserveis.icgc.cat/styles/icgc_mapa_base_topografic.json",S="#000000"):o==="fosc"&&(l="https://geoserveis.icgc.cat/styles/icgc_mapa_base_fosc.json",S="#FFFFFF"),e.setStyle(l),e.once("styledata",()=>{const n=_(e.getStyle().layers),i=localStorage.getItem("clickedLayerColor")||"#f9f91d";r&&(e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:r}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":i,"fill-outline-color":i,"fill-opacity":.5}},n),s&&(e.removeLayer("clicked-layer"),e.getLayer("clicked-layer-labels")||(e.addLayer({id:"clicked-layer",type:"circle",source:"clicked-layer",paint:{"circle-radius":8,"circle-color":i}}),e.addLayer({id:"clicked-layer-labels",type:"symbol",source:"clicked-layer",layout:{"text-field":["get","Codi_ICC"],"text-font":["Arial-Bold"],"text-size":12,"text-offset":[0,1.5],"text-anchor":"top"},paint:{"text-color":S}})))),o==="topo"?e.setSky({"sky-color":"#a5f0f0","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"}):o==="orto"?e.setSky({"sky-color":"#37709e","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"}):o==="fosc"&&e.setSky({"sky-color":"#232423","sky-horizon-blend":.3,"horizon-color":"#969996","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#383838"}),j().then(function(){q()})})}async function j(){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 q(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(t){console.log("ERROR addTerrain"),console.log(t)}}function P(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getLayer("clicked-layer-labels")&&e.removeLayer("clicked-layer-labels"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function W(t){const o=_(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");for(let r=0;r${a.etiqueta} (distància: ${a.distancia} km)

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

`);for(let c=0;c{g=u,M(u,d)}),d.addEventListener("mouseover",()=>{W(u)}),d.addEventListener("mouseout",()=>{Z()}),s.appendChild(d),s.appendChild(document.createElement("br"))}i.length>0&&!g?setTimeout(()=>{g=i[0],M(g,s.querySelector(".myButtonClass"))},25):g&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(g)&&M(g,u)})}T()}function M(t,o){const r=_(e.getStyle().layers);P();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let l=new maplibregl.LngLatBounds;for(let a=0;a{const C=L.geometry.coordinates;C&&C.length===2&&typeof C[0]=="number"&&typeof C[1]=="number"&&l.extend(C);const I=L.properties;I&&(m.forEach(E=>{if(I[E]!==void 0){const w=document.createElement("div");if(E==="Enllaç"){const x=document.createElement("a"),O=I[E];x.href=O,x.textContent="Fitxa ↓",x.target="_blank",x.classList.add("button-link"),w.appendChild(x)}else w.textContent=`${E}: ${I[E]}`;c.appendChild(w)}}),c.appendChild(document.createElement("br")))})}else{const f=h[a].geometry;if(f){e.addSource("clicked-layer",{type:"geojson",data:{type:"Feature",geometry:f,properties:{}}}),e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":p,"fill-outline-color":p,"fill-opacity":.5}},r),f.type==="Polygon"?f.coordinates[0].forEach(y=>{y&&y.length===2&&typeof y[0]=="number"&&typeof y[1]=="number"&&l.extend(y)}):f.type==="MultiPolygon"&&f.coordinates.forEach(y=>{y[0].forEach(m=>{m&&m.length===2&&typeof m[0]=="number"&&typeof m[1]=="number"&&l.extend(m)})});const k=h[a].properties;if(k)for(const[y,m]of Object.entries(k)){const L=document.createElement("div");L.textContent=`${y}: ${m}`,c.appendChild(L)}}}document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("button");d.textContent="×",d.classList.add("closeButtonClass"),d.addEventListener("click",()=>{P(),c.remove(),d.remove(),o.classList.remove("highlighted-button")}),c.appendChild(d),o&&(o.parentNode.insertBefore(c,o.nextSibling),o.parentNode.insertBefore(d,o.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),o.classList.add("highlighted-button")}const i=window.innerWidth<750?D:R;l.isEmpty()||e.fitBounds(l,{padding:i})}function J(){V(),e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/styles/icgc_mapa_base_topografic.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1,maxPitch:85}),e.on("load",function(){j().then(function(){q()}),e.addControl(new maplibregl.NavigationControl,"top-right"),e.setSky({"sky-color":"#a5f0f0","sky-horizon-blend":.3,"horizon-color":"#e1e3e3","horizon-fog-blend":.9,"fog-ground-blend":.85,"fog-color":"#c5d6d6"});let t=null;const o=20,r=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(r,"top-right");function s(l,n,i,a){const c=(i-l)*Math.PI/180,u=(a-n)*Math.PI/180,d=Math.sin(c/2)*Math.sin(c/2)+Math.cos(l*Math.PI/180)*Math.cos(i*Math.PI/180)*Math.sin(u/2)*Math.sin(u/2);return 6371e3*(2*Math.atan2(Math.sqrt(d),Math.sqrt(1-d)))}r.on("geolocate",function(l){const n=l.coords.longitude,i=l.coords.latitude;if(t&&s(t.lat,t.lon,i,n){document.querySelector(".myButtonClass.highlighted-button")&&M(g,document.querySelector(".myButtonClass.highlighted-button"))})):z(a,i,A);const p=localStorage.getItem("markerColor")||"#ff6e42";b?b.setLngLat([i,a]):b=new maplibregl.Marker({color:p}).setLngLat([i,a]).addTo(e)}),Q()})}function _(t){let o="background";for(var r=0;r${l.features[0].properties.etiqueta}
- Carrer: ${l.features[0].properties.nom}
- Municipi: ${l.features[0].properties.municipi}
- Codi Postal: ${l.features[0].properties.codi_postal}
`).addTo(e)}),e.on("mouseleave","punts2",function(l){e.getCanvas().style.cursor="",s.remove()}))}function K(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function T(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function V(){document.getElementById("mapLoader").style.display="flex"}function Q(){document.getElementById("mapLoader").style.display="none"}class X{onAdd(o){return this._map=o,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 Y(){var t=document.getElementById("notification");t&&t.classList.remove("show");var o=document.getElementById("myModal"),r=document.getElementById("configListContainer");o.style.display="block",fetch("https://api.icgc.cat/territori/info").then(n=>n.json()).then(n=>{r.innerHTML="";const i=document.createElement("div"),a=document.createElement("input");a.type="checkbox",a.id="selectAllCheckbox";const p=document.createElement("label");i.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",i.appendChild(a),i.appendChild(p),r.appendChild(i),a.addEventListener("change",function(){r.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=a.checked})}),n.forEach(c=>{if(c.nomAPI!=="geocoder"&&c.nomAPI!=="elevacions"&&c.nomAPI!=="h3"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${c.nomAPI}`,d.name=c.name,d.checked=!0;const v=document.createElement("label");v.htmlFor=`checkbox-${c.nomAPI}`,v.textContent=c.text,u.appendChild(d),u.appendChild(v),r.appendChild(u),d.addEventListener("change",function(){l()})}}),N(),l()}).catch(n=>console.error("Error fetching data:",n));var s=document.getElementsByClassName("close")[0];s.onclick=function(){$(),o.style.display="none"},window.onclick=function(n){n.target==o&&($(),o.style.display="none")};function l(){const n=r.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),i=Array.from(n).every(a=>a.checked);selectAllCheckbox.checked=i}}function $(){const t=document.querySelectorAll('.config-item input[type="checkbox"]'),o=Array.from(t).map(r=>({id:r.id,checked:r.checked}));localStorage.setItem("layerConfig",JSON.stringify(o))}function N(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(B=t,t.forEach(o=>{const r=document.getElementById(o.id);r&&(r.checked=o.checked)}))}function H(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function ee(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function te(){J();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const r=t.value;U(r)}),document.getElementById("layerConfig").addEventListener("click",()=>{Y()})}window.addEventListener("DOMContentLoaded",te);document.getElementById("layerColor").addEventListener("input",t=>{const o=t.target.value;localStorage.setItem("clickedLayerColor",o),oe(o)});function oe(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 o=t.target.value;localStorage.setItem("markerColor",o),ne(o)});function ne(t){if(b){b.setPopup(null);const o=b.getLngLat();b.remove(),b=new maplibregl.Marker({color:t}).setLngLat(o).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=ee;window.openPanel=H;window.onBaseChange=G; diff --git a/dist/index.html b/dist/index.html index 7185d6e..04b6b53 100644 --- a/dist/index.html +++ b/dist/index.html @@ -695,7 +695,7 @@ } - + diff --git a/src/main.js b/src/main.js index bf0cbd2..d5ebc17 100644 --- a/src/main.js +++ b/src/main.js @@ -358,8 +358,72 @@ function addGeometry(servei, button) { const propertiesDiv = document.createElement('div'); propertiesDiv.classList.add('layer-properties'); + + if (servei === 'Refugis climàtics') { + const geometry = copia[i]; + const features = geometry.features; + + const sourceData = { + type: 'FeatureCollection', + features: features + }; + + map.addSource('clicked-layer', { + type: 'geojson', + data: sourceData + }); + + map.addLayer({ + id: 'clicked-layer', + type: 'circle', + source: 'clicked-layer', + paint: { + 'circle-radius': 8, + 'circle-color': savedColor + } + }); + // Afegir capa d'etiquetes + map.addLayer({ + id: 'clicked-layer-labels', + type: 'symbol', + source: 'clicked-layer', + layout: { + 'text-field': ['get', 'nom'], + 'text-font': ['Arial-Bold'], + 'text-size': 12, + 'text-offset': [0, 1.5], + 'text-anchor': 'top' + }, + paint: { + 'text-color': textColor + } + }); + + const propertiesToShow = ['nom', 'municipi', 'distance_km']; + + features.forEach((feature, index) => { + const coordinates = feature.geometry.coordinates; + if (coordinates && coordinates.length === 2 && typeof coordinates[0] === 'number' && typeof coordinates[1] === 'number') { // Assegura't que les coordenades són vàlides + bbox.extend(coordinates); + } + + const featureProps = feature.properties; + if (featureProps) { + propertiesToShow.forEach(key => { + if (featureProps[key] !== undefined) { + const propertyLine = document.createElement('div'); + + propertyLine.textContent = `${key}: ${featureProps[key]}`; + + propertiesDiv.appendChild(propertyLine); + } + }); + propertiesDiv.appendChild(document.createElement('br')); + } + }); + } // Afegeix suport per als punts del servei 'Vèrtex xarxa utilitària' - if (servei === 'Vèrtex xarxa utilitària') { + else if (servei === 'Vèrtex xarxa utilitària') { const geometry = copia[i]; const features = geometry.features;