From 08d46c5180f701f9f45a69485778d304b61da5bd Mon Sep 17 00:00:00 2001 From: Marcrb3 Date: Thu, 11 Jul 2024 12:32:40 +0200 Subject: [PATCH] mgp --- dist/assets/index-DocyZ-tb.js | 4 ++ dist/assets/index-yJI4E8gX.js | 4 -- dist/index.html | 2 +- src/main.js | 97 ++++++++++++++--------------------- 4 files changed, 44 insertions(+), 63 deletions(-) create mode 100644 dist/assets/index-DocyZ-tb.js delete mode 100644 dist/assets/index-yJI4E8gX.js diff --git a/dist/assets/index-DocyZ-tb.js b/dist/assets/index-DocyZ-tb.js new file mode 100644 index 0000000..2792626 --- /dev/null +++ b/dist/assets/index-DocyZ-tb.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 c of n.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&s(c)}).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,M,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/contextmaps/icgc_orto_estandard.json",S="#FFFFFF"):o==="topo"?(l="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json",S="#000000"):o==="fosc"&&(l="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",S="#FFFFFF"),e.setStyle(l),e.once("styledata",()=>{const n=_(e.getStyle().layers),c=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":c,"fill-outline-color":c,"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":c}}),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 i=0;i{g=u,B(u,d)}),d.addEventListener("mouseover",()=>{W(u)}),d.addEventListener("mouseout",()=>{Z()}),s.appendChild(d),s.appendChild(document.createElement("br"))}c.length>0&&!g?setTimeout(()=>{g=c[0],B(g,s.querySelector(".myButtonClass"))},25):g&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(g)&&B(g,u)})}T()}function B(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(x=>{if(I[x]!==void 0){const w=document.createElement("div");if(x==="Enllaç"){const E=document.createElement("a"),O=I[x];E.href=O,E.textContent="Fitxa ↓",E.target="_blank",E.classList.add("button-link"),w.appendChild(E)}else w.textContent=`${x}: ${I[x]}`;i.appendChild(w)}}),i.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}`,i.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(),i.remove(),d.remove(),o.classList.remove("highlighted-button")}),i.appendChild(d),o&&(o.parentNode.insertBefore(i,o.nextSibling),o.parentNode.insertBefore(d,o.nextSibling)),document.querySelectorAll(".myButtonClass").forEach(f=>f.classList.remove("highlighted-button")),o.classList.add("highlighted-button")}const c=window.innerWidth<750?D:R;l.isEmpty()||e.fitBounds(l,{padding:c})}function J(){V(),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(){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,c,a){const i=(c-l)*Math.PI/180,u=(a-n)*Math.PI/180,d=Math.sin(i/2)*Math.sin(i/2)+Math.cos(l*Math.PI/180)*Math.cos(c*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,c=l.coords.latitude;if(t&&s(t.lat,t.lon,c,n){document.querySelector(".myButtonClass.highlighted-button")&&B(g,document.querySelector(".myButtonClass.highlighted-button"))})):z(a,c,A);const p=localStorage.getItem("markerColor")||"#ff6e42";b?b.setLngLat([c,a]):b=new maplibregl.Marker({color:p}).setLngLat([c,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 c=document.createElement("div"),a=document.createElement("input");a.type="checkbox",a.id="selectAllCheckbox";const p=document.createElement("label");c.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",c.appendChild(a),c.appendChild(p),r.appendChild(c),a.addEventListener("change",function(){r.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=a.checked})}),n.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),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)'),c=Array.from(n).every(a=>a.checked);selectAllCheckbox.checked=c}}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 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/assets/index-yJI4E8gX.js b/dist/assets/index-yJI4E8gX.js deleted file mode 100644 index 77d1436..0000000 --- a/dist/assets/index-yJI4E8gX.js +++ /dev/null @@ -1,4 +0,0 @@ -(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 l of r)if(l.type==="childList")for(const a of l.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function n(r){const l={};return r.integrity&&(l.integrity=r.integrity),r.referrerPolicy&&(l.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?l.credentials="include":r.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function s(r){if(r.ep)return;r.ep=!0;const l=n(r);fetch(r.href,l)}})();var e,b;let _="",A=!0,h,g=null,M;const O={top:60,bottom:window.innerHeight*.5+25,left:60,right:60},D={top:100,bottom:100,left:300,right:50};async function R(){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=P(e.getStyle().layers),l=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":l,"fill-outline-color":l,"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"}),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 w(){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 G(t){const o=P(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");for(let n=0;n${i.etiqueta} (distància: ${i.distancia} km)

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

