From 9066dc30de92aff2a5b2d47fde895dcc52909398 Mon Sep 17 00:00:00 2001 From: lstiz Date: Thu, 13 Feb 2025 10:21:41 +0100 Subject: [PATCH] add mapicgc examples to raster+vector+terrain --- .../icgc-basemap-mapicgc-code.html | 207 ++++++++++++++ .../mapicgcgljs/icgc-basemap-mapicgc-map.html | 104 +++++++ .../icgc-basemap3D-mapicgc-code.html | 167 +++++++++++ .../icgc-basemap3D-mapicgc-map.html | 56 ++++ .../mapicgcgljs/icgc-raster-mapicgc-code.html | 270 ++++++++++++++++++ .../mapicgcgljs/icgc-raster-mapicgc-map.html | 128 +++++++++ .../icgc-terrain-rgb-mapicgc-code.html | 190 ++++++++++++ .../icgc-terrain-rgb-mapicgc-map.html | 92 ++++++ index.html | 7 + 9 files changed, 1221 insertions(+) create mode 100644 exemples/mapicgcgljs/icgc-basemap-mapicgc-code.html create mode 100644 exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html create mode 100644 exemples/mapicgcgljs/icgc-basemap3D-mapicgc-code.html create mode 100644 exemples/mapicgcgljs/icgc-basemap3D-mapicgc-map.html create mode 100644 exemples/mapicgcgljs/icgc-raster-mapicgc-code.html create mode 100644 exemples/mapicgcgljs/icgc-raster-mapicgc-map.html create mode 100644 exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-code.html create mode 100644 exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-map.html diff --git a/exemples/mapicgcgljs/icgc-basemap-mapicgc-code.html b/exemples/mapicgcgljs/icgc-basemap-mapicgc-code.html new file mode 100644 index 0000000..b89a87e --- /dev/null +++ b/exemples/mapicgcgljs/icgc-basemap-mapicgc-code.html @@ -0,0 +1,207 @@ + + + + + + + + + + Exemple estils vector ICGC i MapICGC GL JS + + + + + + + + + + + + + + + + + + + +
+
+
+ Exemple estils vector ICGC i MapICGC GL JS +
+
+

+ Veure + codi font + + pantalla completa +

+
+
+
+ +
+
+ 

+<html>
+<head>
+    <meta charset='utf-8'/>
+    <title>Exemple estils vector ICGC i MapICGC GL JS</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
+    <script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"></script>
+    <link href="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet"/>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%
+        }
+        #menu {
+            position: absolute;
+            z-index: 1000;
+            background: #fff;
+            padding: 10px;
+            font-family: 'Open Sans', sans-serif;
+            top: 5px;
+            left: 5px;
+            border-radius: 7px;
+            -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+            -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+            box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+        }
+       </style>
+</head>
+<body>
+    <div id='menu'>
+    <input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked' />
+    <label for='icgc_mapa_estandard'>Mapa estàndard</label><br />
+    <input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris' />
+    <label for='icgc_mapa_base_gris'>Mapa base gris</label><br />
+    <input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard' />
+    <label for='icgc_delimitacio_estandard'>Delimitació estàndard</label><br />
+    <input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard' />
+    <label for='icgc_xarxa_viaria_estandard'>Xarxa viària estàndard</label><br />
+    <input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament' />
+    <label for='icgc_arees_poblament'>Àrees poblament</label><br />
+    <input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida' />
+    <label for='icgc_orto_hibrida'>Orto híbrida</label>
+    </div>
+    <div id="map"></div>
+    <script>
+ 
+    async function initMap() {
+      const data = await mapicgcgl.Config.getConfigICGC();
+      const map = new mapicgcgl.Map({
+          container: "map",
+          style: data.Styles.TOPO,
+          center: [2.1464, 41.306],
+          zoom: 7.4,
+          maxZoom: 19,
+          hash: true,
+          pitch: 0,
+      });
+      map.on("load", () => {
+          map.addFullscreenControl()
+          map.addNavigationControl()
+          map.addAttributionControl({ compact: true });
+          map.addGeolocateControl(
+              {
+                  positionOptions: {
+                      enableHighAccuracy: true,
+                  },
+                  trackUserLocation: true,
+              }
+          );
+
+      })
+      const layerList = document.getElementById('menu');
+      const inputs = layerList.getElementsByTagName('input');
+      
+      function switchLayer(layer) {
+          const layerId = layer.target.id;
+          map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
+      }
+     
+      for (let i = 0; i < inputs.length; i++) {
+          inputs[i].onclick = switchLayer;
+      }
+      
+  }
+  initMap();
+
+    </script>
+</body>
+</html>
+
+
+
+ + + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html b/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html new file mode 100644 index 0000000..896c37e --- /dev/null +++ b/exemples/mapicgcgljs/icgc-basemap-mapicgc-map.html @@ -0,0 +1,104 @@ + + + + + Exemple estils vector ICGC i MapICGC GL JS + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-code.html b/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-code.html new file mode 100644 index 0000000..e0e2dc2 --- /dev/null +++ b/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-code.html @@ -0,0 +1,167 @@ + + + + + + + + + + Exemple MapLibre i ContextMaps ICGC + + + + + + + + + + + + + + + + + + + +
+
+
+ Exemple MapICGC GL JS i model 3D +
+
+

