diff --git a/1.1.Inst_npm/index.html b/1.1.Inst_npm/index.html index a3e374f..f0c3b0b 100755 --- a/1.1.Inst_npm/index.html +++ b/1.1.Inst_npm/index.html @@ -22,7 +22,7 @@ - + diff --git a/1.2.Inst_cdn/index.html b/1.2.Inst_cdn/index.html index 0a4aed2..8fd2201 100755 --- a/1.2.Inst_cdn/index.html +++ b/1.2.Inst_cdn/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.1.0.Map/index.html b/2.1.0.Map/index.html index 3bc9082..1e24510 100755 --- a/2.1.0.Map/index.html +++ b/2.1.0.Map/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.1.1.AddTerrain/index.html b/2.1.1.AddTerrain/index.html index 02ed605..3c9e12f 100755 --- a/2.1.1.AddTerrain/index.html +++ b/2.1.1.AddTerrain/index.html @@ -18,7 +18,7 @@ - + diff --git a/2.1.2.AddICGCTerrain/index.html b/2.1.2.AddICGCTerrain/index.html index f59854a..a0a0cb4 100755 --- a/2.1.2.AddICGCTerrain/index.html +++ b/2.1.2.AddICGCTerrain/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.1.3.3dStyle/index.html b/2.1.3.3dStyle/index.html index 0376dca..5ba14bb 100755 --- a/2.1.3.3dStyle/index.html +++ b/2.1.3.3dStyle/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.10.AddLogo/index.html b/2.10.AddLogo/index.html index eb2fb89..e93d698 100755 --- a/2.10.AddLogo/index.html +++ b/2.10.AddLogo/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.11.FetchData/index.html b/2.11.FetchData/index.html index d770b6d..8b1273d 100755 --- a/2.11.FetchData/index.html +++ b/2.11.FetchData/index.html @@ -22,7 +22,7 @@ - + @@ -903,9 +903,9 @@
  • - + - Posició (position) + Posició (layerPosition) @@ -1148,9 +1148,9 @@
  • - + - Posició (position) + Posició (layerPosition) @@ -1201,7 +1201,7 @@

    2.13 Fetch dades

    Exemple

    -

    .fetchData(url, name, position, options)

    +

    .fetchData(url, name, options)

    📌 Format de dades: geojson o flatgeobuf

    See the Pen @@ -1278,49 +1278,56 @@

    Codi

    }); let paintOptions = { - "line-color": "green", - "line-width": 3, - "line-opacity": 1, - }; - let paintOptionsfgb = { - "line-color": "grey", - "line-width": 2, - }; - let layerPosition = "top"; // select: 'top', 'lines' or 'labels' - - map.on("load", () => { - - map.addFullscreenControl(); - - // geojson - map.fetchData( - "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson", - "RutesMontserrat", - layerPosition, - paintOptions - ); - - // ICGC FGB data: - map.fetchData( - mapicgcgl.Layers.FGBAdmin.comarquesVigent, - "Comarques", - layerPosition, - paintOptionsfgb - ); - - // external FGB data: - map.fetchData( - "https://flatgeobuf.org/test/data/UScounties.fgb", - "UScounties", - layerPosition - ); - - }); - </script> - </body> -</html> + layout: { + visibility: "visible", + }, + paint: { + "line-color": "green", + "line-width": 3, + "line-opacity": 1, + }, + layerPosition: "top", // select: 'top', 'lines' or 'labels' + }; + let paintOptionsfgb = { + layout: { + visibility: "visible", + }, + paint: { + "line-color": "grey", + "line-width": 2, + }, + layerPosition: "top", // select: 'top', 'lines' or 'labels' + }; + + map.on("load", () => { + map.addFullscreenControl(); + + // geojson + map.fetchData( + "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson", + "RutesMontserrat", + paintOptions + ); + + // ICGC FGB data: + map.fetchData( + mapicgcgl.Layers.FGBAdmin.comarquesVigent, + "Comarques", + paintOptionsfgb + ); + + // external FGB data: + map.fetchData( + "https://flatgeobuf.org/test/data/UScounties.fgb", + "UScounties", + paintOptionsfgb + ); + }); + </script> + </body> +</html> -

    Posició (position)

    +

    Posició (layerPosition)

    diff --git a/2.12.FetchDataAndMenu/index.html b/2.12.FetchDataAndMenu/index.html index 630b1e1..4a8d758 100755 --- a/2.12.FetchDataAndMenu/index.html +++ b/2.12.FetchDataAndMenu/index.html @@ -22,7 +22,7 @@ - + @@ -924,9 +924,9 @@
  • - + - Posició (position) + Posició (layerPosition) @@ -1148,9 +1148,9 @@
  • - + - Posició (position) + Posició (layerPosition) @@ -1201,7 +1201,7 @@

    2.14 Fetch dades i crea menú

    Exemple

    -

    .fetchDataAndMenu(url, name, filterField, layerPosition, paintOptions)

    +

    .fetchDataAndMenu(url, name, filterField, options)

    📌 Format de dades: geojson o flatgeobuf

    See the Pen @@ -1253,72 +1253,120 @@

    Codi

    margin: 0; padding: 0; } - #map { - position: absolute; - top: 0; - bottom: 0; - width: 100%; - height: 100%; - } - </style> - </head> - <body> - <div id="map"></div> - <nav id="menu-group" class="filter-group"></nav> - - <script> - const map = new mapicgcgl.Map({ - container: "map", - style: mapicgcgl.Styles.LIGHT, - center: [1.808, 41.618], - zoom: 10, - maxZoom: 19, - hash: true, - pitch: 0, - }); - - let layerPosition = "top"; // select: 'top', 'lines' or 'labels' - let filterField = "municipi"; // select 'all' for view all the features as a single layer - let paintOptions = { - "line-color": "green", - "line-width": 3, - "line-opacity": 1, - }; - let filterFGBField = "NOMPROV"; // select 'all' for view all the features as a single layer - let paintOptionsfgb = { - "fill-color": "blue", - "fill-opacity": 0.6, - }; - - map.on("load", () => { - - map.addFullscreenControl(); - - //geojson - map.fetchDataAndMenu( - "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson", - "RutesMontserrat", - filterField, - layerPosition, - paintOptions - ); - - //ICGC FGB data: - map.fetchDataAndMenu( - mapicgcgl.Layers.FGBAdmin.provinciesVigent, - "Provincies", filterFGBField, layerPosition, paintOptionsfgb); - - //external FGB data: - map.fetchDataAndMenu( - "https://flatgeobuf.org/test/data/UScounties.fgb", - "UScounties", 'all', layerPosition, paintOptionsfgb); - - }); - </script> - </body> -</html> + + #map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + } + + /* Personalitza el teu menú: */ + #menu-group { + position: absolute; + top: 10px; + left: 10px; + color: #000000; + } + + #menu-group input[type="checkbox"] + label { + background-color: #ffffff !important; + } + + #titleDivMenu { + background-color: rgb(213 212 212); + } + + #titleDivMenuSub { + background-color: #e9e9e9; + } + </style> + </head> + <body> + <div id="map"></div> + <nav id="menu-group" class="filter-group"></nav> + + <script> + const map = new mapicgcgl.Map({ + container: "map", + style: mapicgcgl.Styles.LIGHT, + center: [1.808, 41.618], + zoom: 10, + maxZoom: 19, + hash: true, + pitch: 0, + }); + + + let filterField = "municipi"; // select 'all' for view all the features as a single layer + let paintOptions = { + "line-color": "green", + "line-width": 3, + "line-opacity": 1, + }; + let optionsLayer = { + layout: { + visibility: "visible", + }, + paint: { + "line-color": "green", + "line-width": 3, + "line-opacity": 1, + }, + layerPosition: "labels", + }; + + let filterFGBField = "NOMPROV"; // select 'all' for view all the features as a single layer + let paintOptionsfgb = { + "fill-color": "grey", + "fill-opacity": 0.6, + }; + + let optionsLayerfgb = { + layout: { + visibility: "visible", + }, + paint: { + "fill-color": "grey", + "fill-opacity": 0.16, + }, + layerPosition: "labels", + }; + + map.on("load", () => { + map.addFullscreenControl(); + + //geojson + map.fetchDataAndMenu( + "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson", + "RutesMontserrat", + filterField, + optionsLayer + ); + + //ICGC FGB data: + map.fetchDataAndMenu( + mapicgcgl.Layers.FGBAdmin.provinciesVigent, + "Provincies", + filterFGBField, + optionsLayerfgb + ); + + //external FGB data: + map.fetchDataAndMenu( + "https://flatgeobuf.org/test/data/UScounties.fgb", + "UScounties", + "all", + layerPosition, + paintOptionsfgb + ); + }); + </script> + </body> +</html> -

    Posició (position)

    +

    Posició (layerPosition)

  • diff --git a/2.13.AddFeatureQuery/index.html b/2.13.AddFeatureQuery/index.html index b3dc2e0..f608447 100755 --- a/2.13.AddFeatureQuery/index.html +++ b/2.13.AddFeatureQuery/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.14.AddGeocoderICGC/index.html b/2.14.AddGeocoderICGC/index.html index 501b496..d84b4a4 100755 --- a/2.14.AddGeocoderICGC/index.html +++ b/2.14.AddGeocoderICGC/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.2.AddBasemap/index.html b/2.2.AddBasemap/index.html index ca87f2e..61680b8 100755 --- a/2.2.AddBasemap/index.html +++ b/2.2.AddBasemap/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.20.AdvancedExample/index.html b/2.20.AdvancedExample/index.html index 51f5e79..6be9a33 100755 --- a/2.20.AdvancedExample/index.html +++ b/2.20.AdvancedExample/index.html @@ -22,7 +22,7 @@ - + @@ -1192,103 +1192,139 @@

    Codi

    width: 100%; height: 100%; } - </style> - </head> - <body> - <div id="map"></div> - <nav id="menu-group" class="filter-group"></nav> - - <script> - const map = new mapicgcgl.Map({ - container: "map", - style: mapicgcgl.Styles.ORTO, - center: [1.808, 41.618], - zoom: 10, - maxZoom: 19, - hash: true, - pitch: 0, - }); - - map.on("load", () => { - //GEOCODER - map.addGeocoderICGC(); - //CONTROLS - map.addGeolocateControl( - { - positionOptions: { - enableHighAccuracy: true, - }, - trackUserLocation: true, - }, - "bottom-right" - ); - map.addExportControl(); - map.addFullscreenControl({},'top-right'); - - //addLogo - let options = { - id: "icgcColorLogo", - url: "https://betaserver.icgc.cat/logos/ICGC_color_norma.svg", - href: "https://www.icgc.cat", - }; - - // map.addLogo(options); - - //add Terrain - map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, "bottom-right"); - //add image layer - let layerImagePosition = "top"; // select: 'top', 'lines' or 'labels' - map.addImageLayerICGC( - mapicgcgl.Layers.Orto.ortofotoColor2013, - layerImagePosition - ); - - //add vector icgc - let labelVisibility = "visible"; // select : "visible" or "none" - let paintOptionsVector = { - "line-color": "black", - "line-width": 1, - }; - let layerVectorPosition = "top"; // select: 'top', 'lines' or 'labels' + /*personalitza el teu menú */ + #menu-group { + position: absolute; + top: 10px; + left: 10px; + color: #000000; + } + + #menu-group input[type="checkbox"] + label { + background-color: #ffffff !important; + } + + #titleDivMenu { + background-color: rgb(213 212 212); + } + + #titleDivMenuSub { + background-color: #e9e9e9; + } + </style> + </head> + <body> + <div id="map"></div> + <nav id="menu-group" class="filter-group"></nav> + + <script> + const map = new mapicgcgl.Map({ + container: "map", + style: mapicgcgl.Styles.ORTO, + center: [1.808, 41.618], + zoom: 10, + maxZoom: 19, + hash: true, + pitch: 0, + }); + + map.on("load", () => { + //GEOCODER + map.addGeocoderICGC(); + //CONTROLS + map.addGeolocateControl( + { + positionOptions: { + enableHighAccuracy: true, + }, + trackUserLocation: true, + }, + "bottom-right" + ); + map.addExportControl(); + map.addFullscreenControl({}, "top-right"); + + //addLogo + let options = { + id: "icgcColorLogo", + url: "https://betaserver.icgc.cat/logos/ICGC_color_norma.svg", + href: "https://www.icgc.cat", + }; - map.addVectorLayerICGC( - mapicgcgl.Layers.VectorAdmin.comarques2022, - layerVectorPosition, - labelVisibility, - paintOptionsVector - ); - - // - let paintOptions = { - "line-color": "yellow", - "line-width": 2, - }; - let layerPosition = "top"; // select: 'top', 'lines' or 'labels' - let filterField = "municipi"; // select 'all' for view all the features as a single layer - - setTimeout(() => { - map.addFullscreenControl(); - map.fetchDataAndMenu( - "https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson", - "RutesMontserrat", - filterField, - layerPosition, - paintOptions - ); - - // let queryFields = ["nom", "municipi"]; - // map.addFeatureQuery("RutesMontserrat", queryFields); - let popupStyle = { - title: "Informació:", - image: "https://tilemaps.icgc.cat/cdn/logos/gencat_logo_color.png", - }; - let queryFields = []; - map.addFeatureQuery("RutesMontserrat", queryFields, popupStyle); - }, 1000); - }); - </script> - </body> -</html> + // map.addLogo(options); + + //add Terrain + map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, "bottom-right"); + //add image layer + let optionsLayer = { + type: "raster", + layout: { + visibility: "visible", + }, + paint: { + "raster-opacity": 1, + }, + position: "labels", + }; + let layerImagePosition = "top"; // select: 'top', 'lines' or 'labels' + map.addImageLayerICGC( + "orto2013", + mapicgcgl.Layers.Orto.ortofotoColor2013, + optionsLayer + ); + + //add vector icgc + let optionsLayer = { + type: "line", + layout: { + visibility: "visible", + }, + paint: { + "line-color": "red", + "line-width": 0.2, + }, + position: "lines", + }; + + map.addVectorLayerICGC( + "Municipis", //ID + mapicgcgl.Layers.VectorAdmin.municipisVigent, //Layer + optionsLayer //options + ); + + map.addFullscreenControl(); + + let filterField = "municipi"; // select 'all' for view all the features as a single layer + let optionsLayerEqui = { + layout: { + visibility: "visible", + }, + paint: { + "circle-color": "blue", + "circle-opacity": 0.85, + }, + layerPosition: "lines", + }; + + map.fetchDataAndMenu( + "https://analisi.transparenciacatalunya.cat/resource/8gmd-gz7i.geojson", + "Equipaments", + filterField, + optionsLayerEqui + ); + + // let queryFields = ["nom", "municipi"]; + // map.addFeatureQuery("RutesMontserrat", queryFields); + let popupStyle = { + title: "Informació:", + image: "https://tilemaps.icgc.cat/cdn/logos/gencat_logo_color.png", + }; + let queryFields = ["nom"]; // [] for query all the properties + map.addFeatureQuery("Equipaments", queryFields, popupStyle); + }); + </script> + </body> +</html> diff --git a/2.3.AddImageLayerICGC/index.html b/2.3.AddImageLayerICGC/index.html index 7dea52b..278d0e1 100755 --- a/2.3.AddImageLayerICGC/index.html +++ b/2.3.AddImageLayerICGC/index.html @@ -22,7 +22,7 @@ - + @@ -1219,7 +1219,7 @@

    2.5 Afegir capa d'imatge ICGC

    Exemple

    -

    .addImageLayerICGC(layer, position)

    +

    .addImageLayerICGC(name, urlLayer, options)

    See the Pen Exemple addImageLayerICGC by unitatgeostart (@unitatgeostart) @@ -1292,17 +1292,26 @@

    Codi

    pitch: 0, }); map.on("load", () => { - let layerPosition = "labels"; - - map.addImageLayerICGC( - mapicgcgl.Layers.Orto.ortofotoColor2013, - layerPosition - ); - map.addFullscreenControl(); - }); - </script> - </body> -</html> + let optionsLayer = { + type: "raster", + layout: { + visibility: "visible", + }, + paint: { + "raster-opacity": 1, + }, + position: "labels", + }; + map.addImageLayerICGC( + "orto2013", + mapicgcgl.Layers.Orto.ortofotoColor2013, + optionsLayer + ); + map.addFullscreenControl(); + }); + </script> + </body> +</html>

    Posició (position)

    diff --git a/2.4.AddVectorLayerFGBICGC/index.html b/2.4.AddVectorLayerFGBICGC/index.html index 8a744ad..3686d8e 100755 --- a/2.4.AddVectorLayerFGBICGC/index.html +++ b/2.4.AddVectorLayerFGBICGC/index.html @@ -18,7 +18,7 @@ - + diff --git a/2.4.AddVectorLayerICGC/index.html b/2.4.AddVectorLayerICGC/index.html index 1f498da..d8189e6 100755 --- a/2.4.AddVectorLayerICGC/index.html +++ b/2.4.AddVectorLayerICGC/index.html @@ -22,7 +22,7 @@ - + @@ -1219,7 +1219,7 @@

    2.6 Afegir capa vector ICGC

    Exemple

    -

    .addVectorLayerICGC(layer,position, labelVisibility,paintOption)

    +

    .addVectorLayerICGC(idLayer,layerUrl, options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) @@ -1277,44 +1277,69 @@

    Codi

    width: 100%; height: 100%; } - </style> - </head> - <body> - <div id="map"></div> - <script> - const map = new mapicgcgl.Map({ - container: "map", - style: mapicgcgl.Styles.TOPO, - center: [2.1464, 41.306], - zoom: 7.4, - maxZoom: 19, - hash: true, - pitch: 0, - }); - map.on("load", () => { - map.addFullscreenControl(); - - let layerPosition = "top"; // select: 'top', 'lines' or 'labels' - let labelVisibility = "visible"; // visible or none - let paintOptions = { - "line-color": "black", - "line-width": 1, - }; - - map.addVectorLayerICGC( - mapicgcgl.Layers.Vector.cobertes2018, layerPosition - ); - - map.addVectorLayerICGC( - mapicgcgl.Layers.VectorAdmin.comarques2022, - layerPosition, - labelVisibility, - paintOptions - ); - }); - </script> - </body> -</html> + /* personalitza el teu botó de llegenda: */ + #toggleLegend { + position: absolute; + top: 20px; + right: 20px; + background-color: #3f33eb; + color: white; + width: 40px; + height: 40px; + border-radius: 50%; + text-align: center; + line-height: 40px; + cursor: pointer; + z-index: 1000; + } + </style> + </head> + <body> + <div id="map"></div> + <script> + const map = new mapicgcgl.Map({ + container: "map", + style: mapicgcgl.Styles.TOPO, + center: [2.1464, 41.306], + zoom: 7.4, + maxZoom: 19, + hash: true, + pitch: 0, + }); + map.on("load", () => { + map.addFullscreenControl(); + + let optionsLayer = { + type: "line", + layout: { + visibility: "visible", + }, + paint: { + "line-color": "red", + "line-width": 0.2, + }, + position: "lines", + }; + + let layerPosition = "top"; // select: 'top', 'lines' or 'labels' + let labelVisibility = "visible"; // visible or none + let paintOptions = { + "line-color": "black", + "line-width": 1, + }; + + // map.addVectorLayerICGC( + // 'cobertes2018', mapicgcgl.Layers.Vector.cobertes2018 + // ); + map.addVectorLayerICGC( + "Municipis", //ID + mapicgcgl.Layers.VectorAdmin.municipisVigent, //Layer + optionsLayer //options + ); + }); + </script> + </body> +</html>

    Posició (position)

    diff --git a/2.5.AddLayerGeojson/index.html b/2.5.AddLayerGeojson/index.html index dd818de..648f0a3 100755 --- a/2.5.AddLayerGeojson/index.html +++ b/2.5.AddLayerGeojson/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.6.AddLayerTree/index.html b/2.6.AddLayerTree/index.html index dff5149..20b451e 100755 --- a/2.6.AddLayerTree/index.html +++ b/2.6.AddLayerTree/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.7.AddMarker/index.html b/2.7.AddMarker/index.html index 35e472b..f732bcb 100755 --- a/2.7.AddMarker/index.html +++ b/2.7.AddMarker/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.8.AddControl/index.html b/2.8.AddControl/index.html index 023cbea..9d2d9c0 100755 --- a/2.8.AddControl/index.html +++ b/2.8.AddControl/index.html @@ -22,7 +22,7 @@ - + diff --git a/2.9.AddCompare/index.html b/2.9.AddCompare/index.html index 6ffbfd7..db3361d 100755 --- a/2.9.AddCompare/index.html +++ b/2.9.AddCompare/index.html @@ -22,7 +22,7 @@ - + diff --git a/3.1.Funcions_doc/index.html b/3.1.Funcions_doc/index.html index aa0c7e9..a52064b 100755 --- a/3.1.Funcions_doc/index.html +++ b/3.1.Funcions_doc/index.html @@ -20,7 +20,7 @@ - + @@ -1039,7 +1039,7 @@
  • - addGeocoderICGC() →Object + addGeocoderICGC() → Object @@ -1048,7 +1048,7 @@
  • - getStyle() →Object + getStyle() → Object @@ -1057,7 +1057,7 @@
  • - loadImage(urlImage) →image + loadImage(urlImage) → image @@ -1066,7 +1066,7 @@
  • - addImage(imageName, imageData) →image + addImage(imageName, imageData) → image @@ -1075,7 +1075,7 @@
  • - getConfigStyles() →Array + getConfigStyles() → Array @@ -1084,7 +1084,7 @@
  • - getConfigWMSLayers() →Array + getConfigWMSLayers() → Array @@ -1093,7 +1093,7 @@
  • - getConfigOrtoLayers() →Array + getConfigOrtoLayers() → Array @@ -1102,7 +1102,7 @@
  • - getConfigVectorLayers() →Array + getConfigVectorLayers() → Array @@ -1111,7 +1111,7 @@
  • - getConfigVectorAdminLayers() →Array + getConfigVectorAdminLayers() → Array @@ -1120,25 +1120,25 @@
  • - getConfigFGBAdminLayers() →Array + getConfigFGBAdminLayers() → Array
  • - + - fetchData(url, name, position, options) + fetchData(url, name, options)
  • - + - fetchDataAndMenu(url, name, featureTree, position, options) + fetchDataAndMenu(url, name, featureTree, options) @@ -1237,7 +1237,7 @@
  • - getZoom() →number + getZoom() → number @@ -1282,7 +1282,7 @@
  • - getCenter() →LngLat + getCenter() → LngLat @@ -1291,7 +1291,7 @@
  • - setTerrain(options) →Object + setTerrain(options) → Object @@ -1343,9 +1343,9 @@
  • - + - addLayerWMS(layer, position) + addLayerWMS(layer, position, exportOptions) @@ -1444,7 +1444,7 @@
  • - addMarker(options) →Object + addMarker(options) → Object @@ -1453,7 +1453,7 @@
  • - addPopup(options, coord, text, popupStyle) →Object + addPopup(options, coord, text, popupStyle) → Object @@ -1489,7 +1489,7 @@
  • - createNavigationControl(options, [position]) →Object + createNavigationControl(options, [position]) → Object @@ -1516,7 +1516,7 @@
  • - _dealStyleMaps(name) →string + _dealStyleMaps(name) → string @@ -1532,9 +1532,9 @@
  • - + - addVectorLayerICGC(url, position, visibleLabel, paintOption) + addVectorLayerICGC(idLayer, layerUrl, options) @@ -1610,7 +1610,7 @@
  • - addGeocoderICGC() →Object + addGeocoderICGC() → Object @@ -1619,7 +1619,7 @@
  • - getStyle() →Object + getStyle() → Object @@ -1628,7 +1628,7 @@
  • - loadImage(urlImage) →image + loadImage(urlImage) → image @@ -1637,7 +1637,7 @@
  • - addImage(imageName, imageData) →image + addImage(imageName, imageData) → image @@ -1646,7 +1646,7 @@
  • - getConfigStyles() →Array + getConfigStyles() → Array @@ -1655,7 +1655,7 @@
  • - getConfigWMSLayers() →Array + getConfigWMSLayers() → Array @@ -1664,7 +1664,7 @@
  • - getConfigOrtoLayers() →Array + getConfigOrtoLayers() → Array @@ -1673,7 +1673,7 @@
  • - getConfigVectorLayers() →Array + getConfigVectorLayers() → Array @@ -1682,7 +1682,7 @@
  • - getConfigVectorAdminLayers() →Array + getConfigVectorAdminLayers() → Array @@ -1691,25 +1691,25 @@
  • - getConfigFGBAdminLayers() →Array + getConfigFGBAdminLayers() → Array
  • - + - fetchData(url, name, position, options) + fetchData(url, name, options)
  • - + - fetchDataAndMenu(url, name, featureTree, position, options) + fetchDataAndMenu(url, name, featureTree, options) @@ -1808,7 +1808,7 @@
  • - getZoom() →number + getZoom() → number @@ -1853,7 +1853,7 @@
  • - getCenter() →LngLat + getCenter() → LngLat @@ -1862,7 +1862,7 @@
  • - setTerrain(options) →Object + setTerrain(options) → Object @@ -1914,9 +1914,9 @@
  • - + - addLayerWMS(layer, position) + addLayerWMS(layer, position, exportOptions) @@ -2015,7 +2015,7 @@
  • - addMarker(options) →Object + addMarker(options) → Object @@ -2024,7 +2024,7 @@
  • - addPopup(options, coord, text, popupStyle) →Object + addPopup(options, coord, text, popupStyle) → Object @@ -2060,7 +2060,7 @@
  • - createNavigationControl(options, [position]) →Object + createNavigationControl(options, [position]) → Object @@ -2087,7 +2087,7 @@
  • - _dealStyleMaps(name) →string + _dealStyleMaps(name) → string @@ -2103,9 +2103,9 @@
  • - + - addVectorLayerICGC(url, position, visibleLabel, paintOption) + addVectorLayerICGC(idLayer, layerUrl, options) @@ -2159,20 +2159,20 @@

    3.1 Funcions

    -

    addGeocoderICGC() →Object

    +

    addGeocoderICGC() → Object

    Add geocoder.

    Kind: global function
    Returns: Object - - The current position of the search result.

    -

    getStyle() →Object

    +

    getStyle() → Object

    Retrieves the current style of the map.

    Kind: global function
    Returns: Object - - The current style of the map.

    -

    loadImage(urlImage) →image

    +

    loadImage(urlImage) → image

    Load image to layer symbol as icon-image.

    Kind: global function
    -Returns: image - - The image.

    +Returns: image - - The image.

  • @@ -2190,10 +2190,10 @@

    loadImage(urlImage) →image

    -

    addImage(imageName, imageData) →image

    +

    addImage(imageName, imageData) → image

    Add image to mapstyle.

    Kind: global function
    -Returns: image - - The image.

    +Returns: image - - The image.

    @@ -2216,39 +2216,39 @@

    addImage(imageName, imageData) →

    -

    getConfigStyles() →Array

    +

    getConfigStyles() → Array

    Retrieves the available base styles from default options.

    Kind: global function
    Returns: Array - - Array containing the names of available base styles.

    -

    getConfigWMSLayers() →Array

    +

    getConfigWMSLayers() → Array

    Retrieves the available WMS image layers from default options.

    Kind: global function
    Returns: Array - - Array containing the keys of available WMS image layers.

    -

    getConfigOrtoLayers() →Array

    +

    getConfigOrtoLayers() → Array

    Retrieves the available orto image layers from default options.

    Kind: global function
    Returns: Array - - Array containing the keys of available image layers.

    -

    getConfigVectorLayers() →Array

    +

    getConfigVectorLayers() → Array

    Retrieves the available vector layers from default options.

    Kind: global function
    Returns: Array - - Array containing the keys of available vector layers.

    -

    getConfigVectorAdminLayers() →Array

    +

    getConfigVectorAdminLayers() → Array

    Retrieves the available vector layers from default options.

    Kind: global function
    Returns: Array - - Array containing the keys of available vectorAdmin layers.

    -

    getConfigFGBAdminLayers() →Array

    +

    getConfigFGBAdminLayers() → Array

    Retrieves the available fgb layers from default options.

    Kind: global function
    Returns: Array - - Array containing the keys of available fgbadmin layers.

    -

    fetchData(url, name, position, options)

    +

    fetchData(url, name, options)

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2269,11 +2269,6 @@

    fetchData(url, name, position, optio

    - - - - - @@ -2281,9 +2276,9 @@

    fetchData(url, name, position, optio

    The geometry name (e.g., 'buildings').
    positionstringPosition of the layer: 'top', below 'labels' or below 'lines'.
    options Object Additional options for configuring the layer.

    -

    fetchDataAndMenu(url, name, featureTree, position, options)

    +

    fetchDataAndMenu(url, name, featureTree, options)

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type and adds to the Menu as a checkbox item.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2309,11 +2304,6 @@

    fetchDataAndMenu(

    - - - - - @@ -2323,7 +2313,7 @@

    fetchDataAndMenu(

    on(type, func)

    Adds an event listener to the map.

    -

    Kind: global function

    +

    Kind: global function

    Import all features as unique or group based on a field ('all', 'field').
    positionstringPosition of the layer: 'top', below 'labels' or below 'lines'.
    options Object Additional options for configuring the layer.
    @@ -2348,7 +2338,7 @@

    on(type, func)

    getSource(source)

    Retrieves the specified source from the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2368,7 +2358,7 @@

    getSource(source)

    addSource(source, options)

    Adds a source to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2393,7 +2383,7 @@

    addSource(source, options)

    setStyle(style, [options])

    Sets the style of the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2418,7 +2408,7 @@

    setStyle(style, [options])

    getLayer(layerId)

    Retrieves the layer with the specified ID from the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2438,7 +2428,7 @@

    getLayer(layerId)

    setFilter(layerId, filter, options)

    Set filter for specified style layer.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2468,7 +2458,7 @@

    setFilter(layerId, filter, options)

    jumpTo(options)

    Jumps to the specified coordinates and zoom on the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2488,7 +2478,7 @@

    jumpTo(options)

    setLayoutProperty(object, property, value)

    Sets layout property for a layer on the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2518,7 +2508,7 @@

    setLayoutProperty(object, proper

    setPaintProperty(object, property, value)

    Sets layout property for a layer on the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2548,7 +2538,7 @@

    setPaintProperty(object, property

    addControl(control, [position])

    Adds a control to the map with the specified position.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2574,14 +2564,14 @@

    addControl(control, [position])

    -

    getZoom() →number

    +

    getZoom() → number

    Retrieves the current zoom level of the map.

    Kind: global function
    Returns: number - - The current zoom level.

    addMouseCoordControl([position])

    Adds a mouse coordinate control to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2621,7 +2611,7 @@

    addMouseCoordControl([position])

    addGeolocateControl(options, [position])

    Adds a geolocate control to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2649,7 +2639,7 @@

    addGeolocateControl(options, [posit

    addFullscreenControl(options, [position])

    Adds a fullscreen control to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2679,15 +2669,15 @@

    getBounds()

    Retrieves the bounds of the map.

    Kind: global function

    -

    getCenter() →LngLat

    +

    getCenter() → LngLat

    Retrieves the center coordinates of the map.

    Kind: global function
    Returns: LngLat - - The center coordinates of the map.

    -

    setTerrain(options) →Object

    +

    setTerrain(options) → Object

    Sets terrain options for the map.

    Kind: global function
    -Returns: Object - - Result of setting the terrain options.

    +Returns: Object - - Result of setting the terrain options.

    @@ -2707,7 +2697,7 @@

    setTerrain(options) →Object

    setLayerZoomRange(layerId, minZoom, maxZoom)

    Sets the zoom range for a specific layer on the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2741,7 +2731,7 @@

    getCanvas()

    setCenter(coordinates)

    Sets the center of the map to the provided coordinates.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2761,7 +2751,7 @@

    setCenter(coordinates)

    addLayer(layer, layerIdOrder)

    Adds a layer to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2786,7 +2776,7 @@

    addLayer(layer, layerIdOrder)

    addLayerGeoJSON(layer, position)

    Adds a GeoJSON layer to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2839,9 +2829,9 @@

    addLayerGeoJSON(layer, position)

    -

    addLayerWMS(layer, position)

    +

    addLayerWMS(layer, position, exportOptions)

    Adds a WMS layer to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2876,12 +2866,17 @@

    addLayerWMS(layer, position)

    + + + + +
    string Position of the layer: 'top', below 'labels' or below 'lines'.
    exportOptionsObjectOptions of the layer: type, layout, paint.

    removeControl(control)

    Removes a control from the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2901,7 +2896,7 @@

    removeControl(control)

    removeLayer(layerId)

    Removes a layer from the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2921,7 +2916,7 @@

    removeLayer(layerId)

    removeSource(layerId)

    Removes a source from the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2941,7 +2936,7 @@

    removeSource(layerId)

    addLogo(options, position)

    Adds a logo to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -2986,7 +2981,7 @@

    addLogo(options, position)

    addBasemapsICGC(basesArray)

    Adds base layers to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3006,7 +3001,7 @@

    addBasemapsICGC(basesArray)

    addBasemaps(baseLayers)

    Adds base layers to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3041,7 +3036,7 @@

    addBasemaps(baseLayers)

    addFeatureQuery(layerName, options, popupStyle)

    Adds feature query function to a layer.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3070,9 +3065,11 @@

    addFeatureQuery(layerName,

    addScaleControl(options, position)

    -

    Adds a scale control to the map. - * @function addScaleControl

    -

    Kind: global function

    +

    Adds a scale control to the map.

    + +

    Kind: global function

    @@ -3097,7 +3094,7 @@

    addScaleControl(options, position)

    addExportControl(options, [position])

    Adds an export control to the map with the provided options and position.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3122,7 +3119,7 @@

    addExportControl(options, [position])<

    addPopup(coordinates, text)

    Adds a popup to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3145,10 +3142,10 @@

    addPopup(coordinates, text)

    -

    addMarker(options) →Object

    +

    addMarker(options) → Object

    Adds a marker to the map.

    Kind: global function
    -Returns: Object - - Instance of the added marker.

    +Returns: Object - - Instance of the added marker.

    @@ -3186,10 +3183,10 @@

    addMarker(options) →Object

    -

    addPopup(options, coord, text, popupStyle) →Object

    +

    addPopup(options, coord, text, popupStyle) → Object

    Adds a popup to the map.

    Kind: global function
    -Returns: Object - - Instance of the added popup.

    +Returns: Object - - Instance of the added popup.

    @@ -3224,7 +3221,7 @@

    addPopup(options, coord, t

    addFullScreen([position])

    Adds a fullscreen control to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3246,7 +3243,7 @@

    addFullScreen([position])

    addMenuItem(name)

    Adds a menu item with a checkbox for controlling the visibility of a layer on the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3266,7 +3263,7 @@

    addMenuItem(name)

    addLayerTree(options)

    Adds a layer tree to the map.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3299,10 +3296,10 @@

    addLayerTree(options)

    -

    createNavigationControl(options, [position]) →Object

    +

    createNavigationControl(options, [position]) → Object

    Creates a navigation control with the provided options.

    Kind: global function
    -Returns: Object - - Instance of the created navigation control.

    +Returns: Object - - Instance of the created navigation control.

    @@ -3330,7 +3327,7 @@

    createNavigationControl(

    addNavigationControl(options, [position])

    Adds a navigation control to the map with the provided options.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3358,7 +3355,7 @@

    addNavigationControl(options, [pos

    addAttributionControl(options, [position])

    Adds an attribution control to the map with the provided options.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3384,10 +3381,10 @@

    addAttributionControl(options, [p

    -

    _dealStyleMaps(name) →string

    +

    _dealStyleMaps(name) → string

    Internal method to handle map styles.

    Kind: global function
    -Returns: string - - URL of the map style.

    +Returns: string - - URL of the map style.

    @@ -3407,7 +3404,7 @@

    _dealStyleMaps(name) →string

    addImageLayerICGC(name)

    Adds an ICGC image layer to the map based on the specified name and year.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3420,14 +3417,14 @@

    addImageLayerICGC(name)

    - +
    name stringThe name of the layer. Mandatory. options: 'orto', 'geo', 'slope', 'dem', 'relleu', etc.The url of the layer.

    -

    addVectorLayerICGC(url, position, visibleLabel, paintOption)

    +

    addVectorLayerICGC(idLayer, layerUrl, options)

    Adds an ICGC vector layer to the map based on the specified name and year.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3438,31 +3435,26 @@

    addVectorLayerI

    - + - + - + - - - - - - + - + - +
    urlidLayer stringThe url of the vector layer.The user id for the vector layer.
    positionlayerUrl stringPosition of the layer: 'top', below 'labels' or below 'lines'.
    visibleLabelstringVisibility of the label ("visible" / "none").The url of the vector layer.
    paintOptionoptions objectPaint option for the layerType, position,layout and paint options for the layer

    addFGBLayerICGC(url, visibleLabel, paintOption)

    Adds an ICGC FGB layer to the map based on the specified name and year.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3492,7 +3484,7 @@

    addFGBLayerICGC(url, visibl

    addTerrainICGC(resolution, [positionButton])

    Adds 3D terrain to the map using hillshade.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3520,7 +3512,7 @@

    addTerrainICGC(resolution, [pos

    addLegend(name)

    Adds 3D terrain to the map using hillshade.

    -

    Kind: global function

    +

    Kind: global function

    @@ -3533,7 +3525,7 @@

    addLegend(name)

    - +
    name stringname of the layer legend to add.name of the layer legend to add.
    diff --git a/4.1.Versio/index.html b/4.1.Versio/index.html index 51606ac..2d2adf7 100755 --- a/4.1.Versio/index.html +++ b/4.1.Versio/index.html @@ -18,7 +18,7 @@ - + diff --git a/404.html b/404.html index a735385..c51d163 100755 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@ - + diff --git a/index.html b/index.html index 79ecec8..2a4f471 100755 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - + diff --git a/search/search_index.json b/search/search_index.json index 5030b75..33e328e 100755 --- a/search/search_index.json +++ b/search/search_index.json @@ -1 +1 @@ -{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"MapICGC-gl-js","text":"

    La biblioteca MapICGC GL JS, creada com a envoltori de MapLibreGL, ofereix noves funcions espec\u00edfiques en un entorn ICGC. Simplifica el desenvolupament integrant caracter\u00edstiques com tessel\u00b7les vectorials i imatges satel\u00b7litals, i incorpora de manera inmediata estils, terrenys i dades ICGC. Proporciona funcions documentades per a la creaci\u00f3 d'un visor complet i totalment personalitzable.

    "},{"location":"#que-es","title":"Qu\u00e8 \u00e9s?","text":"

    La llibreria MapICGC GL JS, basada en Maplibre GL, \u00e9s una eina desenvolupada per l'Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya (ICGC) per millorar la cartografia web i proporcionar una soluci\u00f3 integrada als desenvolupadors. Permet accedir f\u00e0cilment a dades geoespacials de l'ICGC, com ara tessel\u00b7les vectorials, imatges satel\u00b7litals i models d'elevaci\u00f3 del terreny, facilitant la creaci\u00f3 de visors web personalitzats. A m\u00e9s, ofereix funcions per a la gesti\u00f3 de dades en temps d'execuci\u00f3, com geocodificaci\u00f3 i geolocalitzaci\u00f3, i el seu disseny modular permet la seva aplicaci\u00f3 en una \u00e0mplia gamma de projectes de cartografia i gesti\u00f3 de recursos.

    "},{"location":"#com-funciona","title":"Com funciona?","text":"

    La biblioteca MapICGC GL JS funciona integrant funcionalitats de Maplibre GL i proporcionant acc\u00e9s a dades geoespacials de l'Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya (ICGC). Per integrar-ho al teu projecte, nom\u00e8s cal instal\u00b7lar la llibreria mitjan\u00e7ant npm o integrar-la a trav\u00e9s de CDN.

    "},{"location":"#installacio","title":"Instal\u00b7laci\u00f3","text":""},{"location":"#exemples","title":"Exemples","text":""},{"location":"#documentacio","title":"Documentaci\u00f3","text":""},{"location":"#llicencia","title":"Llic\u00e8ncia","text":""},{"location":"#versionat","title":"Versionat","text":""},{"location":"#autor-i-contacte","title":"Autor i contacte","text":"

    Unitat Geostart, Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya.

    "},{"location":"1.1.Inst_npm/","title":"1.1 Instal\u00b7laci\u00f3 via NPM","text":""},{"location":"1.1.Inst_npm/#installacio-amb-npm","title":"Instal\u00b7laci\u00f3 amb NPM","text":"

    Si utilitzes npm (Node Package Manager) per gestionar les depend\u00e8ncies del teu projecte, segueix aquests passos:

    1.Obre la teva terminal i navega fins al directori del teu projecte.

    2.Executa la seg\u00fcent comanda per instal\u00b7lar mapicgc-gl-js:

    npm install mapicgc-gl-js\n
    Aix\u00f2 descarregar\u00e0 i instal\u00b7lar\u00e0 la llibreria al teu projecte.

    3.Un cop completada la instal\u00b7laci\u00f3, pots importar la llibreria al teu codi:

     const llibreria = require('mapicgc-gl-js'); //ES6\n

    o

      import * as mapicgcgl from \"mapicgc-gl-js\"\n

    Ara est\u00e0s llest per comen\u00e7ar a utilitzar mapicgc-gl-js, seguint l'exemple seg\u00fcent:

    <script>\n  import { Map, Styles } from \"mapicgc-gl-js\";\n  //import * as mapicgc from  \"mapicgc-gl-js\" ****;\n  const map = new Map({\n    container: \"map\",\n    style: Styles.LIGHT, // or mapicgc.Styles.LIGHT ****\n    hash: true,\n    center: [2.1282, 41.45],\n    pitch: 0,\n    maxZoom: 20,\n    zoom: 8,\n\n    bearing: 0,\n  });\n</script>\n
    "},{"location":"1.2.Inst_cdn/","title":"1.2 Instal\u00b7laci\u00f3 via CDN","text":""},{"location":"1.2.Inst_cdn/#installacio-amb-cdn","title":"Instal\u00b7laci\u00f3 amb CDN","text":"

    Si prefereixes utilitzar un CDN per incorporar la llibreria al teu projecte, pots seguir aquests passos:

    1.Obre la teva terminal i navega fins al directori del teu projecte.

    2.Afegir la l\u00ednia seg\u00fcent al teu fitxer HTML, generalment col\u00b7locada dins la secci\u00f3 <head>:

    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n<link\n  href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n  rel=\"stylesheet\"\n/>\n

    Aix\u00f2 carregar\u00e0 la llibreria directament des del CDN. Ara est\u00e0s llest per utilitzar mapicgc-gl-js al teu projecte seguint l'exemple seg\u00fcent:

    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple llibreria mapicgc-gl-js</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n\n      });\n    </script>\n  </body>\n</html>\n

    See the Pen example-map-001 by unitatgeostart (@unitatgeostart) on CodePen.

    "},{"location":"2.1.0.Map/","title":"2.1 Crear mapa i afegir estil","text":""},{"location":"2.1.0.Map/#exemple","title":"Exemple","text":"

    .Map(options) \u2192 mateixes opcions que a MapLibreGLJS

    See the Pen example Map by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.0.Map/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Mapa</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.addFullscreenControl();\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.0.Map/#estils-icgc","title":"Estils ICGC","text":""},{"location":"2.1.0.Map/#stylesid","title":"Styles.{id}","text":"id Mostra TOPO ORTO ORTO3D (versi\u00f3 experimental) ADMIN DARK LIGHT GEOLOGY"},{"location":"2.1.1.AddTerrain/","title":"2.1.1.AddTerrain","text":""},{"location":"2.1.1.AddTerrain/#exemple","title":"Exemple","text":"

    .addTerrain(resolution, position)

    See the Pen Exemple addTerrain by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.1.AddTerrain/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir 3D</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [0.959, 42.201],\n        zoom: 13,\n        maxZoom: 19,\n        hash: true,\n        pitch: 80,\n        bearing: 40,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addSource(\"terrainSource\", {\n          type: \"raster\",\n          url: \"https://demotiles.maplibre.org/terrain-      tiles/tiles.json\",\n          tileSize: 256,\n          maxzoom: 19,\n        });\n        map.setTerrain({\n          source: \"terrainSource\",\n          exaggeration: 2.5,\n        });\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.2.AddICGCTerrain/","title":"2.2 Afegir terreny","text":""},{"location":"2.1.2.AddICGCTerrain/#exemple","title":"Exemple","text":"

    .addTerrainICGC(resolution, position)

    See the Pen addTerrainICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.2.AddICGCTerrain/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir 3D de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [0.959, 42.201],\n        zoom: 13,\n        maxZoom: 19,\n        hash: true,\n        pitch: 80,\n        bearing: 40,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, \"bottom-right\");\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.2.AddICGCTerrain/#terrenys-icgc","title":"Terrenys ICGC","text":""},{"location":"2.1.2.AddICGCTerrain/#terrainsid","title":"Terrains.{id}","text":"id Resoluci\u00f3 / Extensi\u00f3 ICGC5M 5m / Catalunya WORLD30M 30m / World"},{"location":"2.1.3.3dStyle/","title":"2.3 Afegir estil ORTO3D","text":""},{"location":"2.1.3.3dStyle/#exemple","title":"Exemple","text":"

    .Map({style: mapicgcgl.Styles.ORTO3D})

    See the Pen example Map 3D by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.3.3dStyle/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: estil ORTO3D</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO3D,\n        center: [2.309, 41.98],\n        zoom: 18,\n        maxZoom: 19,\n        hash: true,\n        bearing: 45,\n      });\n      map.addFullscreenControl();\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.3.3dStyle/#estils-icgc","title":"Estils ICGC","text":""},{"location":"2.1.3.3dStyle/#stylesid","title":"Styles.{id}","text":"id Mostra TOPO ORTO ORTO3D (versi\u00f3 experimental) ADMIN DARK LIGHT GEOLOGY"},{"location":"2.10.AddLogo/","title":"2.12 Afegir logo","text":""},{"location":"2.10.AddLogo/#exemple","title":"Exemple","text":"

    .addLogo(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.10.AddLogo/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir logo</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      #logos {\n       display: flex;\n    flex-direction: row;\n    bottom: 40%;\n    position: absolute;\n    right:50%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <div id=\"logos\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      let options = {\n        id: \"icgcColorLogo\",\n        url: \"https://tilemaps.icgc.cat/cdn/images/grumpyCatTest.png\",\n        href: \"https://www.icgc.cat\",\n        height: '100px'\n      };\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addLogo(options);  //pots canviar la posici\u00f3 del/s logo/s al css\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.11.FetchData/","title":"2.13 Fetch dades","text":""},{"location":"2.11.FetchData/#exemple","title":"Exemple","text":"

    .fetchData(url, name, position, options)

    \ud83d\udccc Format de dades: geojson o flatgeobuf

    See the Pen Exemple fetchData by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.11.FetchData/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Fetch dades</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.LIGHT,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      let paintOptions = {\n        \"line-color\": \"green\",\n        \"line-width\": 3,\n        \"line-opacity\": 1,\n      };\n      let paintOptionsfgb = {\n        \"line-color\": \"grey\",\n        \"line-width\": 2,\n      };\n      let layerPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n\n      map.on(\"load\", () => {\n\n        map.addFullscreenControl();\n\n        // geojson\n        map.fetchData(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          layerPosition,\n          paintOptions\n        );\n\n        // ICGC FGB data:\n        map.fetchData(\n          mapicgcgl.Layers.FGBAdmin.comarquesVigent,\n          \"Comarques\",\n          layerPosition,\n          paintOptionsfgb\n        );\n\n        // external FGB data:\n        map.fetchData(\n          \"https://flatgeobuf.org/test/data/UScounties.fgb\",\n          \"UScounties\",\n          layerPosition\n        );\n\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.11.FetchData/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.11.FetchData/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.11.FetchData/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.12.FetchDataAndMenu/","title":"2.14 Fetch dades i crea men\u00fa","text":""},{"location":"2.12.FetchDataAndMenu/#exemple","title":"Exemple","text":"

    .fetchDataAndMenu(url, name, filterField, layerPosition, paintOptions)

    \ud83d\udccc Format de dades: geojson o flatgeobuf

    See the Pen Exemple fetchData by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.12.FetchDataAndMenu/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Fetch dades</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.LIGHT,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      let layerPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n      let filterField = \"municipi\"; // select 'all' for view all the features as a single layer\n      let paintOptions = {\n        \"line-color\": \"green\",\n        \"line-width\": 3,\n        \"line-opacity\": 1,\n      };\n      let filterFGBField = \"NOMPROV\"; // select 'all' for view all the features as a single layer\n      let paintOptionsfgb = {\n        \"fill-color\": \"blue\",\n        \"fill-opacity\": 0.6,\n      };\n\n      map.on(\"load\", () => {\n\n        map.addFullscreenControl();\n\n        //geojson\n        map.fetchDataAndMenu(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          filterField,\n          layerPosition,\n          paintOptions\n        );\n\n        //ICGC FGB data:\n        map.fetchDataAndMenu(\n         mapicgcgl.Layers.FGBAdmin.provinciesVigent,\n        \"Provincies\", filterFGBField, layerPosition, paintOptionsfgb);\n\n        //external FGB data:\n        map.fetchDataAndMenu(\n         \"https://flatgeobuf.org/test/data/UScounties.fgb\",\n        \"UScounties\", 'all', layerPosition, paintOptionsfgb);\n\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.12.FetchDataAndMenu/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.12.FetchDataAndMenu/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.12.FetchDataAndMenu/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.13.AddFeatureQuery/","title":"2.15 Consulta d'elements","text":""},{"location":"2.13.AddFeatureQuery/#exemple","title":"Exemple","text":"

    .addFeatureQuery(layer, queryFields, popupStyle)

    Retorna informaci\u00f3 al fer clic sobre un element

    See the Pen Exemple Consulta d'elements by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.13.AddFeatureQuery/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Consulta d'elements</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n\n        map.addFullscreenControl();\n\n        let paintOptions = {\n          \"line-color\": \"red\",\n          \"line-width\": 2,\n          \"line-opacity\": 0.5,\n        };\n\n        map.fetchData(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          paintOptions\n        );\n\n        // si volem camps espec\u00edfics:\n        // let queryFields = [\"nom\", \"municipi\"];\n\n        // si volem tots els camps:\n        let queryFields = [];\n\n        let popupStyle = {\n          title: \"Rutes:\",\n          image: \"https://tilemaps.icgc.cat/cdn/logos/icgc_logo_color.png\", //opcional\n        };\n        map.addFeatureQuery(\"RutesMontserrat\", queryFields, popupStyle);\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.14.AddGeocoderICGC/","title":"2.16 Afegir geocodificador ICGC","text":""},{"location":"2.14.AddGeocoderICGC/#exemple","title":"Exemple","text":"

    .addGeocoderICGC()

    See the Pen Exemple geocodificador by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.14.AddGeocoderICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Geocodificador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.8436, 41.5923],\n        zoom: 11,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addGeocoderICGC();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.2.AddBasemap/","title":"2.4 Afegir control d'estil","text":""},{"location":"2.2.AddBasemap/#exemple","title":"Exemple","text":"

    .addBasemapsICGC(baseLayers)

    See the Pen addBasemapsICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.2.AddBasemap/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir mapa base ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <div id=\"basemap-group\" class=\"basemap-group\"></div>\n    <script>\n      // add basemap\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO, // <-- add style basemap here\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        //add multiple ICGC basemaps and get a style menu component\n        map.addFullscreenControl();\n        let basemapsicgc = [mapicgcgl.Styles.ORTO, mapicgcgl.Styles.TOPO];\n        map.addBasemapsICGC(basemapsicgc);\n      });\n      //If you need to add basemaps from other sources, please follow the structure for each object\n      //   let baseLayers = [\n      //     {\n      //       id: 0,\n      //       value: \"Mapa est\u00e0ndard\",\n      //       label: \"icgc_mapa_estandard_general\",\n      //        url: \"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json\",\n      // image: \"https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_estandard.png\",\n      //     },\n      //     {\n      //       id: 1,\n      //       value: \"Ortofotomapa h\u00edbrid\",\n      //       label: \"icgc_orto_hibrida\",\n      //         url: \"https://geoserveis.icgc.cat/contextmaps/icgc_orto_hibrida.json\",\n      // image: \"https://visors.icgc.cat/contextmaps/imatges_estil/icgc_orto_hibrida.png\",\n      //     },\n      //   ];\n      //   map.addBasemaps(baseLayers);\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.20.AdvancedExample/","title":"2.17 Exemple visor","text":""},{"location":"2.20.AdvancedExample/#exemple","title":"Exemple","text":"

    See the Pen Exemple by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.20.AdvancedExample/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple avan\u00e7at mapicgc-gl-js</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      map.on(\"load\", () => {\n        //GEOCODER\n        map.addGeocoderICGC();\n        //CONTROLS\n        map.addGeolocateControl(\n          {\n            positionOptions: {\n              enableHighAccuracy: true,\n            },\n            trackUserLocation: true,\n          },\n          \"bottom-right\"\n        );\n        map.addExportControl();\n        map.addFullscreenControl({},'top-right');\n\n        //addLogo\n        let options = {\n          id: \"icgcColorLogo\",\n          url: \"https://betaserver.icgc.cat/logos/ICGC_color_norma.svg\",\n          href: \"https://www.icgc.cat\",\n        };\n\n        // map.addLogo(options);\n\n        //add Terrain\n        map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, \"bottom-right\");\n        //add image layer\n        let layerImagePosition = \"top\"; // select: 'top', 'lines' or 'labels'\n        map.addImageLayerICGC(\n          mapicgcgl.Layers.Orto.ortofotoColor2013,\n          layerImagePosition\n        );\n\n        //add vector icgc\n        let labelVisibility = \"visible\"; // select : \"visible\" or \"none\"\n        let paintOptionsVector = {\n          \"line-color\": \"black\",\n          \"line-width\": 1,\n        };\n        let layerVectorPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n\n        map.addVectorLayerICGC(\n          mapicgcgl.Layers.VectorAdmin.comarques2022,\n          layerVectorPosition,\n          labelVisibility,\n          paintOptionsVector\n        );\n\n        //\n        let paintOptions = {\n          \"line-color\": \"yellow\",\n          \"line-width\": 2,\n        };\n        let layerPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n        let filterField = \"municipi\"; // select 'all' for view all the features as a single layer\n\n        setTimeout(() => {\n          map.addFullscreenControl();\n          map.fetchDataAndMenu(\n            \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n            \"RutesMontserrat\",\n            filterField,\n            layerPosition,\n            paintOptions\n          );\n\n          // let queryFields = [\"nom\", \"municipi\"];\n          // map.addFeatureQuery(\"RutesMontserrat\", queryFields);\n          let popupStyle = {\n            title: \"Informaci\u00f3:\",\n            image: \"https://tilemaps.icgc.cat/cdn/logos/gencat_logo_color.png\",\n          };\n          let queryFields = [];\n          map.addFeatureQuery(\"RutesMontserrat\", queryFields, popupStyle);\n        }, 1000);\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.3.AddImageLayerICGC/","title":"2.5 Afegir capa d'imatge ICGC","text":""},{"location":"2.3.AddImageLayerICGC/#exemple","title":"Exemple","text":"

    .addImageLayerICGC(layer, position)

    See the Pen Exemple addImageLayerICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.3.AddImageLayerICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa imatge ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        let layerPosition = \"labels\";\n\n        map.addImageLayerICGC(\n          mapicgcgl.Layers.Orto.ortofotoColor2013,\n          layerPosition\n        );\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.3.AddImageLayerICGC/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.3.AddImageLayerICGC/#capes-dimatge-icgc","title":"Capes d'imatge ICGC","text":""},{"location":"2.3.AddImageLayerICGC/#layersortoid","title":"Layers.Orto.{id}","text":"id ortofotoColorProvisional ortofotoColor2022 ortofotoColor2021 ortofotoColor2020 ortofotoColor2019 ortofotoColor2018 ortofotoColor2017 ortofotoColor2016 ortofotoColor2015 ortofotoColor2014 ortofotoColor2013 ortofotoColor2012 ortofotoColor2011 ortofotoColor2010 ortofotoColor2009 ortofotoColor2008 ortofotoColor20062007 ortofotoColor20042005 ortofotoColor20002003 ortofotoBlancINegre1998 ortofotoBlancINegre19941997 ortofotoColor1993 ortofotoBlancINegre19831992 ortofotoBlancINegre19701977 ortofotoBlancINegre1956 ortofotoBlancINegre1945 ortofotoColorSerieAnual ortofotoInfraroigProvisional ortofotoInfraroig2022 ortofotoInfraroig2021 ortofotoInfraroig2020 ortofotoInfraroig2019 ortofotoInfraroig2018 ortofotoInfraroig2017 ortofotoInfraroig2016 ortofotoInfraroig2015 ortofotoInfraroig2014 ortofotoInfraroig2013 ortofotoInfraroig2012 ortofotoInfraroig2011 ortofotoInfraroig2010 ortofotoInfraroig2009 ortofotoInfraroig2008 ortofotoInfraroig20062007 ortofotoInfraroig19961997 ortofotoInfraroigSerieAnual"},{"location":"2.3.AddImageLayerICGC/#layerswmsid","title":"Layers.WMS.{id}","text":"id espaisInteresGeologic gravimetriaBouguer500000 cobertesSol2018 administratiu simplificat cims"},{"location":"2.4.AddVectorLayerFGBICGC/","title":"2.4.AddVectorLayerFGBICGC","text":""},{"location":"2.4.AddVectorLayerFGBICGC/#exemple","title":"Exemple","text":"

    \ud83d\udccc Format de dades: Flatgeobuf

    .addFGBLayerICGC(layer, labelVisibility, paintOption)

    See the Pen Exemple addFGBLayerICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.4.AddVectorLayerFGBICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa fgb de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        let labelVisibility = \"visible\"; // select : \"visible\" or \"none\"\n        let paintOptions = {\n          \"line-color\": \"green\",\n          \"line-width\": 2,\n        };\n        map.addFullscreenControl({},'top-right');\n        map.addFGBLayerICGC(\n          mapicgcgl.Layers.FGBAdmin.comarquesVigent,\n          labelVisibility,\n          paintOptions\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.4.AddVectorLayerFGBICGC/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.4.AddVectorLayerFGBICGC/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.4.AddVectorLayerICGC/","title":"2.6 Afegir capa vector ICGC","text":""},{"location":"2.4.AddVectorLayerICGC/#exemple","title":"Exemple","text":"

    .addVectorLayerICGC(layer,position, labelVisibility,paintOption)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.4.AddVectorLayerICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa vector de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n\n        let layerPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n        let labelVisibility = \"visible\"; // visible or none\n        let paintOptions = {\n          \"line-color\": \"black\",\n          \"line-width\": 1,\n        };\n\n        map.addVectorLayerICGC(\n                    mapicgcgl.Layers.Vector.cobertes2018, layerPosition\n                );\n\n        map.addVectorLayerICGC(\n          mapicgcgl.Layers.VectorAdmin.comarques2022,\n          layerPosition,\n          labelVisibility,\n          paintOptions\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.4.AddVectorLayerICGC/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.4.AddVectorLayerICGC/#capes-vector-icgc","title":"Capes vector ICGC","text":""},{"location":"2.4.AddVectorLayerICGC/#layersvectoradminid","title":"Layers.VectorAdmin.{id}","text":"id agrupacionsCensals2015 agrupacionsCensals2016 agrupacionsCensals2017 agrupacionsCensals2018 agrupacionsCensals2019 agrupacionsCensals2020 agrupacionsCensals2021 agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicials2019 areesBasiquesPolicials2020 areesBasiquesPolicials2022 areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesSalutVigent areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarques2022 comarquesVigent comarquesVigentText districtesCensals2015 districtesCensals2016 districtesCensals2017 districtesCensals2018 districtesCensals2019 districtesCensals2020 districtesCensals2021 districtesCensals2022 districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipis2022 municipis2022Text municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorial2015 plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensals2015 seccionsCensals2016 seccionsCensals2017 seccionsCensals2018 seccionsCensals2019 seccionsCensals2020 seccionsCensals2021 seccionsCensals2022 seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.4.AddVectorLayerICGC/#layersvectorid","title":"Layers.Vector.{id}","text":"id cobertes2018"},{"location":"2.5.AddLayerGeojson/","title":"2.7 Afegir capa GeoJSON","text":""},{"location":"2.5.AddLayerGeojson/#exemple","title":"Exemple","text":"

    .addLayerGeoJSON(geojsonLayer, layerPosition)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.5.AddLayerGeojson/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.001, 41.759],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      map.on(\"load\", () => {\n        let geojsonLayer = {\n          id: \"geojsonTest\",\n          data: {\n            type: \"Feature\",\n            geometry: {\n              type: \"Polygon\",\n              coordinates: [\n                [\n                  [1.3119, 41.489],\n                  [1.0119, 41.489],\n                  [1.0119, 42.0489],\n                  [1.3119, 42.0489],\n                ],\n              ],\n            },\n          },\n          layerType: \"fill\",\n          layout: {},\n          paint: {\n            \"fill-color\": \"#088\",\n            \"fill-opacity\": 0.8,\n          },\n        };\n        let layerPosition = 'labels' // select: 'top', 'lines' or 'labels'\n        map.addLayerGeoJSON(geojsonLayer, layerPosition);\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.5.AddLayerGeojson/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.6.AddLayerTree/","title":"2.8 Afegir llistat de capes","text":""},{"location":"2.6.AddLayerTree/#exemple","title":"Exemple","text":"

    .addLayerTree(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.6.AddLayerTree/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir arbre de capes</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"filter-group\" class=\"filter-group\"></nav>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 6.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      let options = {\n        features: {\n          type: \"FeatureCollection\",\n          features: [\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Rub\u00ed\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [2.0119, 41.489],\n              },\n            },\n\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Moi\u00e0\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [2.119, 41.87],\n              },\n            },\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Les Borges Blanques\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [0.97319, 41.4589],\n              },\n            },\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Berga\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [1.83, 42.163],\n              },\n            },\n          ],\n        },\n        id: \"testLayer\",\n        type: \"geojson\",\n      };\n      map.on(\"load\", () => {\n        map.addLayerTree(options);\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.7.AddMarker/","title":"2.9 Afegir marker","text":""},{"location":"2.7.AddMarker/#exemple","title":"Exemple","text":"

    .addmarker(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.7.AddMarker/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir marcador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      let optionsMarker = {\n        coord: [2.119, 41.87],\n        text: \"Hola Test\",\n        textOffset: 25,\n        options: {},\n      };\n      map.on(\"load\", () => {\n        map.addMarker(optionsMarker);\n        map.addFullscreenControl({},'top-right');\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.8.AddControl/","title":"2.10 Afegir control","text":""},{"location":"2.8.AddControl/#exemple","title":"Exemple","text":"

    .addControl(control,position)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.8.AddControl/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir control</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css\"\n    />\n    <script src=\"https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.js\"></script>\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        // mapicgc-gl-js libreria:\n        map.addFullscreenControl({},'top-right');\n        map.addGeolocateControl(\n          {\n            positionOptions: {\n              enableHighAccuracy: true,\n            },\n            trackUserLocation: true,\n          },\n          \"bottom-right\"\n        );\n\n        //control export amb opcions\n        map.addExportControl(\n          {\n            PageSize: Size.A4,\n            PageOrientation: PageOrientation.Landscape,\n            Format: Format.PNG,\n            DPI: DPI[300],\n            Crosshair: true,\n            PrintableArea: true,\n          },\n          \"bottom-right\"\n        );\n        //control export per defecte\n        map.addExportControl();\n\n        // control d'una llibreria externa\n        map.addControl(new maplibregl.NavigationControl(), \"bottom-right\");\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.8.AddControl/#addgeolocatecontroloptions-position","title":"addGeolocateControl(options, position)","text":"
    map.addGeolocateControl(); ; //default version\nmap.addGeolocateControl({ positionOptions: { enableHighAccuracy: true },\ntrackUserLocation: true },\"bottom-right\")\n
    "},{"location":"2.8.AddControl/#addexportcontroloptions-position","title":"addExportControl(options, position)","text":"
    map.addExportControl() ; //default version\nmap.addExportControl({ PageSize: Size.A4,\nPageOrientation:PageOrientation.Landscape, Format: Format.PNG, DPI: DPI[300],\nCrosshair: true, PrintableArea: true, }, \"bottom-right\")\n
    "},{"location":"2.8.AddControl/#addmousecoordcontroloptions-positionbottom-left","title":"addMouseCoordControl(options, position=\"bottom-left\")","text":"
      map.addMouseCoordControl(); //default version\n  map.addMouseCoordControl({width:'225px',utm:true,lonlat:true},\"bottom-left\");\n
    "},{"location":"2.8.AddControl/#addfullscreencontroloptions-position","title":"addFullscreenControl(options, position)","text":"
    map.addFullscreenControl(); //default version\nmap.addFullscreenControl({container: HTMLElement}, 'top-right');\n
    "},{"location":"2.8.AddControl/#addscalecontroloptions-position","title":"addScaleControl(options, position)","text":"
    map.addScaleControl(); //default version\n map.addScaleControl({maxWidth: 100, unit: 'metric' ('imperial', 'metric' or 'nautical')}, \"top-right\");\n
    "},{"location":"2.8.AddControl/#addnavigationcontroloptions-position","title":"addNavigationControl(options, position)","text":"
    map.addNavigationControl(); //default version\n map.addMouseCoordControl({showCompass: true, showZoom: true, visualizePitch: true}, \"top-right\");\n
    "},{"location":"2.8.AddControl/#addattributioncontroloptions-position","title":"addAttributionControl(options, position)","text":"
    map.addAttributionControl(); //default version\nmap.addAttributionControl({compact: true, customAttribution: \"your custom attribution\" }, \"bottom-right\");\n
    "},{"location":"2.9.AddCompare/","title":"2.11 Afegir comparador","text":""},{"location":"2.9.AddCompare/#exemple","title":"Exemple","text":"

    .CompareMaps(options)

    See the Pen CompareMaps by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.9.AddCompare/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir comparador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      .map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"comparison-container\">\n      <div id=\"before\" class=\"map\"></div>\n      <div id=\"after\" class=\"map\"></div>\n    </div>\n\n    <script>\n      const map1 = new mapicgcgl.Map({\n        container: \"before\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [1.1464, 41.706],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      const map2 = new mapicgcgl.Map({\n        container: \"after\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.1464, 41.706],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      var container = \"#comparison-container\";\n\n      var map = new mapicgcgl.CompareMaps(map1, map2, container, {});\n    </script>\n  </body>\n</html>\n
    "},{"location":"3.1.Funcions_doc/","title":"3.1 Funcions","text":""},{"location":"3.1.Funcions_doc/#addgeocodericgc-object","title":"addGeocoderICGC() \u2192Object","text":"

    Add geocoder.

    Kind: global function Returns: Object - - The current position of the search result.

    "},{"location":"3.1.Funcions_doc/#getstyle-object","title":"getStyle() \u2192Object","text":"

    Retrieves the current style of the map.

    Kind: global function Returns: Object - - The current style of the map.

    "},{"location":"3.1.Funcions_doc/#loadimageurlimage-image","title":"loadImage(urlImage) \u2192image","text":"

    Load image to layer symbol as icon-image.

    Kind: global function Returns: image - - The image.

    Param Type Description urlImage string The url image png or jpep.

    "},{"location":"3.1.Funcions_doc/#addimageimagename-imagedata-image","title":"addImage(imageName, imageData) \u2192image","text":"

    Add image to mapstyle.

    Kind: global function Returns: image - - The image.

    Param Type Description imageName string The url image png or jpep. imageData image The image.data from return of loadImage function.

    "},{"location":"3.1.Funcions_doc/#getconfigstyles-array","title":"getConfigStyles() \u2192Array","text":"

    Retrieves the available base styles from default options.

    Kind: global function Returns: Array - - Array containing the names of available base styles.

    "},{"location":"3.1.Funcions_doc/#getconfigwmslayers-array","title":"getConfigWMSLayers() \u2192Array","text":"

    Retrieves the available WMS image layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available WMS image layers.

    "},{"location":"3.1.Funcions_doc/#getconfigortolayers-array","title":"getConfigOrtoLayers() \u2192Array","text":"

    Retrieves the available orto image layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available image layers.

    "},{"location":"3.1.Funcions_doc/#getconfigvectorlayers-array","title":"getConfigVectorLayers() \u2192Array","text":"

    Retrieves the available vector layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available vector layers.

    "},{"location":"3.1.Funcions_doc/#getconfigvectoradminlayers-array","title":"getConfigVectorAdminLayers() \u2192Array","text":"

    Retrieves the available vector layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available vectorAdmin layers.

    "},{"location":"3.1.Funcions_doc/#getconfigfgbadminlayers-array","title":"getConfigFGBAdminLayers() \u2192Array","text":"

    Retrieves the available fgb layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available fgbadmin layers.

    "},{"location":"3.1.Funcions_doc/#fetchdataurl-name-position-options","title":"fetchData(url, name, position, options)","text":"

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type.

    Kind: global function

    Param Type Description url string The URL to fetch GeoJSON data from. name string The geometry name (e.g., 'buildings'). position string Position of the layer: 'top', below 'labels' or below 'lines'. options Object Additional options for configuring the layer.

    "},{"location":"3.1.Funcions_doc/#fetchdataandmenuurl-name-featuretree-position-options","title":"fetchDataAndMenu(url, name, featureTree, position, options)","text":"

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type and adds to the Menu as a checkbox item.

    Kind: global function

    Param Type Description url string The URL to fetch GeoJSON data from. name string The geometry name (e.g., 'buildings'). featureTree string Import all features as unique or group based on a field ('all', 'field'). position string Position of the layer: 'top', below 'labels' or below 'lines'. options Object Additional options for configuring the layer.

    "},{"location":"3.1.Funcions_doc/#ontype-func","title":"on(type, func)","text":"

    Adds an event listener to the map.

    Kind: global function

    Param Type Description type string The type of the event. func function The callback function to be executed when the event occurs.

    "},{"location":"3.1.Funcions_doc/#getsourcesource","title":"getSource(source)","text":"

    Retrieves the specified source from the map.

    Kind: global function

    Param Type Description source string The ID of the source to retrieve.

    "},{"location":"3.1.Funcions_doc/#addsourcesource-options","title":"addSource(source, options)","text":"

    Adds a source to the map.

    Kind: global function

    Param Type Description source string The ID of the source to add. options object The source options.

    "},{"location":"3.1.Funcions_doc/#setstylestyle-options","title":"setStyle(style, [options])","text":"

    Sets the style of the map.

    Kind: global function

    Param Type Description style string Name of the map style. [options] Object Options for setting the style.

    "},{"location":"3.1.Funcions_doc/#getlayerlayerid","title":"getLayer(layerId)","text":"

    Retrieves the layer with the specified ID from the map.

    Kind: global function

    Param Type Description layerId string The ID of the layer to retrieve.

    "},{"location":"3.1.Funcions_doc/#setfilterlayerid-filter-options","title":"setFilter(layerId, filter, options)","text":"

    Set filter for specified style layer.

    Kind: global function

    Param Type Description layerId string The ID of the layer to retrieve. filter array The filter. options string Options object.

    "},{"location":"3.1.Funcions_doc/#jumptooptions","title":"jumpTo(options)","text":"

    Jumps to the specified coordinates and zoom on the map.

    Kind: global function

    Param Type Description options Object Coordinates and options to jump to: { center: [coordx, coordy], zoom: zoom, essential: true }.

    "},{"location":"3.1.Funcions_doc/#setlayoutpropertyobject-property-value","title":"setLayoutProperty(object, property, value)","text":"

    Sets layout property for a layer on the map.

    Kind: global function

    Param Type Description object Object Object containing layer ID. property Object Object containing property to set. value Object Object containing value.

    "},{"location":"3.1.Funcions_doc/#setpaintpropertyobject-property-value","title":"setPaintProperty(object, property, value)","text":"

    Sets layout property for a layer on the map.

    Kind: global function

    Param Type Description object Object Object containing layer ID. property Object Object containing property to set. value Object Object containing value.

    "},{"location":"3.1.Funcions_doc/#addcontrolcontrol-position","title":"addControl(control, [position])","text":"

    Adds a control to the map with the specified position.

    Kind: global function

    Param Type Default Description control Object The control to add. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#getzoom-number","title":"getZoom() \u2192number","text":"

    Retrieves the current zoom level of the map.

    Kind: global function Returns: number - - The current zoom level.

    "},{"location":"3.1.Funcions_doc/#addmousecoordcontrolposition","title":"addMouseCoordControl([position])","text":"

    Adds a mouse coordinate control to the map.

    Kind: global function

    Param Type Default Description options.width Number Width control i. options.utm Boolean Boolean to show coordinates in UTM. options.lonlat Boolean Boolean to show coordinates in Lon Lat. [position] string \"'bottom-left'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addgeolocatecontroloptions-position","title":"addGeolocateControl(options, [position])","text":"

    Adds a geolocate control to the map.

    Kind: global function

    Param Type Default Description options Object Options for the geolocate control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addfullscreencontroloptions-position","title":"addFullscreenControl(options, [position])","text":"

    Adds a fullscreen control to the map.

    Kind: global function

    Param Type Default Description options Object Options for the geolocate control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#getbounds","title":"getBounds()","text":"

    Retrieves the bounds of the map.

    Kind: global function

    "},{"location":"3.1.Funcions_doc/#getcenter-lnglat","title":"getCenter() \u2192LngLat","text":"

    Retrieves the center coordinates of the map.

    Kind: global function Returns: LngLat - - The center coordinates of the map.

    "},{"location":"3.1.Funcions_doc/#setterrainoptions-object","title":"setTerrain(options) \u2192Object","text":"

    Sets terrain options for the map.

    Kind: global function Returns: Object - - Result of setting the terrain options.

    Param Type Description options Object Options for the terrain.

    "},{"location":"3.1.Funcions_doc/#setlayerzoomrangelayerid-minzoom-maxzoom","title":"setLayerZoomRange(layerId, minZoom, maxZoom)","text":"

    Sets the zoom range for a specific layer on the map.

    Kind: global function

    Param Type Description layerId string The ID of the layer to set the zoom range for. minZoom number The minimum zoom level. maxZoom number The maximum zoom level.

    "},{"location":"3.1.Funcions_doc/#getcanvas","title":"getCanvas()","text":"

    Retrieves the canvas of the map.

    Kind: global function

    "},{"location":"3.1.Funcions_doc/#setcentercoordinates","title":"setCenter(coordinates)","text":"

    Sets the center of the map to the provided coordinates.

    Kind: global function

    Param Type Description coordinates Array Coordinates to center the map: [1.3119, 41.489]

    "},{"location":"3.1.Funcions_doc/#addlayerlayer-layeridorder","title":"addLayer(layer, layerIdOrder)","text":"

    Adds a layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the layer to add. layerIdOrder string Optional layer Id draw position.

    "},{"location":"3.1.Funcions_doc/#addlayergeojsonlayer-position","title":"addLayerGeoJSON(layer, position)","text":"

    Adds a GeoJSON layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the GeoJSON layer to add. layer.id string Unique identifier for the layer. layer.type string Type of layer ('geojson'). layer.data Object GeoJSON data for the layer. layer.layerType string Map layer type (e.g., 'symbol', 'circle', 'fill'). layer.layout Object Layer layout configuration. layer.paint Object Layer paint configuration. position string Position of the layer: 'top', below 'labels' or below 'lines'.

    "},{"location":"3.1.Funcions_doc/#addlayerwmslayer-position","title":"addLayerWMS(layer, position)","text":"

    Adds a WMS layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the WMS layer to add. layer.id string Unique identifier for the layer. layer.type string Type of layer ('raster'). layer.tiles Array.<string> Tiles for the raster layer. position string Position of the layer: 'top', below 'labels' or below 'lines'.

    "},{"location":"3.1.Funcions_doc/#removecontrolcontrol","title":"removeControl(control)","text":"

    Removes a control from the map.

    Kind: global function

    Param Type Description control Object The control to remove.

    "},{"location":"3.1.Funcions_doc/#removelayerlayerid","title":"removeLayer(layerId)","text":"

    Removes a layer from the map.

    Kind: global function

    Param Type Description layerId string Identifier of the layer to remove.

    "},{"location":"3.1.Funcions_doc/#removesourcelayerid","title":"removeSource(layerId)","text":"

    Removes a source from the map.

    Kind: global function

    Param Type Description layerId string Identifier of the source to remove.

    "},{"location":"3.1.Funcions_doc/#addlogooptions-position","title":"addLogo(options, position)","text":"

    Adds a logo to the map.

    Kind: global function

    Param Type Description options Object Options for the logo to add. options.id string Unique identifier for the logo. options.url string URL of the logo image. options.href string URL to navigate to when the logo is clicked. options.height string Height of the logo. position string Position of the logo.

    "},{"location":"3.1.Funcions_doc/#addbasemapsicgcbasesarray","title":"addBasemapsICGC(basesArray)","text":"

    Adds base layers to the map.

    Kind: global function

    Param Type Description basesArray Array.<Object> Array of base layer objects.

    "},{"location":"3.1.Funcions_doc/#addbasemapsbaselayers","title":"addBasemaps(baseLayers)","text":"

    Adds base layers to the map.

    Kind: global function

    Param Type Description baseLayers Array.<Object> Array of base layer objects. baseLayers.label string Label for the base layer. baseLayers.image string URL of the image representing the base layer. baseLayers.url string URL of the base layer style.

    "},{"location":"3.1.Funcions_doc/#addfeaturequerylayername-options-popupstyle","title":"addFeatureQuery(layerName, options, popupStyle)","text":"

    Adds feature query function to a layer.

    Kind: global function

    Param Type Description layerName string name of the layer options objetc optional indications for the popup popupStyle objetc optional indications for the popup style

    "},{"location":"3.1.Funcions_doc/#addscalecontroloptions-position","title":"addScaleControl(options, position)","text":"

    Adds a scale control to the map. * @function addScaleControl

    Kind: global function

    Param Type Description options Object Options for configuring the scale control. position string The position on the map to place the scale control (e.g., 'top-left', 'bottom-right').

    "},{"location":"3.1.Funcions_doc/#addexportcontroloptions-position","title":"addExportControl(options, [position])","text":"

    Adds an export control to the map with the provided options and position.

    Kind: global function

    Param Type Description options Object | string Options for the export control or position if provided as a string. [position] string Position to place the export control (e.g., 'top-right').

    "},{"location":"3.1.Funcions_doc/#addpopupcoordinates-text","title":"addPopup(coordinates, text)","text":"

    Adds a popup to the map.

    Kind: global function

    Param Type Description coordinates array Coordinates of the popup . text string Text content for the popup.

    "},{"location":"3.1.Funcions_doc/#addmarkeroptions-object","title":"addMarker(options) \u2192Object","text":"

    Adds a marker to the map.

    Kind: global function Returns: Object - - Instance of the added marker.

    Param Type Description options Object Options for the marker to add. options.text string Text content for the marker popup. options.options Object Marker options. options.coord LngLatLike Coordinates for placing the marker. options.textOffset Object Text offset for the marker popup.

    "},{"location":"3.1.Funcions_doc/#addpopupoptions-coord-text-popupstyle-object","title":"addPopup(options, coord, text, popupStyle) \u2192Object","text":"

    Adds a popup to the map.

    Kind: global function Returns: Object - - Instance of the added popup.

    Param Type Description options Object Options for the popup to add. coord LngLatLike Coordinates for placing the popup. text string HTML content for the popup. popupStyle string css content for the popup style.

    "},{"location":"3.1.Funcions_doc/#addfullscreenposition","title":"addFullScreen([position])","text":"

    Adds a fullscreen control to the map.

    Kind: global function

    Param Type Default Description [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addmenuitemname","title":"addMenuItem(name)","text":"

    Adds a menu item with a checkbox for controlling the visibility of a layer on the map.

    Kind: global function

    Param Type Description name string The name of the layer corresponding to the menu item.

    "},{"location":"3.1.Funcions_doc/#addlayertreeoptions","title":"addLayerTree(options)","text":"

    Adds a layer tree to the map.

    Kind: global function

    Param Type Description options Object Options for the layer tree to add. options.features Object Features for the layer tree. options.id string Unique identifier for the layer tree. options.type string Type of layer tree ('geojson', 'raster', etc.).

    "},{"location":"3.1.Funcions_doc/#createnavigationcontroloptions-position-object","title":"createNavigationControl(options, [position]) \u2192Object","text":"

    Creates a navigation control with the provided options.

    Kind: global function Returns: Object - - Instance of the created navigation control.

    Param Type Default Description options Object Options for the navigation control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addnavigationcontroloptions-position","title":"addNavigationControl(options, [position])","text":"

    Adds a navigation control to the map with the provided options.

    Kind: global function

    Param Type Default Description options Object Options for the navigation control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addattributioncontroloptions-position","title":"addAttributionControl(options, [position])","text":"

    Adds an attribution control to the map with the provided options.

    Kind: global function

    Param Type Default Description options Object Options for the attribution control. [position] string \"'bottom-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#_dealstylemapsname-string","title":"_dealStyleMaps(name) \u2192string","text":"

    Internal method to handle map styles.

    Kind: global function Returns: string - - URL of the map style.

    Param Type Description name string Name of the map style.

    "},{"location":"3.1.Funcions_doc/#addimagelayericgcname","title":"addImageLayerICGC(name)","text":"

    Adds an ICGC image layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description name string The name of the layer. Mandatory. options: 'orto', 'geo', 'slope', 'dem', 'relleu', etc.

    "},{"location":"3.1.Funcions_doc/#addvectorlayericgcurl-position-visiblelabel-paintoption","title":"addVectorLayerICGC(url, position, visibleLabel, paintOption)","text":"

    Adds an ICGC vector layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description url string The url of the vector layer. position string Position of the layer: 'top', below 'labels' or below 'lines'. visibleLabel string Visibility of the label (\"visible\" / \"none\"). paintOption object Paint option for the layer

    "},{"location":"3.1.Funcions_doc/#addfgblayericgcurl-visiblelabel-paintoption","title":"addFGBLayerICGC(url, visibleLabel, paintOption)","text":"

    Adds an ICGC FGB layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description url string The url of the FGB layer. visibleLabel string Visibility of the label (\"visible\" / \"none\"). paintOption object Paint option for the layer

    "},{"location":"3.1.Funcions_doc/#addterrainicgcresolution-positionbutton","title":"addTerrainICGC(resolution, [positionButton])","text":"

    Adds 3D terrain to the map using hillshade.

    Kind: global function

    Param Type Default Description resolution string resolution of the terrain data: 2m or 5m. [positionButton] string \"'top-right'\" Position to add the button on the map.

    "},{"location":"3.1.Funcions_doc/#addlegendname","title":"addLegend(name)","text":"

    Adds 3D terrain to the map using hillshade.

    Kind: global function

    Param Type Description name string name of the layer legend to add."},{"location":"4.1.Versio/","title":"4.1.Versio","text":""},{"location":"4.1.Versio/#versionat","title":"Versionat","text":"

    v. 1.0.0

    "}]} \ No newline at end of file +{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"MapICGC-gl-js","text":"

    La biblioteca MapICGC GL JS, creada com a envoltori de MapLibreGL, ofereix noves funcions espec\u00edfiques en un entorn ICGC. Simplifica el desenvolupament integrant caracter\u00edstiques com tessel\u00b7les vectorials i imatges satel\u00b7litals, i incorpora de manera inmediata estils, terrenys i dades ICGC. Proporciona funcions documentades per a la creaci\u00f3 d'un visor complet i totalment personalitzable.

    "},{"location":"#que-es","title":"Qu\u00e8 \u00e9s?","text":"

    La llibreria MapICGC GL JS, basada en Maplibre GL, \u00e9s una eina desenvolupada per l'Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya (ICGC) per millorar la cartografia web i proporcionar una soluci\u00f3 integrada als desenvolupadors. Permet accedir f\u00e0cilment a dades geoespacials de l'ICGC, com ara tessel\u00b7les vectorials, imatges satel\u00b7litals i models d'elevaci\u00f3 del terreny, facilitant la creaci\u00f3 de visors web personalitzats. A m\u00e9s, ofereix funcions per a la gesti\u00f3 de dades en temps d'execuci\u00f3, com geocodificaci\u00f3 i geolocalitzaci\u00f3, i el seu disseny modular permet la seva aplicaci\u00f3 en una \u00e0mplia gamma de projectes de cartografia i gesti\u00f3 de recursos.

    "},{"location":"#com-funciona","title":"Com funciona?","text":"

    La biblioteca MapICGC GL JS funciona integrant funcionalitats de Maplibre GL i proporcionant acc\u00e9s a dades geoespacials de l'Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya (ICGC). Per integrar-ho al teu projecte, nom\u00e8s cal instal\u00b7lar la llibreria mitjan\u00e7ant npm o integrar-la a trav\u00e9s de CDN.

    "},{"location":"#installacio","title":"Instal\u00b7laci\u00f3","text":""},{"location":"#exemples","title":"Exemples","text":""},{"location":"#documentacio","title":"Documentaci\u00f3","text":""},{"location":"#llicencia","title":"Llic\u00e8ncia","text":""},{"location":"#versionat","title":"Versionat","text":""},{"location":"#autor-i-contacte","title":"Autor i contacte","text":"

    Unitat Geostart, Institut Cartogr\u00e0fic i Geol\u00f2gic de Catalunya.

    "},{"location":"1.1.Inst_npm/","title":"1.1 Instal\u00b7laci\u00f3 via NPM","text":""},{"location":"1.1.Inst_npm/#installacio-amb-npm","title":"Instal\u00b7laci\u00f3 amb NPM","text":"

    Si utilitzes npm (Node Package Manager) per gestionar les depend\u00e8ncies del teu projecte, segueix aquests passos:

    1.Obre la teva terminal i navega fins al directori del teu projecte.

    2.Executa la seg\u00fcent comanda per instal\u00b7lar mapicgc-gl-js:

    npm install mapicgc-gl-js\n
    Aix\u00f2 descarregar\u00e0 i instal\u00b7lar\u00e0 la llibreria al teu projecte.

    3.Un cop completada la instal\u00b7laci\u00f3, pots importar la llibreria al teu codi:

     const llibreria = require('mapicgc-gl-js'); //ES6\n

    o

      import * as mapicgcgl from \"mapicgc-gl-js\"\n

    Ara est\u00e0s llest per comen\u00e7ar a utilitzar mapicgc-gl-js, seguint l'exemple seg\u00fcent:

    <script>\n  import { Map, Styles } from \"mapicgc-gl-js\";\n  //import * as mapicgc from  \"mapicgc-gl-js\" ****;\n  const map = new Map({\n    container: \"map\",\n    style: Styles.LIGHT, // or mapicgc.Styles.LIGHT ****\n    hash: true,\n    center: [2.1282, 41.45],\n    pitch: 0,\n    maxZoom: 20,\n    zoom: 8,\n\n    bearing: 0,\n  });\n</script>\n
    "},{"location":"1.2.Inst_cdn/","title":"1.2 Instal\u00b7laci\u00f3 via CDN","text":""},{"location":"1.2.Inst_cdn/#installacio-amb-cdn","title":"Instal\u00b7laci\u00f3 amb CDN","text":"

    Si prefereixes utilitzar un CDN per incorporar la llibreria al teu projecte, pots seguir aquests passos:

    1.Obre la teva terminal i navega fins al directori del teu projecte.

    2.Afegir la l\u00ednia seg\u00fcent al teu fitxer HTML, generalment col\u00b7locada dins la secci\u00f3 <head>:

    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n<link\n  href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n  rel=\"stylesheet\"\n/>\n

    Aix\u00f2 carregar\u00e0 la llibreria directament des del CDN. Ara est\u00e0s llest per utilitzar mapicgc-gl-js al teu projecte seguint l'exemple seg\u00fcent:

    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple llibreria mapicgc-gl-js</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n\n      });\n    </script>\n  </body>\n</html>\n

    See the Pen example-map-001 by unitatgeostart (@unitatgeostart) on CodePen.

    "},{"location":"2.1.0.Map/","title":"2.1 Crear mapa i afegir estil","text":""},{"location":"2.1.0.Map/#exemple","title":"Exemple","text":"

    .Map(options) \u2192 mateixes opcions que a MapLibreGLJS

    See the Pen example Map by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.0.Map/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Mapa</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.addFullscreenControl();\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.0.Map/#estils-icgc","title":"Estils ICGC","text":""},{"location":"2.1.0.Map/#stylesid","title":"Styles.{id}","text":"id Mostra TOPO ORTO ORTO3D (versi\u00f3 experimental) ADMIN DARK LIGHT GEOLOGY"},{"location":"2.1.1.AddTerrain/","title":"2.1.1.AddTerrain","text":""},{"location":"2.1.1.AddTerrain/#exemple","title":"Exemple","text":"

    .addTerrain(resolution, position)

    See the Pen Exemple addTerrain by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.1.AddTerrain/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir 3D</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [0.959, 42.201],\n        zoom: 13,\n        maxZoom: 19,\n        hash: true,\n        pitch: 80,\n        bearing: 40,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addSource(\"terrainSource\", {\n          type: \"raster\",\n          url: \"https://demotiles.maplibre.org/terrain-      tiles/tiles.json\",\n          tileSize: 256,\n          maxzoom: 19,\n        });\n        map.setTerrain({\n          source: \"terrainSource\",\n          exaggeration: 2.5,\n        });\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.2.AddICGCTerrain/","title":"2.2 Afegir terreny","text":""},{"location":"2.1.2.AddICGCTerrain/#exemple","title":"Exemple","text":"

    .addTerrainICGC(resolution, position)

    See the Pen addTerrainICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.2.AddICGCTerrain/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir 3D de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [0.959, 42.201],\n        zoom: 13,\n        maxZoom: 19,\n        hash: true,\n        pitch: 80,\n        bearing: 40,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, \"bottom-right\");\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.2.AddICGCTerrain/#terrenys-icgc","title":"Terrenys ICGC","text":""},{"location":"2.1.2.AddICGCTerrain/#terrainsid","title":"Terrains.{id}","text":"id Resoluci\u00f3 / Extensi\u00f3 ICGC5M 5m / Catalunya WORLD30M 30m / World"},{"location":"2.1.3.3dStyle/","title":"2.3 Afegir estil ORTO3D","text":""},{"location":"2.1.3.3dStyle/#exemple","title":"Exemple","text":"

    .Map({style: mapicgcgl.Styles.ORTO3D})

    See the Pen example Map 3D by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.1.3.3dStyle/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: estil ORTO3D</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO3D,\n        center: [2.309, 41.98],\n        zoom: 18,\n        maxZoom: 19,\n        hash: true,\n        bearing: 45,\n      });\n      map.addFullscreenControl();\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.1.3.3dStyle/#estils-icgc","title":"Estils ICGC","text":""},{"location":"2.1.3.3dStyle/#stylesid","title":"Styles.{id}","text":"id Mostra TOPO ORTO ORTO3D (versi\u00f3 experimental) ADMIN DARK LIGHT GEOLOGY"},{"location":"2.10.AddLogo/","title":"2.12 Afegir logo","text":""},{"location":"2.10.AddLogo/#exemple","title":"Exemple","text":"

    .addLogo(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.10.AddLogo/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir logo</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      #logos {\n       display: flex;\n    flex-direction: row;\n    bottom: 40%;\n    position: absolute;\n    right:50%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <div id=\"logos\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      let options = {\n        id: \"icgcColorLogo\",\n        url: \"https://tilemaps.icgc.cat/cdn/images/grumpyCatTest.png\",\n        href: \"https://www.icgc.cat\",\n        height: '100px'\n      };\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addLogo(options);  //pots canviar la posici\u00f3 del/s logo/s al css\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.11.FetchData/","title":"2.13 Fetch dades","text":""},{"location":"2.11.FetchData/#exemple","title":"Exemple","text":"

    .fetchData(url, name, options)

    \ud83d\udccc Format de dades: geojson o flatgeobuf

    See the Pen Exemple fetchData by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.11.FetchData/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Fetch dades</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.LIGHT,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      let paintOptions = {\n        layout: {\n          visibility: \"visible\",\n        },\n        paint: {\n          \"line-color\": \"green\",\n          \"line-width\": 3,\n          \"line-opacity\": 1,\n        },\n        layerPosition: \"top\", // select: 'top', 'lines' or 'labels'\n      };\n      let paintOptionsfgb = {\n        layout: {\n          visibility: \"visible\",\n        },\n        paint: {\n          \"line-color\": \"grey\",\n          \"line-width\": 2,\n        },\n        layerPosition: \"top\", // select: 'top', 'lines' or 'labels'\n      };\n\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n\n        // geojson\n        map.fetchData(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          paintOptions\n        );\n\n        // ICGC FGB data:\n        map.fetchData(\n          mapicgcgl.Layers.FGBAdmin.comarquesVigent,\n          \"Comarques\",\n          paintOptionsfgb\n        );\n\n        // external FGB data:\n        map.fetchData(\n          \"https://flatgeobuf.org/test/data/UScounties.fgb\",\n          \"UScounties\",\n          paintOptionsfgb\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.11.FetchData/#posicio-layerposition","title":"Posici\u00f3 (layerPosition)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.11.FetchData/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.11.FetchData/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.12.FetchDataAndMenu/","title":"2.14 Fetch dades i crea men\u00fa","text":""},{"location":"2.12.FetchDataAndMenu/#exemple","title":"Exemple","text":"

    .fetchDataAndMenu(url, name, filterField, options)

    \ud83d\udccc Format de dades: geojson o flatgeobuf

    See the Pen Exemple fetchData by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.12.FetchDataAndMenu/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Fetch dades</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      /* Personalitza el teu men\u00fa: */\n      #menu-group {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        color: #000000;\n      }\n\n      #menu-group input[type=\"checkbox\"] + label {\n        background-color: #ffffff !important;\n      }\n\n      #titleDivMenu {\n        background-color: rgb(213 212 212);\n      }\n\n      #titleDivMenuSub {\n        background-color: #e9e9e9;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.LIGHT,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n\n      let filterField = \"municipi\"; // select 'all' for view all the features as a single layer\n      let paintOptions = {\n        \"line-color\": \"green\",\n        \"line-width\": 3,\n        \"line-opacity\": 1,\n      };\n      let optionsLayer = {\n        layout: {\n          visibility: \"visible\",\n        },\n        paint: {\n          \"line-color\": \"green\",\n          \"line-width\": 3,\n          \"line-opacity\": 1,\n        },\n        layerPosition: \"labels\",\n      };\n\n      let filterFGBField = \"NOMPROV\"; // select 'all' for view all the features as a single layer\n      let paintOptionsfgb = {\n        \"fill-color\": \"grey\",\n        \"fill-opacity\": 0.6,\n      };\n\n      let optionsLayerfgb = {\n        layout: {\n          visibility: \"visible\",\n        },\n        paint: {\n          \"fill-color\": \"grey\",\n          \"fill-opacity\": 0.16,\n        },\n        layerPosition: \"labels\",\n      };\n\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n\n        //geojson\n        map.fetchDataAndMenu(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          filterField,\n          optionsLayer\n        );\n\n        //ICGC FGB data:\n        map.fetchDataAndMenu(\n          mapicgcgl.Layers.FGBAdmin.provinciesVigent,\n          \"Provincies\",\n          filterFGBField,\n          optionsLayerfgb\n        );\n\n        //external FGB data:\n        map.fetchDataAndMenu(\n          \"https://flatgeobuf.org/test/data/UScounties.fgb\",\n          \"UScounties\",\n          \"all\",\n          layerPosition,\n          paintOptionsfgb\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.12.FetchDataAndMenu/#posicio-layerposition","title":"Posici\u00f3 (layerPosition)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.12.FetchDataAndMenu/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.12.FetchDataAndMenu/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.13.AddFeatureQuery/","title":"2.15 Consulta d'elements","text":""},{"location":"2.13.AddFeatureQuery/#exemple","title":"Exemple","text":"

    .addFeatureQuery(layer, queryFields, popupStyle)

    Retorna informaci\u00f3 al fer clic sobre un element

    See the Pen Exemple Consulta d'elements by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.13.AddFeatureQuery/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Consulta d'elements</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n\n        map.addFullscreenControl();\n\n        let paintOptions = {\n          \"line-color\": \"red\",\n          \"line-width\": 2,\n          \"line-opacity\": 0.5,\n        };\n\n        map.fetchData(\n          \"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson\",\n          \"RutesMontserrat\",\n          paintOptions\n        );\n\n        // si volem camps espec\u00edfics:\n        // let queryFields = [\"nom\", \"municipi\"];\n\n        // si volem tots els camps:\n        let queryFields = [];\n\n        let popupStyle = {\n          title: \"Rutes:\",\n          image: \"https://tilemaps.icgc.cat/cdn/logos/icgc_logo_color.png\", //opcional\n        };\n        map.addFeatureQuery(\"RutesMontserrat\", queryFields, popupStyle);\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.14.AddGeocoderICGC/","title":"2.16 Afegir geocodificador ICGC","text":""},{"location":"2.14.AddGeocoderICGC/#exemple","title":"Exemple","text":"

    .addGeocoderICGC()

    See the Pen Exemple geocodificador by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.14.AddGeocoderICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Geocodificador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.8436, 41.5923],\n        zoom: 11,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n        map.addGeocoderICGC();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.2.AddBasemap/","title":"2.4 Afegir control d'estil","text":""},{"location":"2.2.AddBasemap/#exemple","title":"Exemple","text":"

    .addBasemapsICGC(baseLayers)

    See the Pen addBasemapsICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.2.AddBasemap/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir mapa base ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <div id=\"basemap-group\" class=\"basemap-group\"></div>\n    <script>\n      // add basemap\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO, // <-- add style basemap here\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        //add multiple ICGC basemaps and get a style menu component\n        map.addFullscreenControl();\n        let basemapsicgc = [mapicgcgl.Styles.ORTO, mapicgcgl.Styles.TOPO];\n        map.addBasemapsICGC(basemapsicgc);\n      });\n      //If you need to add basemaps from other sources, please follow the structure for each object\n      //   let baseLayers = [\n      //     {\n      //       id: 0,\n      //       value: \"Mapa est\u00e0ndard\",\n      //       label: \"icgc_mapa_estandard_general\",\n      //        url: \"https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard_general.json\",\n      // image: \"https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_estandard.png\",\n      //     },\n      //     {\n      //       id: 1,\n      //       value: \"Ortofotomapa h\u00edbrid\",\n      //       label: \"icgc_orto_hibrida\",\n      //         url: \"https://geoserveis.icgc.cat/contextmaps/icgc_orto_hibrida.json\",\n      // image: \"https://visors.icgc.cat/contextmaps/imatges_estil/icgc_orto_hibrida.png\",\n      //     },\n      //   ];\n      //   map.addBasemaps(baseLayers);\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.20.AdvancedExample/","title":"2.17 Exemple visor","text":""},{"location":"2.20.AdvancedExample/#exemple","title":"Exemple","text":"

    See the Pen Exemple by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.20.AdvancedExample/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple avan\u00e7at mapicgc-gl-js</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      /*personalitza el teu men\u00fa */\n      #menu-group {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        color: #000000;\n      }\n\n      #menu-group input[type=\"checkbox\"] + label {\n        background-color: #ffffff !important;\n      }\n\n      #titleDivMenu {\n        background-color: rgb(213 212 212);\n      }\n\n      #titleDivMenuSub {\n        background-color: #e9e9e9;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"menu-group\" class=\"filter-group\"></nav>\n\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [1.808, 41.618],\n        zoom: 10,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      map.on(\"load\", () => {\n        //GEOCODER\n        map.addGeocoderICGC();\n        //CONTROLS\n        map.addGeolocateControl(\n          {\n            positionOptions: {\n              enableHighAccuracy: true,\n            },\n            trackUserLocation: true,\n          },\n          \"bottom-right\"\n        );\n        map.addExportControl();\n        map.addFullscreenControl({}, \"top-right\");\n\n        //addLogo\n        let options = {\n          id: \"icgcColorLogo\",\n          url: \"https://betaserver.icgc.cat/logos/ICGC_color_norma.svg\",\n          href: \"https://www.icgc.cat\",\n        };\n\n        // map.addLogo(options);\n\n        //add Terrain\n        map.addTerrainICGC(mapicgcgl.Terrains.ICGC5M, \"bottom-right\");\n        //add image layer\n        let optionsLayer = {\n          type: \"raster\",\n          layout: {\n            visibility: \"visible\",\n          },\n          paint: {\n            \"raster-opacity\": 1,\n          },\n          position: \"labels\",\n        };\n        let layerImagePosition = \"top\"; // select: 'top', 'lines' or 'labels'\n        map.addImageLayerICGC(\n          \"orto2013\",\n          mapicgcgl.Layers.Orto.ortofotoColor2013,\n          optionsLayer\n        );\n\n        //add vector icgc\n        let optionsLayer = {\n          type: \"line\",\n          layout: {\n            visibility: \"visible\",\n          },\n          paint: {\n            \"line-color\": \"red\",\n            \"line-width\": 0.2,\n          },\n          position: \"lines\",\n        };\n\n        map.addVectorLayerICGC(\n          \"Municipis\", //ID\n          mapicgcgl.Layers.VectorAdmin.municipisVigent, //Layer\n          optionsLayer //options\n        );\n\n        map.addFullscreenControl();\n\n        let filterField = \"municipi\"; // select 'all' for view all the features as a single layer\n        let optionsLayerEqui = {\n          layout: {\n            visibility: \"visible\",\n          },\n          paint: {\n            \"circle-color\": \"blue\",\n            \"circle-opacity\": 0.85,\n          },\n          layerPosition: \"lines\",\n        };\n\n        map.fetchDataAndMenu(\n          \"https://analisi.transparenciacatalunya.cat/resource/8gmd-gz7i.geojson\",\n          \"Equipaments\",\n          filterField,\n          optionsLayerEqui\n        );\n\n        // let queryFields = [\"nom\", \"municipi\"];\n        // map.addFeatureQuery(\"RutesMontserrat\", queryFields);\n        let popupStyle = {\n          title: \"Informaci\u00f3:\",\n          image: \"https://tilemaps.icgc.cat/cdn/logos/gencat_logo_color.png\",\n        };\n        let queryFields = [\"nom\"]; // [] for query all the properties\n        map.addFeatureQuery(\"Equipaments\", queryFields, popupStyle);\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.3.AddImageLayerICGC/","title":"2.5 Afegir capa d'imatge ICGC","text":""},{"location":"2.3.AddImageLayerICGC/#exemple","title":"Exemple","text":"

    .addImageLayerICGC(name, urlLayer, options)

    See the Pen Exemple addImageLayerICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.3.AddImageLayerICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa imatge ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        let optionsLayer = {\n          type: \"raster\",\n          layout: {\n            visibility: \"visible\",\n          },\n          paint: {\n            \"raster-opacity\": 1,\n          },\n          position: \"labels\",\n        };\n        map.addImageLayerICGC(\n          \"orto2013\",\n          mapicgcgl.Layers.Orto.ortofotoColor2013,\n          optionsLayer\n        );\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.3.AddImageLayerICGC/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.3.AddImageLayerICGC/#capes-dimatge-icgc","title":"Capes d'imatge ICGC","text":""},{"location":"2.3.AddImageLayerICGC/#layersortoid","title":"Layers.Orto.{id}","text":"id ortofotoColorProvisional ortofotoColor2022 ortofotoColor2021 ortofotoColor2020 ortofotoColor2019 ortofotoColor2018 ortofotoColor2017 ortofotoColor2016 ortofotoColor2015 ortofotoColor2014 ortofotoColor2013 ortofotoColor2012 ortofotoColor2011 ortofotoColor2010 ortofotoColor2009 ortofotoColor2008 ortofotoColor20062007 ortofotoColor20042005 ortofotoColor20002003 ortofotoBlancINegre1998 ortofotoBlancINegre19941997 ortofotoColor1993 ortofotoBlancINegre19831992 ortofotoBlancINegre19701977 ortofotoBlancINegre1956 ortofotoBlancINegre1945 ortofotoColorSerieAnual ortofotoInfraroigProvisional ortofotoInfraroig2022 ortofotoInfraroig2021 ortofotoInfraroig2020 ortofotoInfraroig2019 ortofotoInfraroig2018 ortofotoInfraroig2017 ortofotoInfraroig2016 ortofotoInfraroig2015 ortofotoInfraroig2014 ortofotoInfraroig2013 ortofotoInfraroig2012 ortofotoInfraroig2011 ortofotoInfraroig2010 ortofotoInfraroig2009 ortofotoInfraroig2008 ortofotoInfraroig20062007 ortofotoInfraroig19961997 ortofotoInfraroigSerieAnual"},{"location":"2.3.AddImageLayerICGC/#layerswmsid","title":"Layers.WMS.{id}","text":"id espaisInteresGeologic gravimetriaBouguer500000 cobertesSol2018 administratiu simplificat cims"},{"location":"2.4.AddVectorLayerFGBICGC/","title":"2.4.AddVectorLayerFGBICGC","text":""},{"location":"2.4.AddVectorLayerFGBICGC/#exemple","title":"Exemple","text":"

    \ud83d\udccc Format de dades: Flatgeobuf

    .addFGBLayerICGC(layer, labelVisibility, paintOption)

    See the Pen Exemple addFGBLayerICGC by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.4.AddVectorLayerFGBICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa fgb de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        let labelVisibility = \"visible\"; // select : \"visible\" or \"none\"\n        let paintOptions = {\n          \"line-color\": \"green\",\n          \"line-width\": 2,\n        };\n        map.addFullscreenControl({},'top-right');\n        map.addFGBLayerICGC(\n          mapicgcgl.Layers.FGBAdmin.comarquesVigent,\n          labelVisibility,\n          paintOptions\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.4.AddVectorLayerFGBICGC/#capes-fgb-icgc","title":"Capes FGB ICGC","text":""},{"location":"2.4.AddVectorLayerFGBICGC/#layersfgbadminid","title":"Layers.FGBAdmin.{id}","text":"id agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarquesVigent comarquesVigentText districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.4.AddVectorLayerICGC/","title":"2.6 Afegir capa vector ICGC","text":""},{"location":"2.4.AddVectorLayerICGC/#exemple","title":"Exemple","text":"

    .addVectorLayerICGC(idLayer,layerUrl, options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.4.AddVectorLayerICGC/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa vector de l'ICGC</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      /* personalitza el teu bot\u00f3 de llegenda: */\n      #toggleLegend {\n        position: absolute;\n        top: 20px;\n        right: 20px;\n        background-color: #3f33eb;\n        color: white;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        text-align: center;\n        line-height: 40px;\n        cursor: pointer;\n        z-index: 1000;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        map.addFullscreenControl();\n\n        let optionsLayer = {\n          type: \"line\",\n          layout: {\n            visibility: \"visible\",\n          },\n          paint: {\n            \"line-color\": \"red\",\n            \"line-width\": 0.2,\n          },\n          position: \"lines\",\n        };\n\n        let layerPosition = \"top\"; // select: 'top', 'lines' or 'labels'\n        let labelVisibility = \"visible\"; // visible or none\n        let paintOptions = {\n          \"line-color\": \"black\",\n          \"line-width\": 1,\n        };\n\n        // map.addVectorLayerICGC(\n        //         'cobertes2018', mapicgcgl.Layers.Vector.cobertes2018\n        //     );\n        map.addVectorLayerICGC(\n          \"Municipis\", //ID\n          mapicgcgl.Layers.VectorAdmin.municipisVigent, //Layer\n          optionsLayer //options\n        );\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.4.AddVectorLayerICGC/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.4.AddVectorLayerICGC/#capes-vector-icgc","title":"Capes vector ICGC","text":""},{"location":"2.4.AddVectorLayerICGC/#layersvectoradminid","title":"Layers.VectorAdmin.{id}","text":"id agrupacionsCensals2015 agrupacionsCensals2016 agrupacionsCensals2017 agrupacionsCensals2018 agrupacionsCensals2019 agrupacionsCensals2020 agrupacionsCensals2021 agrupacionsCensalsVigent agrupacionsCensalsVigentText areesBasiquesPolicials2019 areesBasiquesPolicials2020 areesBasiquesPolicials2022 areesBasiquesPolicialsVigent areesBasiquesPolicialsVigentText areesBasiquesSalutVigent areesBasiquesServeisSocialsVigent areesBasiquesServeisSocialsVigentText areesGestioAssistencialVigent areesHidrogeologiquesAquifersVigent catalunyaVigent catalunyaVigentText comarques2022 comarquesVigent comarquesVigentText districtesCensals2015 districtesCensals2016 districtesCensals2017 districtesCensals2018 districtesCensals2019 districtesCensals2020 districtesCensals2021 districtesCensals2022 districtesCensalsVigent districtesCensalsVigentText incendisForestalsVigent incendisForestalsVigentText municipis2022 municipis2022Text municipisVigent municipisVigentText partitsJudicialsVigent partitsJudicialsVigentText plaTerritorial2015 plaTerritorialVigent plaTerritorialVigentText provinciesVigent provinciesVigentText regionsPolicialsVigent regionsPolicialsVigentText regionsSanitariesVigent regionsSanitariesVigentText seccionsCensals2015 seccionsCensals2016 seccionsCensals2017 seccionsCensals2018 seccionsCensals2019 seccionsCensals2020 seccionsCensals2021 seccionsCensals2022 seccionsCensalsVigent seccionsCensalsVigentText sectorsSanitarisVigent vegueriesVigent vegueriesVigentText"},{"location":"2.4.AddVectorLayerICGC/#layersvectorid","title":"Layers.Vector.{id}","text":"id cobertes2018"},{"location":"2.5.AddLayerGeojson/","title":"2.7 Afegir capa GeoJSON","text":""},{"location":"2.5.AddLayerGeojson/#exemple","title":"Exemple","text":"

    .addLayerGeoJSON(geojsonLayer, layerPosition)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.5.AddLayerGeojson/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir capa</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.001, 41.759],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      map.on(\"load\", () => {\n        let geojsonLayer = {\n          id: \"geojsonTest\",\n          data: {\n            type: \"Feature\",\n            geometry: {\n              type: \"Polygon\",\n              coordinates: [\n                [\n                  [1.3119, 41.489],\n                  [1.0119, 41.489],\n                  [1.0119, 42.0489],\n                  [1.3119, 42.0489],\n                ],\n              ],\n            },\n          },\n          layerType: \"fill\",\n          layout: {},\n          paint: {\n            \"fill-color\": \"#088\",\n            \"fill-opacity\": 0.8,\n          },\n        };\n        let layerPosition = 'labels' // select: 'top', 'lines' or 'labels'\n        map.addLayerGeoJSON(geojsonLayer, layerPosition);\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.5.AddLayerGeojson/#posicio-position","title":"Posici\u00f3 (position)","text":"id Descripci\u00f3 'top' Posici\u00f3 de la capa per sobre de tots els elements carregats pr\u00e8viament 'labels' Posici\u00f3 de la capa per sota de tots els elements de tipus etiqueta carregats pr\u00e8viament 'lines' Posici\u00f3 de la capa per sota de tots els elements de tipus l\u00ednia, punt i etiqueta carregats pr\u00e8viament"},{"location":"2.6.AddLayerTree/","title":"2.8 Afegir llistat de capes","text":""},{"location":"2.6.AddLayerTree/#exemple","title":"Exemple","text":"

    .addLayerTree(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.6.AddLayerTree/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir arbre de capes</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <nav id=\"filter-group\" class=\"filter-group\"></nav>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 6.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      let options = {\n        features: {\n          type: \"FeatureCollection\",\n          features: [\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Rub\u00ed\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [2.0119, 41.489],\n              },\n            },\n\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Moi\u00e0\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [2.119, 41.87],\n              },\n            },\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Les Borges Blanques\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [0.97319, 41.4589],\n              },\n            },\n            {\n              type: \"Feature\",\n              properties: {\n                icon: \"Berga\",\n              },\n              geometry: {\n                type: \"Point\",\n                coordinates: [1.83, 42.163],\n              },\n            },\n          ],\n        },\n        id: \"testLayer\",\n        type: \"geojson\",\n      };\n      map.on(\"load\", () => {\n        map.addLayerTree(options);\n        map.addFullscreenControl();\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.7.AddMarker/","title":"2.9 Afegir marker","text":""},{"location":"2.7.AddMarker/#exemple","title":"Exemple","text":"

    .addmarker(options)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.7.AddMarker/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir marcador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      let optionsMarker = {\n        coord: [2.119, 41.87],\n        text: \"Hola Test\",\n        textOffset: 25,\n        options: {},\n      };\n      map.on(\"load\", () => {\n        map.addMarker(optionsMarker);\n        map.addFullscreenControl({},'top-right');\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.8.AddControl/","title":"2.10 Afegir control","text":""},{"location":"2.8.AddControl/#exemple","title":"Exemple","text":"

    .addControl(control,position)

    See the Pen Exemple AddMarker by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.8.AddControl/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir control</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css\"\n    />\n    <script src=\"https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.js\"></script>\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"map\"></div>\n    <script>\n      const map = new mapicgcgl.Map({\n        container: \"map\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [2.1464, 41.306],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n      map.on(\"load\", () => {\n        // mapicgc-gl-js libreria:\n        map.addFullscreenControl({},'top-right');\n        map.addGeolocateControl(\n          {\n            positionOptions: {\n              enableHighAccuracy: true,\n            },\n            trackUserLocation: true,\n          },\n          \"bottom-right\"\n        );\n\n        //control export amb opcions\n        map.addExportControl(\n          {\n            PageSize: Size.A4,\n            PageOrientation: PageOrientation.Landscape,\n            Format: Format.PNG,\n            DPI: DPI[300],\n            Crosshair: true,\n            PrintableArea: true,\n          },\n          \"bottom-right\"\n        );\n        //control export per defecte\n        map.addExportControl();\n\n        // control d'una llibreria externa\n        map.addControl(new maplibregl.NavigationControl(), \"bottom-right\");\n      });\n    </script>\n  </body>\n</html>\n
    "},{"location":"2.8.AddControl/#addgeolocatecontroloptions-position","title":"addGeolocateControl(options, position)","text":"
    map.addGeolocateControl(); ; //default version\nmap.addGeolocateControl({ positionOptions: { enableHighAccuracy: true },\ntrackUserLocation: true },\"bottom-right\")\n
    "},{"location":"2.8.AddControl/#addexportcontroloptions-position","title":"addExportControl(options, position)","text":"
    map.addExportControl() ; //default version\nmap.addExportControl({ PageSize: Size.A4,\nPageOrientation:PageOrientation.Landscape, Format: Format.PNG, DPI: DPI[300],\nCrosshair: true, PrintableArea: true, }, \"bottom-right\")\n
    "},{"location":"2.8.AddControl/#addmousecoordcontroloptions-positionbottom-left","title":"addMouseCoordControl(options, position=\"bottom-left\")","text":"
      map.addMouseCoordControl(); //default version\n  map.addMouseCoordControl({width:'225px',utm:true,lonlat:true},\"bottom-left\");\n
    "},{"location":"2.8.AddControl/#addfullscreencontroloptions-position","title":"addFullscreenControl(options, position)","text":"
    map.addFullscreenControl(); //default version\nmap.addFullscreenControl({container: HTMLElement}, 'top-right');\n
    "},{"location":"2.8.AddControl/#addscalecontroloptions-position","title":"addScaleControl(options, position)","text":"
    map.addScaleControl(); //default version\n map.addScaleControl({maxWidth: 100, unit: 'metric' ('imperial', 'metric' or 'nautical')}, \"top-right\");\n
    "},{"location":"2.8.AddControl/#addnavigationcontroloptions-position","title":"addNavigationControl(options, position)","text":"
    map.addNavigationControl(); //default version\n map.addMouseCoordControl({showCompass: true, showZoom: true, visualizePitch: true}, \"top-right\");\n
    "},{"location":"2.8.AddControl/#addattributioncontroloptions-position","title":"addAttributionControl(options, position)","text":"
    map.addAttributionControl(); //default version\nmap.addAttributionControl({compact: true, customAttribution: \"your custom attribution\" }, \"bottom-right\");\n
    "},{"location":"2.9.AddCompare/","title":"2.11 Afegir comparador","text":""},{"location":"2.9.AddCompare/#exemple","title":"Exemple","text":"

    .CompareMaps(options)

    See the Pen CompareMaps by unitatgeostart (@unitatgeostart) on CodePen.

    CodePen

    "},{"location":"2.9.AddCompare/#codi","title":"Codi","text":"
    <html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Exemple mapicgc-gl-js: Afegir comparador</title>\n    <meta\n      name=\"viewport\"\n      content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\n    />\n    <script src=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js\"></script>\n    <link\n      href=\"https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n      #map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n      .map {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"comparison-container\">\n      <div id=\"before\" class=\"map\"></div>\n      <div id=\"after\" class=\"map\"></div>\n    </div>\n\n    <script>\n      const map1 = new mapicgcgl.Map({\n        container: \"before\",\n        style: mapicgcgl.Styles.ORTO,\n        center: [1.1464, 41.706],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      const map2 = new mapicgcgl.Map({\n        container: \"after\",\n        style: mapicgcgl.Styles.TOPO,\n        center: [1.1464, 41.706],\n        zoom: 7.4,\n        maxZoom: 19,\n        hash: true,\n        pitch: 0,\n      });\n\n      var container = \"#comparison-container\";\n\n      var map = new mapicgcgl.CompareMaps(map1, map2, container, {});\n    </script>\n  </body>\n</html>\n
    "},{"location":"3.1.Funcions_doc/","title":"3.1 Funcions","text":""},{"location":"3.1.Funcions_doc/#addgeocodericgc-object","title":"addGeocoderICGC() \u2192 Object","text":"

    Add geocoder.

    Kind: global function Returns: Object - - The current position of the search result.

    "},{"location":"3.1.Funcions_doc/#getstyle-object","title":"getStyle() \u2192 Object","text":"

    Retrieves the current style of the map.

    Kind: global function Returns: Object - - The current style of the map.

    "},{"location":"3.1.Funcions_doc/#loadimageurlimage-image","title":"loadImage(urlImage) \u2192 image","text":"

    Load image to layer symbol as icon-image.

    Kind: global function Returns: image - - The image.

    Param Type Description urlImage string The url image png or jpep.

    "},{"location":"3.1.Funcions_doc/#addimageimagename-imagedata-image","title":"addImage(imageName, imageData) \u2192 image","text":"

    Add image to mapstyle.

    Kind: global function Returns: image - - The image.

    Param Type Description imageName string The url image png or jpep. imageData image The image.data from return of loadImage function.

    "},{"location":"3.1.Funcions_doc/#getconfigstyles-array","title":"getConfigStyles() \u2192 Array","text":"

    Retrieves the available base styles from default options.

    Kind: global function Returns: Array - - Array containing the names of available base styles.

    "},{"location":"3.1.Funcions_doc/#getconfigwmslayers-array","title":"getConfigWMSLayers() \u2192 Array","text":"

    Retrieves the available WMS image layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available WMS image layers.

    "},{"location":"3.1.Funcions_doc/#getconfigortolayers-array","title":"getConfigOrtoLayers() \u2192 Array","text":"

    Retrieves the available orto image layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available image layers.

    "},{"location":"3.1.Funcions_doc/#getconfigvectorlayers-array","title":"getConfigVectorLayers() \u2192 Array","text":"

    Retrieves the available vector layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available vector layers.

    "},{"location":"3.1.Funcions_doc/#getconfigvectoradminlayers-array","title":"getConfigVectorAdminLayers() \u2192 Array","text":"

    Retrieves the available vector layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available vectorAdmin layers.

    "},{"location":"3.1.Funcions_doc/#getconfigfgbadminlayers-array","title":"getConfigFGBAdminLayers() \u2192 Array","text":"

    Retrieves the available fgb layers from default options.

    Kind: global function Returns: Array - - Array containing the keys of available fgbadmin layers.

    "},{"location":"3.1.Funcions_doc/#fetchdataurl-name-options","title":"fetchData(url, name, options)","text":"

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type.

    Kind: global function

    Param Type Description url string The URL to fetch GeoJSON data from. name string The geometry name (e.g., 'buildings'). options Object Additional options for configuring the layer.

    "},{"location":"3.1.Funcions_doc/#fetchdataandmenuurl-name-featuretree-options","title":"fetchDataAndMenu(url, name, featureTree, options)","text":"

    Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type and adds to the Menu as a checkbox item.

    Kind: global function

    Param Type Description url string The URL to fetch GeoJSON data from. name string The geometry name (e.g., 'buildings'). featureTree string Import all features as unique or group based on a field ('all', 'field'). options Object Additional options for configuring the layer.

    "},{"location":"3.1.Funcions_doc/#ontype-func","title":"on(type, func)","text":"

    Adds an event listener to the map.

    Kind: global function

    Param Type Description type string The type of the event. func function The callback function to be executed when the event occurs.

    "},{"location":"3.1.Funcions_doc/#getsourcesource","title":"getSource(source)","text":"

    Retrieves the specified source from the map.

    Kind: global function

    Param Type Description source string The ID of the source to retrieve.

    "},{"location":"3.1.Funcions_doc/#addsourcesource-options","title":"addSource(source, options)","text":"

    Adds a source to the map.

    Kind: global function

    Param Type Description source string The ID of the source to add. options object The source options.

    "},{"location":"3.1.Funcions_doc/#setstylestyle-options","title":"setStyle(style, [options])","text":"

    Sets the style of the map.

    Kind: global function

    Param Type Description style string Name of the map style. [options] Object Options for setting the style.

    "},{"location":"3.1.Funcions_doc/#getlayerlayerid","title":"getLayer(layerId)","text":"

    Retrieves the layer with the specified ID from the map.

    Kind: global function

    Param Type Description layerId string The ID of the layer to retrieve.

    "},{"location":"3.1.Funcions_doc/#setfilterlayerid-filter-options","title":"setFilter(layerId, filter, options)","text":"

    Set filter for specified style layer.

    Kind: global function

    Param Type Description layerId string The ID of the layer to retrieve. filter array The filter. options string Options object.

    "},{"location":"3.1.Funcions_doc/#jumptooptions","title":"jumpTo(options)","text":"

    Jumps to the specified coordinates and zoom on the map.

    Kind: global function

    Param Type Description options Object Coordinates and options to jump to: { center: [coordx, coordy], zoom: zoom, essential: true }.

    "},{"location":"3.1.Funcions_doc/#setlayoutpropertyobject-property-value","title":"setLayoutProperty(object, property, value)","text":"

    Sets layout property for a layer on the map.

    Kind: global function

    Param Type Description object Object Object containing layer ID. property Object Object containing property to set. value Object Object containing value.

    "},{"location":"3.1.Funcions_doc/#setpaintpropertyobject-property-value","title":"setPaintProperty(object, property, value)","text":"

    Sets layout property for a layer on the map.

    Kind: global function

    Param Type Description object Object Object containing layer ID. property Object Object containing property to set. value Object Object containing value.

    "},{"location":"3.1.Funcions_doc/#addcontrolcontrol-position","title":"addControl(control, [position])","text":"

    Adds a control to the map with the specified position.

    Kind: global function

    Param Type Default Description control Object The control to add. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#getzoom-number","title":"getZoom() \u2192 number","text":"

    Retrieves the current zoom level of the map.

    Kind: global function Returns: number - - The current zoom level.

    "},{"location":"3.1.Funcions_doc/#addmousecoordcontrolposition","title":"addMouseCoordControl([position])","text":"

    Adds a mouse coordinate control to the map.

    Kind: global function

    Param Type Default Description options.width Number Width control i. options.utm Boolean Boolean to show coordinates in UTM. options.lonlat Boolean Boolean to show coordinates in Lon Lat. [position] string \"'bottom-left'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addgeolocatecontroloptions-position","title":"addGeolocateControl(options, [position])","text":"

    Adds a geolocate control to the map.

    Kind: global function

    Param Type Default Description options Object Options for the geolocate control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addfullscreencontroloptions-position","title":"addFullscreenControl(options, [position])","text":"

    Adds a fullscreen control to the map.

    Kind: global function

    Param Type Default Description options Object Options for the geolocate control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#getbounds","title":"getBounds()","text":"

    Retrieves the bounds of the map.

    Kind: global function

    "},{"location":"3.1.Funcions_doc/#getcenter-lnglat","title":"getCenter() \u2192 LngLat","text":"

    Retrieves the center coordinates of the map.

    Kind: global function Returns: LngLat - - The center coordinates of the map.

    "},{"location":"3.1.Funcions_doc/#setterrainoptions-object","title":"setTerrain(options) \u2192 Object","text":"

    Sets terrain options for the map.

    Kind: global function Returns: Object - - Result of setting the terrain options.

    Param Type Description options Object Options for the terrain.

    "},{"location":"3.1.Funcions_doc/#setlayerzoomrangelayerid-minzoom-maxzoom","title":"setLayerZoomRange(layerId, minZoom, maxZoom)","text":"

    Sets the zoom range for a specific layer on the map.

    Kind: global function

    Param Type Description layerId string The ID of the layer to set the zoom range for. minZoom number The minimum zoom level. maxZoom number The maximum zoom level.

    "},{"location":"3.1.Funcions_doc/#getcanvas","title":"getCanvas()","text":"

    Retrieves the canvas of the map.

    Kind: global function

    "},{"location":"3.1.Funcions_doc/#setcentercoordinates","title":"setCenter(coordinates)","text":"

    Sets the center of the map to the provided coordinates.

    Kind: global function

    Param Type Description coordinates Array Coordinates to center the map: [1.3119, 41.489]

    "},{"location":"3.1.Funcions_doc/#addlayerlayer-layeridorder","title":"addLayer(layer, layerIdOrder)","text":"

    Adds a layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the layer to add. layerIdOrder string Optional layer Id draw position.

    "},{"location":"3.1.Funcions_doc/#addlayergeojsonlayer-position","title":"addLayerGeoJSON(layer, position)","text":"

    Adds a GeoJSON layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the GeoJSON layer to add. layer.id string Unique identifier for the layer. layer.type string Type of layer ('geojson'). layer.data Object GeoJSON data for the layer. layer.layerType string Map layer type (e.g., 'symbol', 'circle', 'fill'). layer.layout Object Layer layout configuration. layer.paint Object Layer paint configuration. position string Position of the layer: 'top', below 'labels' or below 'lines'.

    "},{"location":"3.1.Funcions_doc/#addlayerwmslayer-position-exportoptions","title":"addLayerWMS(layer, position, exportOptions)","text":"

    Adds a WMS layer to the map.

    Kind: global function

    Param Type Description layer Object Options for the WMS layer to add. layer.id string Unique identifier for the layer. layer.type string Type of layer ('raster'). layer.tiles Array.<string> Tiles for the raster layer. position string Position of the layer: 'top', below 'labels' or below 'lines'. exportOptions Object Options of the layer: type, layout, paint.

    "},{"location":"3.1.Funcions_doc/#removecontrolcontrol","title":"removeControl(control)","text":"

    Removes a control from the map.

    Kind: global function

    Param Type Description control Object The control to remove.

    "},{"location":"3.1.Funcions_doc/#removelayerlayerid","title":"removeLayer(layerId)","text":"

    Removes a layer from the map.

    Kind: global function

    Param Type Description layerId string Identifier of the layer to remove.

    "},{"location":"3.1.Funcions_doc/#removesourcelayerid","title":"removeSource(layerId)","text":"

    Removes a source from the map.

    Kind: global function

    Param Type Description layerId string Identifier of the source to remove.

    "},{"location":"3.1.Funcions_doc/#addlogooptions-position","title":"addLogo(options, position)","text":"

    Adds a logo to the map.

    Kind: global function

    Param Type Description options Object Options for the logo to add. options.id string Unique identifier for the logo. options.url string URL of the logo image. options.href string URL to navigate to when the logo is clicked. options.height string Height of the logo. position string Position of the logo.

    "},{"location":"3.1.Funcions_doc/#addbasemapsicgcbasesarray","title":"addBasemapsICGC(basesArray)","text":"

    Adds base layers to the map.

    Kind: global function

    Param Type Description basesArray Array.<Object> Array of base layer objects.

    "},{"location":"3.1.Funcions_doc/#addbasemapsbaselayers","title":"addBasemaps(baseLayers)","text":"

    Adds base layers to the map.

    Kind: global function

    Param Type Description baseLayers Array.<Object> Array of base layer objects. baseLayers.label string Label for the base layer. baseLayers.image string URL of the image representing the base layer. baseLayers.url string URL of the base layer style.

    "},{"location":"3.1.Funcions_doc/#addfeaturequerylayername-options-popupstyle","title":"addFeatureQuery(layerName, options, popupStyle)","text":"

    Adds feature query function to a layer.

    Kind: global function

    Param Type Description layerName string name of the layer options objetc optional indications for the popup popupStyle objetc optional indications for the popup style

    "},{"location":"3.1.Funcions_doc/#addscalecontroloptions-position","title":"addScaleControl(options, position)","text":"

    Adds a scale control to the map.

    Kind: global function

    Param Type Description options Object Options for configuring the scale control. position string The position on the map to place the scale control (e.g., 'top-left', 'bottom-right').

    "},{"location":"3.1.Funcions_doc/#addexportcontroloptions-position","title":"addExportControl(options, [position])","text":"

    Adds an export control to the map with the provided options and position.

    Kind: global function

    Param Type Description options Object | string Options for the export control or position if provided as a string. [position] string Position to place the export control (e.g., 'top-right').

    "},{"location":"3.1.Funcions_doc/#addpopupcoordinates-text","title":"addPopup(coordinates, text)","text":"

    Adds a popup to the map.

    Kind: global function

    Param Type Description coordinates array Coordinates of the popup . text string Text content for the popup.

    "},{"location":"3.1.Funcions_doc/#addmarkeroptions-object","title":"addMarker(options) \u2192 Object","text":"

    Adds a marker to the map.

    Kind: global function Returns: Object - - Instance of the added marker.

    Param Type Description options Object Options for the marker to add. options.text string Text content for the marker popup. options.options Object Marker options. options.coord LngLatLike Coordinates for placing the marker. options.textOffset Object Text offset for the marker popup.

    "},{"location":"3.1.Funcions_doc/#addpopupoptions-coord-text-popupstyle-object","title":"addPopup(options, coord, text, popupStyle) \u2192 Object","text":"

    Adds a popup to the map.

    Kind: global function Returns: Object - - Instance of the added popup.

    Param Type Description options Object Options for the popup to add. coord LngLatLike Coordinates for placing the popup. text string HTML content for the popup. popupStyle string css content for the popup style.

    "},{"location":"3.1.Funcions_doc/#addfullscreenposition","title":"addFullScreen([position])","text":"

    Adds a fullscreen control to the map.

    Kind: global function

    Param Type Default Description [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addmenuitemname","title":"addMenuItem(name)","text":"

    Adds a menu item with a checkbox for controlling the visibility of a layer on the map.

    Kind: global function

    Param Type Description name string The name of the layer corresponding to the menu item.

    "},{"location":"3.1.Funcions_doc/#addlayertreeoptions","title":"addLayerTree(options)","text":"

    Adds a layer tree to the map.

    Kind: global function

    Param Type Description options Object Options for the layer tree to add. options.features Object Features for the layer tree. options.id string Unique identifier for the layer tree. options.type string Type of layer tree ('geojson', 'raster', etc.).

    "},{"location":"3.1.Funcions_doc/#createnavigationcontroloptions-position-object","title":"createNavigationControl(options, [position]) \u2192 Object","text":"

    Creates a navigation control with the provided options.

    Kind: global function Returns: Object - - Instance of the created navigation control.

    Param Type Default Description options Object Options for the navigation control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addnavigationcontroloptions-position","title":"addNavigationControl(options, [position])","text":"

    Adds a navigation control to the map with the provided options.

    Kind: global function

    Param Type Default Description options Object Options for the navigation control. [position] string \"'top-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#addattributioncontroloptions-position","title":"addAttributionControl(options, [position])","text":"

    Adds an attribution control to the map with the provided options.

    Kind: global function

    Param Type Default Description options Object Options for the attribution control. [position] string \"'bottom-right'\" Position to add the control on the map.

    "},{"location":"3.1.Funcions_doc/#_dealstylemapsname-string","title":"_dealStyleMaps(name) \u2192 string","text":"

    Internal method to handle map styles.

    Kind: global function Returns: string - - URL of the map style.

    Param Type Description name string Name of the map style.

    "},{"location":"3.1.Funcions_doc/#addimagelayericgcname","title":"addImageLayerICGC(name)","text":"

    Adds an ICGC image layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description name string The url of the layer.

    "},{"location":"3.1.Funcions_doc/#addvectorlayericgcidlayer-layerurl-options","title":"addVectorLayerICGC(idLayer, layerUrl, options)","text":"

    Adds an ICGC vector layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description idLayer string The user id for the vector layer. layerUrl string The url of the vector layer. options object Type, position,layout and paint options for the layer

    "},{"location":"3.1.Funcions_doc/#addfgblayericgcurl-visiblelabel-paintoption","title":"addFGBLayerICGC(url, visibleLabel, paintOption)","text":"

    Adds an ICGC FGB layer to the map based on the specified name and year.

    Kind: global function

    Param Type Description url string The url of the FGB layer. visibleLabel string Visibility of the label (\"visible\" / \"none\"). paintOption object Paint option for the layer

    "},{"location":"3.1.Funcions_doc/#addterrainicgcresolution-positionbutton","title":"addTerrainICGC(resolution, [positionButton])","text":"

    Adds 3D terrain to the map using hillshade.

    Kind: global function

    Param Type Default Description resolution string resolution of the terrain data: 2m or 5m. [positionButton] string \"'top-right'\" Position to add the button on the map.

    "},{"location":"3.1.Funcions_doc/#addlegendname","title":"addLegend(name)","text":"

    Adds 3D terrain to the map using hillshade.

    Kind: global function

    Param Type Description name string name of the layer legend to add."},{"location":"4.1.Versio/","title":"4.1.Versio","text":""},{"location":"4.1.Versio/#versionat","title":"Versionat","text":"

    v. 1.0.0

    "}]} \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 423a0a6..a3bbbf6 100755 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,122 +2,122 @@ https://openicgc.github.io/mapicgc-doc/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/1.1.Inst_npm/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/1.2.Inst_cdn/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.1.0.Map/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.1.1.AddTerrain/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.1.2.AddICGCTerrain/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.1.3.3dStyle/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.10.AddLogo/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.11.FetchData/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.12.FetchDataAndMenu/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.13.AddFeatureQuery/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.14.AddGeocoderICGC/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.2.AddBasemap/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.20.AdvancedExample/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.3.AddImageLayerICGC/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.4.AddVectorLayerFGBICGC/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.4.AddVectorLayerICGC/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.5.AddLayerGeojson/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.6.AddLayerTree/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.7.AddMarker/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.8.AddControl/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/2.9.AddCompare/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/3.1.Funcions_doc/ - 2024-04-23 + 2024-04-29 daily https://openicgc.github.io/mapicgc-doc/4.1.Versio/ - 2024-04-23 + 2024-04-29 daily \ No newline at end of file diff --git a/sitemap.xml.gz b/sitemap.xml.gz index ce7cbc8..b959bd2 100755 Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