From 480af8e6278a008e937b0c8a95dfc098c060ef29 Mon Sep 17 00:00:00 2001 From: Marcrb3 Date: Tue, 9 Jul 2024 09:00:45 +0200 Subject: [PATCH] update onBaseChange --- dist/assets/index-BYSxQjd6.js | 4 -- dist/assets/index-Dthulcrm.js | 4 ++ dist/index.html | 20 +++++- index.html | 18 +++++- src/main.js | 115 ++++++++++++++++++++++++++++++---- 5 files changed, 142 insertions(+), 19 deletions(-) delete mode 100644 dist/assets/index-BYSxQjd6.js create mode 100644 dist/assets/index-Dthulcrm.js diff --git a/dist/assets/index-BYSxQjd6.js b/dist/assets/index-BYSxQjd6.js deleted file mode 100644 index 374155d..0000000 --- a/dist/assets/index-BYSxQjd6.js +++ /dev/null @@ -1,4 +0,0 @@ -(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 n of r)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 o(r){const n={};return r.integrity&&(n.integrity=r.integrity),r.referrerPolicy&&(n.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?n.credentials="include":r.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(r){if(r.ep)return;r.ep=!0;const n=o(r);fetch(r.href,n)}})();var e,m;let x="",M=!0,g,y=null,b;const T={top:5,bottom:window.innerHeight*.5},$={top:100,bottom:100,left:300,right:50};async function q(){const t=S(e.getStyle().layers),o=document.getElementById("serveiSelector2").value;let s=null;if(e.getLayer("clicked-layer")){const n=e.getSource("clicked-layer");n&&n._data&&(s=n._data)}let r;o==="orto"?r="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":o==="topo"?r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":o==="fosc"&&(r="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(r),e.once("styledata",()=>{if(s){const n=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":n,"fill-outline-color":n,"fill-opacity":.5}},t)}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"}),w().then(function(){_()})})}async function w(){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 C(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function j(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 o=0;o${a.etiqueta} (distància: ${a.distancia} km)

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

`);for(let l=0;l{y=u,k(u,d)}),d.addEventListener("mouseover",()=>{j(u)}),d.addEventListener("mouseout",()=>{N()}),s.appendChild(d),s.appendChild(document.createElement("br"))}i.length>0&&!y?setTimeout(()=>{y=i[0],k(y,s.querySelector(".myButtonClass"))},25):y&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(y)&&k(y,u)})}B()}function k(t,c){const o=S(e.getStyle().layers);C();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let r=new maplibregl.LngLatBounds;for(let a=0;a{r.extend(f)}):l.type==="MultiPolygon"&&l.coordinates.forEach(f=>{f[0].forEach(L=>{r.extend(L)})})),document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("div");d.classList.add("layer-properties");const v=g[a].properties;for(const[f,L]of Object.entries(v)){const E=document.createElement("div");E.textContent=`${f}: ${L}`,d.appendChild(E)}const h=document.createElement("button");h.textContent="×",h.classList.add("closeButtonClass"),h.addEventListener("click",()=>{C(),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 i=window.innerWidth<750?T:$;r&&e.fitBounds(r,{padding:i})}function H(){F(),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,maxPitch:85}),e.on("load",function(){w().then(function(){_()}),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 c=20,o=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(o,"top-right");function s(r,n,i,a){const l=(i-r)*Math.PI/180,u=(a-n)*Math.PI/180,d=Math.sin(l/2)*Math.sin(l/2)+Math.cos(r*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)))}o.on("geolocate",function(r){const n=r.coords.longitude,i=r.coords.latitude;if(t&&s(t.lat,t.lon,i,n){document.querySelector(".myButtonClass.highlighted-button")&&k(y,document.querySelector(".myButtonClass.highlighted-button"))})):P(a,i,x);const p=localStorage.getItem("markerColor")||"#ff6e42";m?m.setLngLat([i,a]):m=new maplibregl.Marker({color:p}).setLngLat([i,a]).addTo(e)}),R()})}function S(t){let c="background";for(var o=0;o${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 D(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function B(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function F(){document.getElementById("mapLoader").style.display="flex"}function R(){document.getElementById("mapLoader").style.display="none"}class G{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 W(){var t=document.getElementById("notification");t&&t.classList.remove("show");var c=document.getElementById("myModal"),o=document.getElementById("configListContainer");c.style.display="block",fetch("https://api.icgc.cat/territori/info").then(n=>n.json()).then(n=>{o.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),o.appendChild(i),a.addEventListener("change",function(){o.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=a.checked})}),n.forEach(l=>{if(l.nomAPI!=="geocoder"&&l.nomAPI!=="elevacions"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${l.nomAPI}`,d.name=l.name,d.checked=!0;const v=document.createElement("label");v.htmlFor=`checkbox-${l.nomAPI}`,v.textContent=l.text,u.appendChild(d),u.appendChild(v),o.appendChild(u),d.addEventListener("change",function(){r()})}}),A(),r()}).catch(n=>console.error("Error fetching data:",n));var s=document.getElementsByClassName("close")[0];s.onclick=function(){I(),c.style.display="none"},window.onclick=function(n){n.target==c&&(I(),c.style.display="none")};function r(){const n=o.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),i=Array.from(n).every(a=>a.checked);selectAllCheckbox.checked=i}}function I(){const t=document.querySelectorAll('.config-item input[type="checkbox"]'),c=Array.from(t).map(o=>({id:o.id,checked:o.checked}));localStorage.setItem("layerConfig",JSON.stringify(c))}function A(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(b=t,t.forEach(c=>{const o=document.getElementById(c.id);o&&(o.checked=c.checked)}))}function z(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function Z(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function J(){H();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const o=t.value;O(o)}),document.getElementById("layerConfig").addEventListener("click",()=>{W()})}window.addEventListener("DOMContentLoaded",J);document.getElementById("layerColor").addEventListener("input",t=>{const c=t.target.value;localStorage.setItem("clickedLayerColor",c),U(c)});function U(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),K(c)});function K(t){if(m){m.setPopup(null);const c=m.getLngLat();m.remove(),m=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=Z;window.openPanel=z;window.onBaseChange=q; diff --git a/dist/assets/index-Dthulcrm.js b/dist/assets/index-Dthulcrm.js new file mode 100644 index 0000000..d4974cd --- /dev/null +++ b/dist/assets/index-Dthulcrm.js @@ -0,0 +1,4 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const c of r)if(c.type==="childList")for(const i of c.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function n(r){const c={};return r.integrity&&(c.integrity=r.integrity),r.referrerPolicy&&(c.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?c.credentials="include":r.crossOrigin==="anonymous"?c.credentials="omit":c.credentials="same-origin",c}function s(r){if(r.ep)return;r.ep=!0;const c=n(r);fetch(r.href,c)}})();var e,m;let x="",M=!0,g,y=null,b;const T={top:5,bottom:window.innerHeight*.5},$={top:100,bottom:100,left:300,right:50};async function q(){const o=document.getElementById("serveiSelector2").value;let n=null;if(e.getLayer("clicked-layer")){const r=e.getSource("clicked-layer");r&&r._data&&(n=r._data)}let s;o==="orto"?s="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":o==="topo"?s="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":o==="fosc"&&(s="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(s),e.once("styledata",()=>{const r=S(e.getStyle().layers),c=localStorage.getItem("clickedLayerColor")||"#f9f91d";n&&(e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:n}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":c,"fill-outline-color":c,"fill-opacity":.5}},r)),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"}),w().then(function(){_()})})}async function w(){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 C(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function j(t){const o=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${a.etiqueta} (distància: ${a.distancia} km)

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

`);for(let l=0;l{y=u,k(u,d)}),d.addEventListener("mouseover",()=>{j(u)}),d.addEventListener("mouseout",()=>{N()}),s.appendChild(d),s.appendChild(document.createElement("br"))}i.length>0&&!y?setTimeout(()=>{y=i[0],k(y,s.querySelector(".myButtonClass"))},25):y&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(y)&&k(y,u)})}B()}function k(t,o){const n=S(e.getStyle().layers);C();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let r=new maplibregl.LngLatBounds;for(let a=0;a{r.extend(f)}):l.type==="MultiPolygon"&&l.coordinates.forEach(f=>{f[0].forEach(L=>{r.extend(L)})})),document.querySelectorAll(".layer-properties").forEach(f=>f.remove());const d=document.createElement("div");d.classList.add("layer-properties");const v=g[a].properties;for(const[f,L]of Object.entries(v)){const E=document.createElement("div");E.textContent=`${f}: ${L}`,d.appendChild(E)}const h=document.createElement("button");h.textContent="×",h.classList.add("closeButtonClass"),h.addEventListener("click",()=>{C(),d.remove(),h.remove(),o.classList.remove("highlighted-button")}),d.appendChild(h),o&&(o.parentNode.insertBefore(d,o.nextSibling),o.parentNode.insertBefore(h,o.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),o.classList.add("highlighted-button")}const i=window.innerWidth<750?T:$;r&&e.fitBounds(r,{padding:i})}function H(){F(),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,maxPitch:85}),e.on("load",function(){w().then(function(){_()}),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,n=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(n,"top-right");function s(r,c,i,a){const l=(i-r)*Math.PI/180,u=(a-c)*Math.PI/180,d=Math.sin(l/2)*Math.sin(l/2)+Math.cos(r*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)))}n.on("geolocate",function(r){const c=r.coords.longitude,i=r.coords.latitude;if(t&&s(t.lat,t.lon,i,c){document.querySelector(".myButtonClass.highlighted-button")&&k(y,document.querySelector(".myButtonClass.highlighted-button"))})):P(a,i,x);const p=localStorage.getItem("markerColor")||"#ff6e42";m?m.setLngLat([i,a]):m=new maplibregl.Marker({color:p}).setLngLat([i,a]).addTo(e)}),R()})}function S(t){let o="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 D(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function B(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function F(){document.getElementById("mapLoader").style.display="flex"}function R(){document.getElementById("mapLoader").style.display="none"}class G{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 W(){var t=document.getElementById("notification");t&&t.classList.remove("show");var o=document.getElementById("myModal"),n=document.getElementById("configListContainer");o.style.display="block",fetch("https://api.icgc.cat/territori/info").then(c=>c.json()).then(c=>{n.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),n.appendChild(i),a.addEventListener("change",function(){n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=a.checked})}),c.forEach(l=>{if(l.nomAPI!=="geocoder"&&l.nomAPI!=="elevacions"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${l.nomAPI}`,d.name=l.name,d.checked=!0;const v=document.createElement("label");v.htmlFor=`checkbox-${l.nomAPI}`,v.textContent=l.text,u.appendChild(d),u.appendChild(v),n.appendChild(u),d.addEventListener("change",function(){r()})}}),A(),r()}).catch(c=>console.error("Error fetching data:",c));var s=document.getElementsByClassName("close")[0];s.onclick=function(){I(),o.style.display="none"},window.onclick=function(c){c.target==o&&(I(),o.style.display="none")};function r(){const c=n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),i=Array.from(c).every(a=>a.checked);selectAllCheckbox.checked=i}}function I(){const t=document.querySelectorAll('.config-item input[type="checkbox"]'),o=Array.from(t).map(n=>({id:n.id,checked:n.checked}));localStorage.setItem("layerConfig",JSON.stringify(o))}function A(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(b=t,t.forEach(o=>{const n=document.getElementById(o.id);n&&(n.checked=o.checked)}))}function z(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function Z(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function J(){H();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const n=t.value;O(n)}),document.getElementById("layerConfig").addEventListener("click",()=>{W()})}window.addEventListener("DOMContentLoaded",J);document.getElementById("layerColor").addEventListener("input",t=>{const o=t.target.value;localStorage.setItem("clickedLayerColor",o),U(o)});function U(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),K(o)});function K(t){if(m){m.setPopup(null);const o=m.getLngLat();m.remove(),m=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=Z;window.openPanel=z;window.onBaseChange=q; diff --git a/dist/index.html b/dist/index.html index bebd46d..738b78d 100644 --- a/dist/index.html +++ b/dist/index.html @@ -673,7 +673,7 @@ } - + @@ -705,13 +705,29 @@
- + + × + + +
Clica sobre el mapa per visualitzar informació geogràfica
+
diff --git a/index.html b/index.html index 211beed..a949744 100644 --- a/index.html +++ b/index.html @@ -704,13 +704,29 @@
- + + × + + +
Clica sobre el mapa per visualitzar informació geogràfica
+
diff --git a/src/main.js b/src/main.js index 2dd8f92..2c5ecc5 100644 --- a/src/main.js +++ b/src/main.js @@ -11,7 +11,6 @@ const smallScreenPadding = { top: 5, bottom: window.innerHeight * 0.5 }; const largeScreenPadding = { top: 100, bottom: 100, left: 300, right: 50 }; export async function onBaseChange() { - const layerSymbol = getFirstSymbolLayerId(map.getStyle().layers); const serveiSelector2 = document.getElementById("serveiSelector2"); const base = serveiSelector2.value; @@ -20,7 +19,7 @@ export async function onBaseChange() { if (map.getLayer('clicked-layer')) { const source = map.getSource('clicked-layer'); if (source && source._data) { - clickedLayerData = source._data; + clickedLayerData = source._data; // Guardar les dades } } @@ -36,11 +35,13 @@ export async function onBaseChange() { // Canviar l'estil del mapa map.setStyle(styleUrl); - // Esperar a que el nou estil es carregui completament map.once('styledata', () => { + const layerSymbol = getFirstSymbolLayerId(map.getStyle().layers); + const savedColor = localStorage.getItem('clickedLayerColor') || '#f9f91d'; + + // Reafegir la capa 'clicked-layer' si hi havia dades guardades if (clickedLayerData) { - const savedColor = localStorage.getItem('clickedLayerColor') || '#f9f91d'; // Afegeix la font amb les dades guardades if (!map.getSource('clicked-layer')) { map.addSource('clicked-layer', { @@ -63,9 +64,9 @@ export async function onBaseChange() { }, }, layerSymbol); } - } - //Topogràfic + + // Configuració del cel segons el mapa base seleccionat if (base === 'topo') { map.setSky({ 'sky-color': '#a5f0f0', @@ -75,9 +76,7 @@ export async function onBaseChange() { 'fog-ground-blend': 0.85, 'fog-color': '#c5d6d6' }); - } - //Ortofoto - else if (base === 'orto') { + } else if (base === 'orto') { map.setSky({ 'sky-color': '#37709e', 'sky-horizon-blend': 0.3, @@ -86,9 +85,7 @@ export async function onBaseChange() { 'fog-ground-blend': 0.85, 'fog-color': '#c5d6d6' }); - } - //Mapa fosc - else if (base === 'fosc') { + } else if (base === 'fosc') { map.setSky({ 'sky-color': '#232423', 'sky-horizon-blend': 0.3, @@ -98,12 +95,65 @@ export async function onBaseChange() { 'fog-color': '#383838' }); } + + // Afegir fonts i terreny addSources().then(function () { addTerrain(); }); }); } + + +//test +/* function showMapView() { + const tableView = document.getElementById('tableView'); + const mapView = document.getElementById('mapView'); + + tableView.style.display = 'none'; + mapView.style.display = 'block'; +} + +function showTableView() { + const tableView = document.getElementById('tableView'); + const mapView = document.getElementById('mapView'); + + tableView.style.display = 'block'; + mapView.style.display = 'none'; + + generateTable(); +} + +// Funció per generar la taula amb els noms dels serveis +function generateTable() { + const tableBody = document.getElementById('servicesTable').getElementsByTagName('tbody')[0]; + tableBody.innerHTML = ''; // Netejar el contingut existent de la taula + + if (copia && copia.length > 0) { + copia.forEach(feature => { + const servei = feature.id; + const row = document.createElement('tr'); + const cell = document.createElement('td'); + cell.textContent = servei; + row.appendChild(cell); + tableBody.appendChild(row); + }); + } else { + const row = document.createElement('tr'); + const cell = document.createElement('td'); + cell.textContent = 'No hi ha dades disponibles.'; + row.appendChild(cell); + tableBody.appendChild(row); + } +} + + +// Vincular les funcions amb els botons un cop la pàgina s'ha carregat +window.onload = function () { + document.getElementById("showMapViewButton").onclick = showMapView; + document.getElementById("showTableViewButton").onclick = showTableView; +}; + */ async function addSources() { if (!map.getSource("terrainMapZen")) { map.addSource("terrainMapZen", { @@ -287,6 +337,42 @@ async function apiConnect(lat, lon, service) { hideLoader(); } +// Nova funció per actualitzar la taula sense modificar la geometria + +/* async function apiConnectForTable(lat, lon, service) { + openPanel(); + showLoader(); + if (settings) { + for (let i = 0; i < settings.length; i++) { + const { id, checked } = settings[i]; + + if (checked === true) { + if (service !== '') { + service += ','; + } + service += id; + } else { + allChecked = false; + } + } + service += ',geocoder,elevacions' + } + if (allChecked) { + service = 'all'; + } + + // Crida a l'API per obtenir les dades (ajusta segons el teu cas) + const response = await fetch(`https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`); + const dades = await response.json(); + + if (dades.responses) { + copia = dades.responses.features; + generateTable(); // Actualitzar la taula + } + hideLoader(); + +} */ + function addGeometry(servei, button) { const layerSymbol = getFirstSymbolLayerId(map.getStyle().layers); removeGeometry(); // Elimina la geometria anterior abans d'afegir la nova @@ -471,6 +557,10 @@ function initMap() { } let lon = e.lngLat.lng; let lat = e.lngLat.lat; + /* if (document.getElementById('tableView').style.display === 'block') { + apiConnectForTable(lat, lon, service); // Actualitzar la taula si la vista de taula està activa + } + else { */ if (selectedService && lat && lon) { removeGeometry(); // Elimina la geometria abans de cridar a apiConnect apiConnect(lat, lon, service).then(() => { @@ -481,6 +571,7 @@ function initMap() { } else { apiConnect(lat, lon, service); } + /* } */ const savedMarkerColor = localStorage.getItem('markerColor') || '#ff6e42'; if (!marker1) { marker1 = new maplibregl.Marker({ color: savedMarkerColor })