+ Veure + codi font + pantalla completa +

+
+
+
+ +
+
+ 

+<html>
+<head>
+    <meta charset='utf-8'/>
+    <title>Exemple MapICGC GL JS i model 3D</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
+    <script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"></script>
+    <link href="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet"/>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script>
+ 
+    async function initMap() {
+      const data = await mapicgcgl.Config.getConfigICGC();
+      const map = new mapicgcgl.Map({
+          container: "map",
+          style: data.Styles.ORTO3D,
+          center: [2.309, 41.98],
+          zoom: 17.2,
+          maxZoom: 19,
+          hash: true,
+          bearing: 45,
+      });
+      map.on("load", () => {
+          map.addFullscreenControl();
+          map.addNavigationControl()
+          map.addAttributionControl({ compact: true });
+          map.addGeolocateControl(
+              {
+                  positionOptions: {
+                      enableHighAccuracy: true,
+                  },
+                  trackUserLocation: true,
+              });
+
+
+      })
+       }
+  initMap();
+
+    </script>
+</body>
+</html>
+
+
+
+ + + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-map.html b/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-map.html new file mode 100644 index 0000000..0b20478 --- /dev/null +++ b/exemples/mapicgcgljs/icgc-basemap3D-mapicgc-map.html @@ -0,0 +1,56 @@ + + + + + Exemple MapICGC GL JS i model 3D + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-raster-mapicgc-code.html b/exemples/mapicgcgljs/icgc-raster-mapicgc-code.html new file mode 100644 index 0000000..62911fc --- /dev/null +++ b/exemples/mapicgcgljs/icgc-raster-mapicgc-code.html @@ -0,0 +1,270 @@ + + + + + + + + + Exemple serveis rasters ICGC i MapICGC GL JS + + + + + + + + + + + + + + + + + + + +
+
+
+ Exemple serveis rasters ICGC i MapICGC GL JS +
+
+

+ Veure codi font + pantalla completa +

+
+
+
+ +
+
+ 

+<html>
+<head>
+    <meta charset='utf-8'/>
+    <title>Exemple serveis rasters ICGC i MapICGC GL JS</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
+    <script src="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.js"></script>
+    <link href="https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet"/>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%
+        }
+        #menu {
+            position: absolute;
+            z-index: 1000;
+            background: #fff;
+            padding: 10px;
+            font-family: 'Open Sans', sans-serif;
+            top: 5px;
+            left: 5px;
+            border-radius: 7px;
+            -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+            -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+            box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+        }
+    </style>
+</head>
+<body>
+    <div id='menu'>
+    <input id="topografic" type="radio" name="rtoggle" value="topografic" checked="checked" />
+    <label for="topografic">Topogràfic</label><br />
+    
+    <input id="topografic-gris" type="radio" name="rtoggle" value="topografic-gris" />
+    <label for="topografic-gris">Topogràfic gris</label><br />
+    
+    <input id="simplificat" type="radio" name="rtoggle" value="simplificat" />
+    <label for="simplificat">Simplificat</label><br />
+    
+    <input id="administratiu" type="radio" name="rtoggle" value="administratiu" />
+    <label for="administratiu">Administratiu</label><br />
+    
+    <input id="estandard" type="radio" name="rtoggle" value="estandard" />
+    <label for="estandard">Estàndard</label><br />
+    
+    <input id="orto" type="radio" name="rtoggle" value="orto" />
+    <label for="orto">Orto</label><br />
+    
+    <input id="orto-gris" type="radio" name="rtoggle" value="orto-gris" />
+    <label for="orto-gris">Orto gris</label><br />
+    
+    <input id="orto-hibrida" type="radio" name="rtoggle" value="orto-hibrida" />
+    <label for="orto-hibrida">Orto híbrida</label><br />
+    
+    </div>
+
+    <div id="map"></div>
+    <script>
+ 
+    async function initMap() {
+      const data = await mapicgcgl.Config.getConfigICGC();
+      const map = new mapicgcgl.Map({
+          container: "map",
+          style: data.Styles.TOPO,
+          center: [2.1464, 41.306],
+          zoom: 7.4,
+          maxZoom: 19,
+          hash: true,
+          pitch: 0,
+      });
+      map.on("load", () => {
+          map.addFullscreenControl()
+          map.addNavigationControl()
+          map.addAttributionControl({ compact: true });
+          map.addGeolocateControl(
+              {
+                  positionOptions: {
+                      enableHighAccuracy: true,
+                  }, 
+                  trackUserLocation: true,
+              }
+          );
+
+          switchLayer();
+      })
+      const layerList = document.getElementById('menu');
+      const inputs = layerList.getElementsByTagName('input');
+ 
+      function switchLayer(layer) {
+        let layerId;
+
+        if (layer === undefined) {
+            layerId = "topografic";
+        } else {
+            layerId = layer.target.id;
+        }
+
+        if (map.getLayer("wmts-layer")) {
+            map.removeLayer("wmts-layer");
+            map.removeSource("wmts-layer");
+        }
+
+        map.addSource("wmts-layer", {
+            type: "raster",
+            tiles: [
+                `https://geoserveis.icgc.cat/servei/catalunya/mapa-base/wmts/${layerId}/MON3857NW/{z}/{x}/{y}.png`,
+            ],
+            tileSize: 256,
+        });
+
+        map.addLayer({
+            id: "wmts-layer",
+            type: "raster",
+            source: "wmts-layer",
+            paint: {},
+        });
+      }
+   
+      for (let i = 0; i < inputs.length; i++) {
+          inputs[i].onclick = switchLayer;
+      }
+      
+  }
+  initMap();
+
+    </script>
+</body>
+</html>
+
+
+
+ + diff --git a/exemples/mapicgcgljs/icgc-raster-mapicgc-map.html b/exemples/mapicgcgljs/icgc-raster-mapicgc-map.html new file mode 100644 index 0000000..e4646cb --- /dev/null +++ b/exemples/mapicgcgljs/icgc-raster-mapicgc-map.html @@ -0,0 +1,128 @@ + + + + + Exemple serveis rasters ICGC i MapICGC GL JS + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-code.html b/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-code.html new file mode 100644 index 0000000..7c5202a --- /dev/null +++ b/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-code.html @@ -0,0 +1,190 @@ + + + + + + + + + Exemple terrenys i MapICGC GL JS + + + + + + + + + + + + + + + + + + +
+
+
+ Exemple terrenys i MapICGC GL JS +
+
+