`);for(let c=0;c{g=u,I(u,d)}),d.addEventListener("mouseover",()=>{G(u)}),d.addEventListener("mouseout",()=>{W()}),s.appendChild(d),s.appendChild(document.createElement("br"))}a.length>0&&!g?setTimeout(()=>{g=a[0],I(g,s.querySelector(".myButtonClass"))},25):g&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(g)&&I(g,u)})}T()}function I(t,o){const n=P(e.getStyle().layers);w();const s=document.querySelector(".closeButtonClass");s&&s.parentNode.removeChild(s);let r=new maplibregl.LngLatBounds;for(let i=0;i{const C=L.geometry.coordinates;C&&C.length===2&&typeof C[0]=="number"&&typeof C[1]=="number"&&r.extend(C);const x=L.properties;x&&(m.forEach(E=>{if(x[E]!==void 0){const B=document.createElement("div");if(E==="Enllaç"){const S=document.createElement("a"),H=x[E];S.href=H,S.textContent="Fitxa ↓",S.target="_blank",S.classList.add("button-link"),B.appendChild(S)}else B.textContent=`${E}: ${x[E]}`;c.appendChild(B)}}),c.appendChild(document.createElement("br")))})}else{const f=h[i].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}},n),f.type==="Polygon"?f.coordinates[0].forEach(y=>{y&&y.length===2&&typeof y[0]=="number"&&typeof y[1]=="number"&&r.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"&&r.extend(m)})});const k=h[i].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",()=>{w(),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 a=window.innerWidth<750?O:D;r.isEmpty()||e.fitBounds(r,{padding:a})}function Z(){K(),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(){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,n=new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0});e.addControl(n,"top-right");function s(r,l,a,i){const c=(a-r)*Math.PI/180,u=(i-l)*Math.PI/180,d=Math.sin(c/2)*Math.sin(c/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 l=r.coords.longitude,a=r.coords.latitude;if(t&&s(t.lat,t.lon,a,l){document.querySelector(".myButtonClass.highlighted-button")&&I(g,document.querySelector(".myButtonClass.highlighted-button"))})):z(i,a,_);const p=localStorage.getItem("markerColor")||"#ff6e42";b?b.setLngLat([a,i]):b=new maplibregl.Marker({color:p}).setLngLat([a,i]).addTo(e)}),V()})}function P(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 U(){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 K(){document.getElementById("mapLoader").style.display="flex"}function V(){document.getElementById("mapLoader").style.display="none"}class Q{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 X(){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(l=>l.json()).then(l=>{n.innerHTML="";const a=document.createElement("div"),i=document.createElement("input");i.type="checkbox",i.id="selectAllCheckbox";const p=document.createElement("label");a.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",a.appendChild(i),a.appendChild(p),n.appendChild(a),i.addEventListener("change",function(){n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=i.checked})}),l.forEach(c=>{if(c.nomAPI!=="geocoder"&&c.nomAPI!=="elevacions"){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),n.appendChild(u),d.addEventListener("change",function(){r()})}}),N(),r()}).catch(l=>console.error("Error fetching data:",l));var s=document.getElementsByClassName("close")[0];s.onclick=function(){$(),o.style.display="none"},window.onclick=function(l){l.target==o&&($(),o.style.display="none")};function r(){const l=n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),a=Array.from(l).every(i=>i.checked);selectAllCheckbox.checked=a}}function $(){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 N(){const t=JSON.parse(localStorage.getItem("layerConfig"));t&&(M=t,t.forEach(o=>{const n=document.getElementById(o.id);n&&(n.checked=o.checked)}))}function F(){var t=document.getElementById("infoPanel");t.classList.add("open"),t.style.width="300px",document.getElementById("openPanel").style.display="none"}function Y(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function ee(){Z();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const n=t.value;J(n)}),document.getElementById("layerConfig").addEventListener("click",()=>{X()})}window.addEventListener("DOMContentLoaded",ee);document.getElementById("layerColor").addEventListener("input",t=>{const o=t.target.value;localStorage.setItem("clickedLayerColor",o),te(o)});function te(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),oe(o)});function oe(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=Y;window.openPanel=F;window.onBaseChange=R; diff --git a/dist/index.html b/dist/index.html index 09923d0..4f11cfc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -695,7 +695,7 @@ } - + diff --git a/src/main.js b/src/main.js index 244a211..c228208 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,7 @@ let allChecked = true; let copia; let selectedService = null; // Definim selectedService globalment let settings; +let textColor = '#000000'; // Color de text per defecte // Defineix els valors de padding per a les diferents amplades de pantalla const smallScreenPadding = { top: 60, bottom: (window.innerHeight * 0.5) + 25, left: 60, right: 60 }; @@ -16,20 +17,27 @@ export async function onBaseChange() { // Guardar les dades de la capa 'clicked-layer' si existeix let clickedLayerData = null; + let clickedLabel = null; if (map.getLayer('clicked-layer')) { const source = map.getSource('clicked-layer'); if (source && source._data) { clickedLayerData = source._data; // Guardar les dades + if (map.getLayer('clicked-layer-labels')) { + clickedLabel = source._data; + } } } let styleUrl; if (base === 'orto') { styleUrl = "https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json"; + textColor = '#FFFFFF'; // Color de text per a ortofoto } else if (base === 'topo') { styleUrl = "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json"; + textColor = '#000000'; } else if (base === 'fosc') { styleUrl = "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"; + textColor = '#FFFFFF'; // Color de text per a ortofoto } // Canviar l'estil del mapa @@ -64,6 +72,36 @@ export async function onBaseChange() { }, }, layerSymbol); } + if (clickedLabel) { + map.removeLayer('clicked-layer'); + if (!map.getLayer('clicked-layer-labels')) { + 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', 'Codi_ICC'], + 'text-font': ['Arial-Bold'], + 'text-size': 12, + 'text-offset': [0, 1.5], + 'text-anchor': 'top' + }, + paint: { + 'text-color': textColor + } + }); + } + } } // Configuració del cel segons el mapa base seleccionat @@ -103,57 +141,6 @@ export async function onBaseChange() { }); } - - -//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", { @@ -395,15 +382,9 @@ function addGeometry(servei, button) { 'text-anchor': 'top' }, paint: { - 'text-color': '#000000' + 'text-color': textColor } }); - // Comprovar si la capa d'etiquetes s'ha afegit correctament - if (map.getLayer('clicked-layer-labels')) { - console.log("Capa 'clicked-layer-labels' afegida correctament."); - } else { - console.error("Error afegint la capa 'clicked-layer-labels'."); - } const propertiesToShow = ['Codi_ICC', 'Municipi', 'distance_km', 'Enllaç'];