From 2875d0a4937e381a34922b18c01cea0f8bfb55b9 Mon Sep 17 00:00:00 2001 From: Marcrb3 Date: Wed, 12 Jun 2024 08:55:19 +0200 Subject: [PATCH] add highlight layer --- dist/assets/index-BnmAQ7sH.js | 4 -- dist/assets/index-Dw4IcGL0.js | 4 ++ dist/index.html | 7 ++- index.html | 5 +- src/main.js | 113 ++++++++++++++++++++++------------ 5 files changed, 86 insertions(+), 47 deletions(-) delete mode 100644 dist/assets/index-BnmAQ7sH.js create mode 100644 dist/assets/index-Dw4IcGL0.js diff --git a/dist/assets/index-BnmAQ7sH.js b/dist/assets/index-BnmAQ7sH.js deleted file mode 100644 index a8b5a5d..0000000 --- a/dist/assets/index-BnmAQ7sH.js +++ /dev/null @@ -1,4 +0,0 @@ -(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))i(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const c of n.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&i(c)}).observe(document,{childList:!0,subtree:!0});function r(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function i(t){if(t.ep)return;t.ep=!0;const n=r(t);fetch(t.href,n)}})();var e,g;let E="all",m;const k={top:5,bottom:window.innerHeight*.5},w=150;async function B(){const o=C(e.getStyle().layers),r=document.getElementById("serveiSelector2").value;let i=null;if(e.getLayer("clicked-layer")){const n=e.getSource("clicked-layer");n&&n._data&&(i=n._data)}let t;r==="orto"?t="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":r==="topo"?t="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":r==="fosc"&&(t="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(t),e.once("styledata",()=>{i&&(e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:i}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":"#f9f91d","fill-outline-color":"#f9f91d","fill-opacity":.5}},o)),b().then(function(){L()})})}async function b(){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 L(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(o){console.log("ERROR addTerrain"),console.log(o)}}function P(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}async function x(o,a,r){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer"),S(),_();const t=await(await fetch(`https://api.icgc.cat/territori/${r}/geo/${a}/${o}`)).json();m=t[0].features;const n=document.getElementById("infoPanelContent");n.innerHTML="";let c=[],s=null,u=null;if(t[0].features.length<4)document.getElementById("infoPanelContent").innerHTML="No hi ha dades sobre el punt seleccionat.";else{for(let l=0;lAdreça: ${s.etiqueta}
`),u&&(n.innerHTML+=`Coordenades: ${o.toFixed(4)}, ${a.toFixed(4)}
`,n.innerHTML+=`Elevació: ${u} metres

`);for(let l=0;l{M(p,f)}),n.appendChild(f),n.appendChild(document.createElement("br"))}}$()}function M(o,a){const r=C(e.getStyle().layers);e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer");const i=document.querySelector(".closeButtonClass");i&&i.parentNode.removeChild(i);let t=new maplibregl.LngLatBounds;for(let s=0;s{t.extend(d)}):u.type==="MultiPolygon"&&u.coordinates.forEach(d=>{d[0].forEach(h=>{t.extend(h)})}),document.querySelectorAll(".layer-properties").forEach(d=>d.remove());const p=document.createElement("div");p.classList.add("layer-properties");const f=m[s].properties;for(const[d,h]of Object.entries(f)){const v=document.createElement("div");v.textContent=`${d}: ${h}`,p.appendChild(v)}const y=document.createElement("button");y.textContent="×",y.classList.add("closeButtonClass"),y.addEventListener("click",()=>{P(),p.remove(),y.remove()}),p.appendChild(y),a.parentNode.insertBefore(p,a.nextSibling),a.parentNode.insertBefore(y,a.nextSibling),document.querySelectorAll(".myButtonClass").forEach(d=>d.classList.remove("highlighted-button")),a.classList.add("highlighted-button")}const c=window.innerWidth<750?k:w;e.fitBounds(t,{padding:c})}function C(o){let a="background";for(var r=0;r${t.features[0].properties.etiqueta}
- Carrer: ${t.features[0].properties.nom}
- Municipi: ${t.features[0].properties.municipi}
- Codi Postal: ${t.features[0].properties.codi_postal}
`).addTo(e)}),e.on("mouseleave","punts2",function(t){e.getCanvas().style.cursor="",i.remove()}))}function T(){e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1}),e.on("load",function(){b().then(function(){L()}),e.addControl(new maplibregl.NavigationControl,"top-right");var o=new maplibregl.FullscreenControl;e.addControl(o,"top-right"),e.addControl(new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!1}),"top-right"),e.on("click",function(a){let r=a.lngLat.lng,i=a.lngLat.lat;x(i,r,E),g?(g.remove(),g=new maplibregl.Marker({color:"#FF6E42"}).setLngLat([r,i]).addTo(e)):g=new maplibregl.Marker({color:"#FF6E42"}).setLngLat([r,i]).addTo(e)})})}function _(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function $(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function S(){var o=document.getElementById("infoPanel");o.classList.add("open"),o.style.width="300px",document.getElementById("openPanel").style.display="none"}function j(){var o=document.getElementById("infoPanel");o.classList.remove("open"),o.style.width="0px",document.getElementById("openPanel").style.display="block"}function F(){T();const o=document.getElementById("textSelector");o.addEventListener("change",()=>{const a=o.value;I(a)})}window.addEventListener("DOMContentLoaded",F);window.closePanel=j;window.openPanel=S;window.onBaseChange=B; diff --git a/dist/assets/index-Dw4IcGL0.js b/dist/assets/index-Dw4IcGL0.js new file mode 100644 index 0000000..3a59c16 --- /dev/null +++ b/dist/assets/index-Dw4IcGL0.js @@ -0,0 +1,4 @@ +(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))i(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const c of n.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&i(c)}).observe(document,{childList:!0,subtree:!0});function r(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function i(t){if(t.ep)return;t.ep=!0;const n=r(t);fetch(t.href,n)}})();var e,m;let C="all",d;const w={top:5,bottom:window.innerHeight*.5},k=150;async function B(){const o=v(e.getStyle().layers),r=document.getElementById("serveiSelector2").value;let i=null;if(e.getLayer("clicked-layer")){const n=e.getSource("clicked-layer");n&&n._data&&(i=n._data)}let t;r==="orto"?t="https://geoserveis.icgc.cat/contextmaps/icgc_orto_estandard.json":r==="topo"?t="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json":r==="fosc"&&(t="https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json"),e.setStyle(t),e.once("styledata",()=>{i&&(e.getSource("clicked-layer")||e.addSource("clicked-layer",{type:"geojson",data:i}),e.getLayer("clicked-layer")||e.addLayer({id:"clicked-layer",type:"fill",source:"clicked-layer",layout:{},paint:{"fill-color":"#f9f91d","fill-outline-color":"#f9f91d","fill-opacity":.5}},o)),b().then(function(){S()})})}async function b(){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 S(){try{e.setTerrain({source:"terrainMapZen",exaggeration:1.5})}catch(o){console.log("ERROR addTerrain"),console.log(o)}}function P(){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer")}function x(o){const a=v(e.getStyle().layers);e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer");let r=new maplibregl.LngLatBounds;for(let i=0;i{r.extend(n)}):t.type==="MultiPolygon"&&t.coordinates.forEach(n=>{n[0].forEach(c=>{r.extend(c)})})}}function M(){e.getLayer("hovered-layer")&&e.removeLayer("hovered-layer"),e.getSource("hovered-layer")&&e.removeSource("hovered-layer")}async function I(o,a,r){e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer"),E(),j();const t=await(await fetch(`https://api.icgc.cat/territori/${r}/geo/${a}/${o}`)).json();d=t[0].features;const n=document.getElementById("infoPanelContent");n.innerHTML="";let c=[],s=null,f=null;if(t[0].features.length<4)document.getElementById("infoPanelContent").innerHTML="No hi ha dades sobre el punt seleccionat.";else{for(let l=0;lAdreça: ${s.etiqueta}
`),f&&(n.innerHTML+=`Coordenades: ${o.toFixed(4)}, ${a.toFixed(4)}
`,n.innerHTML+=`Elevació: ${f} metres

`);for(let l=0;l{T(u,p)}),p.addEventListener("mouseover",()=>{x(u)}),p.addEventListener("mouseout",()=>{M()}),n.appendChild(p),n.appendChild(document.createElement("br"))}}F()}function T(o,a){const r=v(e.getStyle().layers);e.getLayer("clicked-layer")&&e.removeLayer("clicked-layer"),e.getSource("clicked-layer")&&e.removeSource("clicked-layer");const i=document.querySelector(".closeButtonClass");i&&i.parentNode.removeChild(i);let t=new maplibregl.LngLatBounds;for(let s=0;s{t.extend(y)}):f.type==="MultiPolygon"&&f.coordinates.forEach(y=>{y[0].forEach(h=>{t.extend(h)})}),document.querySelectorAll(".layer-properties").forEach(y=>y.remove());const u=document.createElement("div");u.classList.add("layer-properties");const p=d[s].properties;for(const[y,h]of Object.entries(p)){const L=document.createElement("div");L.textContent=`${y}: ${h}`,u.appendChild(L)}const g=document.createElement("button");g.textContent="×",g.classList.add("closeButtonClass"),g.addEventListener("click",()=>{P(),u.remove(),g.remove(),a.classList.remove("highlighted-button")}),u.appendChild(g),a.parentNode.insertBefore(u,a.nextSibling),a.parentNode.insertBefore(g,a.nextSibling),document.querySelectorAll(".myButtonClass").forEach(y=>y.classList.remove("highlighted-button")),a.classList.add("highlighted-button")}const c=window.innerWidth<750?w:k;e.fitBounds(t,{padding:c})}function v(o){let a="background";for(var r=0;r${t.features[0].properties.etiqueta}
+ Carrer: ${t.features[0].properties.nom}
+ Municipi: ${t.features[0].properties.municipi}
+ Codi Postal: ${t.features[0].properties.codi_postal}
`).addTo(e)}),e.on("mouseleave","punts2",function(t){e.getCanvas().style.cursor="",i.remove()}))}function $(){e=new maplibregl.Map({container:"map",style:"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",center:[2.0042,41.7747],zoom:7,maxZoom:18,attributionControl:!1,hash:!1}),e.on("load",function(){b().then(function(){S()}),e.addControl(new maplibregl.NavigationControl,"top-right");var o=new maplibregl.FullscreenControl;e.addControl(o,"top-right"),e.addControl(new maplibregl.GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!1}),"top-right"),e.on("click",function(a){var r=document.getElementById("notification");r&&r.classList.remove("show");let i=a.lngLat.lng,t=a.lngLat.lat;I(t,i,C),m?(m.remove(),m=new maplibregl.Marker({color:"#FF6E42"}).setLngLat([i,t]).addTo(e)):m=new maplibregl.Marker({color:"#FF6E42"}).setLngLat([i,t]).addTo(e)})})}function j(){document.getElementById("loader").style.display="block",document.getElementById("infoPanelContent").style.display="none"}function F(){document.getElementById("loader").style.display="none",document.getElementById("infoPanelContent").style.display="block"}function E(){var o=document.getElementById("infoPanel");o.classList.add("open"),o.style.width="300px",document.getElementById("openPanel").style.display="none"}function H(){var o=document.getElementById("infoPanel");o.classList.remove("open"),o.style.width="0px",document.getElementById("openPanel").style.display="block"}function O(){$();const o=document.getElementById("textSelector");o.addEventListener("change",()=>{const a=o.value;_(a)})}window.addEventListener("DOMContentLoaded",O);window.closePanel=H;window.openPanel=E;window.onBaseChange=B; diff --git a/dist/index.html b/dist/index.html index 333cd47..3b01c6a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -162,6 +162,7 @@ margin-top: 60px; margin-bottom: 50px; user-select: text; + font-size: 1.2em; } #closePanel { @@ -411,7 +412,7 @@ } - + @@ -442,11 +443,13 @@ Clica sobre el mapa per visualitzar informació d'un punt +
- Clica sobre el mapa per visualitzar informació d'un punt + Clica sobre el mapa per visualitzar informació geogràfica ×
+ ☰