+ Veure codi font + + pantalla completa +

+
+
+
+ +
+
+ 

+        <html>
+        <head>
+            <meta charset='utf-8' />
+            <title>Exemple terrenys i MapICGC GL JS</title>
+            <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+            <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
+            <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
+            <style>
+                body {
+                    margin: 0;
+                }
+                #map {
+                    height: 100%;
+                    width: 100%;
+                    background-color: #ffffff
+                }
+                #menu {
+                    position: absolute;
+                    z-index: 1000;
+                    background: #fff;
+                    padding: 10px;
+                    font-family: 'Open Sans', sans-serif;
+                    top: 5px;
+                    left: 5px;
+                    border-radius: 7px;
+                    -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+                    -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
+                    box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75); 
+                }
+            </style>
+        </head>
+        <body>
+            <div id='menu'>
+                <input id='ICGC5M' type='radio' name='rtoggle' value='ICGC5M checked='checked' />
+                <label for='ICGC5M'>Terrain ICGC 5m / Catalunya</label><br />
+                <input id='WORLD30M' type='radio' name='rtoggle' value='WORLD30M' />
+                <label for='WORLD30M'>Terrain 30m / World</label>
+            </div>
+            <div id="map"></div>
+            <script>
+            async function initMap() {
+              const data = await mapicgcgl.Config.getConfigICGC();
+              const map = new mapicgcgl.Map({
+                  container: "map",
+                  style: data.Styles.ORTO,
+                  center: [0.973374, 42.168171],
+                  zoom: 16.69,
+                  maxZoom: 19,
+                  hash: true,
+                  pitch: 82,
+                  bearing: -59.7,
+              });
+              map.on("load", () => {
+                  map.addFullscreenControl()
+                  map.addNavigationControl()
+                  map.addAttributionControl({ compact: true });
+                  map.addGeolocateControl(
+                      {
+                          positionOptions: {
+                              enableHighAccuracy: true,
+                          },
+                          trackUserLocation: true,
+                      }
+                  );
+                  map.addTerrainICGC(data.Terrains.ICGC5M, "bottom-right");
+                  map.setSky()
+  
+  
+              })
+              const layerList = document.getElementById('menu');
+              const inputs = layerList.getElementsByTagName('input');
+  
+              function switchLayer(layer) {
+                 
+                  const layerId = layer.target.id;
+                  console.log('layer', layerId)
+                  map.addTerrainICGC(data.Terrains[layerId], "bottom-right");
+              }
+  
+              for (let i = 0; i < inputs.length; i++) {
+                  inputs[i].onclick = switchLayer;
+              }
+  
+          }
+          initMap();
+            </script>
+        </body>
+        </html>
+
+
+
+ + \ No newline at end of file diff --git a/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-map.html b/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-map.html new file mode 100644 index 0000000..30d0f46 --- /dev/null +++ b/exemples/mapicgcgljs/icgc-terrain-rgb-mapicgc-map.html @@ -0,0 +1,92 @@ + + + + Exemple terrenys i MapICGC GL JS + + + + + + + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 4324b88..bf079d3 100644 --- a/index.html +++ b/index.html @@ -556,6 +556,7 @@
Atribució:

Exemples integració amb: