From 6541858a9aff97d84edce3a724b75d68538558c5 Mon Sep 17 00:00:00 2001 From: Marcrb3 Date: Wed, 3 Jul 2024 09:41:29 +0200 Subject: [PATCH] add loader on init --- dist/assets/index-BKlrZ4Zp.js | 4 --- dist/assets/index-cBqBI-8E.js | 4 +++ dist/index.html | 48 ++++++++++++++++++++++++++++++++++- index.html | 46 +++++++++++++++++++++++++++++++++ src/main.js | 13 ++++++++++ 5 files changed, 110 insertions(+), 5 deletions(-) delete mode 100644 dist/assets/index-BKlrZ4Zp.js create mode 100644 dist/assets/index-cBqBI-8E.js diff --git a/dist/assets/index-BKlrZ4Zp.js b/dist/assets/index-BKlrZ4Zp.js deleted file mode 100644 index f4d2469..0000000 --- a/dist/assets/index-BKlrZ4Zp.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 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(5)}, ${c.toFixed(5)}
`,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/assets/index-cBqBI-8E.js b/dist/assets/index-cBqBI-8E.js new file mode 100644 index 0000000..5b535ce --- /dev/null +++ b/dist/assets/index-cBqBI-8E.js @@ -0,0 +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 i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).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="",M=!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)}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 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(5)}, ${c.toFixed(5)}
`,s.innerHTML+=`Elevació: ${p} metres

`);for(let a=0;a{m=u,C(u,d)}),d.addEventListener("mouseover",()=>{N(u)}),d.addEventListener("mouseout",()=>{H()}),s.appendChild(d),s.appendChild(document.createElement("br"))}i.length>0&&!m?setTimeout(()=>{m=i[0],C(m,s.querySelector(".myButtonClass"))},25):m&&document.querySelectorAll(".myButtonClass").forEach(u=>{u.textContent.includes(m)&&C(m,u)})}I()}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)}):a.type==="MultiPolygon"&&a.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 i=window.innerWidth<750?$:q;r&&e.fitBounds(r,{padding:i})}function O(){R(),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(){w().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,i,l){const a=(i-r)*Math.PI/180,u=(l-o)*Math.PI/180,d=Math.sin(a/2)*Math.sin(a/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 o=r.coords.longitude,i=r.coords.latitude;if(t&&s(t.lat,t.lon,i,o){document.querySelector(".myButtonClass.highlighted-button")&&C(m,document.querySelector(".myButtonClass.highlighted-button"))})):B(l,i,x);const p=localStorage.getItem("markerColor")||"#ff6e42";g?g.setLngLat([i,l]):g=new maplibregl.Marker({color:p}).setLngLat([i,l]).addTo(e)}),z()})}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 I(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function R(){document.getElementById("mapLoader").style.display="flex"}function z(){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"),n=document.getElementById("configListContainer");c.style.display="block",fetch("https://api.icgc.cat/territori/info").then(o=>o.json()).then(o=>{n.innerHTML="";const i=document.createElement("div"),l=document.createElement("input");l.type="checkbox",l.id="selectAllCheckbox";const p=document.createElement("label");i.id="selectDiv",p.id="selectLabel",p.htmlFor="selectAllCheckbox",p.textContent=" Seleccionar tots",i.appendChild(l),i.appendChild(p),n.appendChild(i),l.addEventListener("change",function(){n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)').forEach(u=>{u.checked=l.checked})}),o.forEach(a=>{if(a.nomAPI!=="geocoder"&&a.nomAPI!=="elevacions"){const u=document.createElement("div");u.className="config-item";const d=document.createElement("input");d.type="checkbox",d.id=`${a.nomAPI}`,d.name=a.name,d.checked=!0;const v=document.createElement("label");v.htmlFor=`checkbox-${a.nomAPI}`,v.textContent=a.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(){P(),c.style.display="none"},window.onclick=function(o){o.target==c&&(P(),c.style.display="none")};function r(){const o=n.querySelectorAll('input[type="checkbox"]:not(#selectAllCheckbox)'),i=Array.from(o).every(l=>l.checked);selectAllCheckbox.checked=i}}function P(){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 Z(){var t=document.getElementById("infoPanel");t.classList.remove("open"),t.style.width="0px",document.getElementById("openPanel").style.display="block"}function J(){O();const t=document.getElementById("textSelector");t.addEventListener("change",()=>{const n=t.value;D(n)}),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(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=Z;window.openPanel=T;window.onBaseChange=j; diff --git a/dist/index.html b/dist/index.html index 75efd75..0316bd0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -230,6 +230,42 @@ transform: translate(-50%, -50%); } + .loader2 { + border: 8px solid #f3f3f3; + border-top: 8px solid #272727; + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; + position: absolute; + left: 45%; + top: 45%; + transform: translate(-50%, -50%); + z-index: 9999; + /* Assegura't que el loader estigui a sobre de tot el contingut */ + /* display: none; */ + /* Amaga el loader per defecte */ + } + + .loadercontainer { + position: fixed; + /* Canvia a fixed si necessites que estigui fixe en scroll */ + width: 100vw; + /* Amplada al 100% de la finestra visible */ + height: 100vh; + /* Alçada al 100% de la finestra visible */ + top: 0; + left: 0; + background: rgba(8, 8, 8, 0.5); + /* Ajusta la transparència segons sigui necessari */ + backdrop-filter: blur(5px); + /* Difuminar el fons */ + display: flex; + justify-content: center; + align-items: center; + z-index: 9998; + } + .myButtonClass { background-color: #32522ec9; /* Verd */ @@ -625,13 +661,23 @@ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Afegir ombra */ } + + .loader2 { + width: 80px; + height: 80px; + left: 38%; + top: 39%; + } } - + +
+
+
diff --git a/index.html b/index.html index 3816f27..5721056 100644 --- a/index.html +++ b/index.html @@ -230,6 +230,42 @@ transform: translate(-50%, -50%); } + .loader2 { + border: 8px solid #f3f3f3; + border-top: 8px solid #272727; + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; + position: absolute; + left: 45%; + top: 45%; + transform: translate(-50%, -50%); + z-index: 9999; + /* Assegura't que el loader estigui a sobre de tot el contingut */ + /* display: none; */ + /* Amaga el loader per defecte */ + } + + .loadercontainer { + position: fixed; + /* Canvia a fixed si necessites que estigui fixe en scroll */ + width: 100vw; + /* Amplada al 100% de la finestra visible */ + height: 100vh; + /* Alçada al 100% de la finestra visible */ + top: 0; + left: 0; + background: rgba(8, 8, 8, 0.5); + /* Ajusta la transparència segons sigui necessari */ + backdrop-filter: blur(5px); + /* Difuminar el fons */ + display: flex; + justify-content: center; + align-items: center; + z-index: 9998; + } + .myButtonClass { background-color: #32522ec9; /* Verd */ @@ -625,12 +661,22 @@ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Afegir ombra */ } + + .loader2 { + width: 80px; + height: 80px; + left: 38%; + top: 39%; + } } +
+
+
diff --git a/src/main.js b/src/main.js index ca9d5e5..d216a19 100644 --- a/src/main.js +++ b/src/main.js @@ -344,6 +344,7 @@ function addGeometry(servei, button) { } function initMap() { + showMapLoader(); // Mostra el loader abans d'iniciar el mapa map = new maplibregl.Map({ container: "map", style: @@ -357,6 +358,7 @@ function initMap() { map.on('load', function () { addSources().then(function () { addTerrain(); + }); map.addControl(new maplibregl.NavigationControl(), 'top-right'); @@ -374,6 +376,7 @@ function initMap() { map.addControl(geolocateControl, 'top-right'); + // Funció per calcular la distància entre dues coordenades function getDistanceFromLatLonInMeters(lat1, lon1, lat2, lon2) { const R = 6371e3; // Radi de la Terra en metres @@ -445,6 +448,7 @@ function initMap() { marker1.setLngLat([lon, lat]); } }); + hideMapLoader(); // Amaga el loader quan el mapa ha acabat de carregar }); } @@ -553,6 +557,15 @@ function hideLoader() { document.getElementById("infoPanelContent").style.display = "block"; } +function showMapLoader() { + document.getElementById('mapLoader').style.display = 'flex'; +} + +function hideMapLoader() { + document.getElementById('mapLoader').style.display = 'none'; +} + + // Crear una classe per al control de pitch class PitchControl { onAdd(map) {