mapicgc-gl-js 1.0.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +141 -1
- package/dist-mcp/index.js +37167 -0
- package/mcp/content/CHANGELOG.md +15 -0
- package/mcp/content/README.md +294 -0
- package/mcp/content/config-snapshot.json +12 -0
- package/mcp/content/docu_Map.md +2111 -0
- package/mcp/content/examples/basemap-switcher.md +63 -0
- package/mcp/content/examples/canviar-estil.md +52 -0
- package/mcp/content/examples/capa-fgb.md +51 -0
- package/mcp/content/examples/capa-geojson.md +65 -0
- package/mcp/content/examples/capa-imatge-icgc.md +54 -0
- package/mcp/content/examples/capa-vectorial-icgc.md +57 -0
- package/mcp/content/examples/cerca-territorial.md +69 -0
- package/mcp/content/examples/comparador-mapes.md +58 -0
- package/mcp/content/examples/consulta-elements.md +67 -0
- package/mcp/content/examples/controls-mapa.md +65 -0
- package/mcp/content/examples/estil-relleu.md +75 -0
- package/mcp/content/examples/exportar-mapa.md +52 -0
- package/mcp/content/examples/geocodificador.md +46 -0
- package/mcp/content/examples/llistat-capes.md +61 -0
- package/mcp/content/examples/logo.md +49 -0
- package/mcp/content/examples/mapa-basic.md +60 -0
- package/mcp/content/examples/marcadors.md +60 -0
- package/mcp/content/examples/terreny-3d.md +53 -0
- package/nodeDeploy.js +7 -0
- package/package.json +15 -3
- package/test/exemples/addApiTerritorialICGC.html +2 -2
- package/test/vitest/MapFunctions.test.js +13 -11
- package/.editorconfig +0 -6
- package/.eslintrc +0 -26
- package/.github/workflows/npm-publish.yml +0 -34
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Selector de mapes base (`addBasemapsICGC`)
|
|
2
|
+
|
|
3
|
+
`addBasemapsICGC(basesArray)` afegeix un control que permet canviar entre
|
|
4
|
+
diversos estils base de l'ICGC amb miniatures. Per fer-ho amb estils propis
|
|
5
|
+
(no de l'ICGC), fes servir `addBasemaps(baseLayers)` amb l'estructura
|
|
6
|
+
`{ label, image, url }`.
|
|
7
|
+
|
|
8
|
+
```html
|
|
9
|
+
<!DOCTYPE html>
|
|
10
|
+
<html>
|
|
11
|
+
<head>
|
|
12
|
+
<meta charset="utf-8" />
|
|
13
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
14
|
+
<style>
|
|
15
|
+
body { margin: 0; padding: 0; }
|
|
16
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="map"></div>
|
|
21
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
22
|
+
<script>
|
|
23
|
+
async function initMap() {
|
|
24
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
25
|
+
const map = new mapicgcgl.Map({
|
|
26
|
+
container: "map",
|
|
27
|
+
style: data.Styles.ORTO,
|
|
28
|
+
center: [2.1464, 41.306],
|
|
29
|
+
zoom: 7.4,
|
|
30
|
+
maxZoom: 19,
|
|
31
|
+
hash: true,
|
|
32
|
+
pitch: 0,
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
map.on("load", () => {
|
|
36
|
+
map.addFullscreenControl();
|
|
37
|
+
|
|
38
|
+
// Afegeix diversos basemaps ICGC i genera el selector automàticament.
|
|
39
|
+
const basemapsIcgc = [data.Styles.ORTO, data.Styles.TOPO];
|
|
40
|
+
map.addBasemapsICGC(basemapsIcgc);
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
initMap();
|
|
44
|
+
|
|
45
|
+
// Per afegir basemaps d'altres fonts, segueix aquesta estructura:
|
|
46
|
+
// const baseLayers = [
|
|
47
|
+
// {
|
|
48
|
+
// id: 0,
|
|
49
|
+
// value: "Mapa estàndard",
|
|
50
|
+
// label: "icgc_mapa_estandard_general",
|
|
51
|
+
// url: "https://geoserveis.icgc.cat/styles/mapa-base-topografic.json",
|
|
52
|
+
// image: "https://visors.icgc.cat/contextmaps/imatges_estil/icgc_mapa_estandard.png",
|
|
53
|
+
// },
|
|
54
|
+
// ];
|
|
55
|
+
// map.addBasemaps(baseLayers);
|
|
56
|
+
</script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
62
|
+
|
|
63
|
+
Font: test/exemples/addBasemap.html i Map.js (`addBasemapsICGC`, `addBasemaps`).
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Canviar d'estil i volar a una ubicació
|
|
2
|
+
|
|
3
|
+
Pots commutar entre els estils de `data.Styles` amb `map.setStyle(url)`, i moure la
|
|
4
|
+
càmera amb `map.flyTo(options)` (animat) o `map.jumpTo(options)` (instantani).
|
|
5
|
+
|
|
6
|
+
```html
|
|
7
|
+
<!DOCTYPE html>
|
|
8
|
+
<html>
|
|
9
|
+
<head>
|
|
10
|
+
<meta charset="utf-8" />
|
|
11
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
12
|
+
<style>
|
|
13
|
+
body { margin: 0; padding: 0; }
|
|
14
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div id="map"></div>
|
|
19
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
20
|
+
<script>
|
|
21
|
+
async function initMap() {
|
|
22
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
23
|
+
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.ORTO,
|
|
27
|
+
center: [1.1464, 41.706],
|
|
28
|
+
zoom: 7.4,
|
|
29
|
+
hash: true,
|
|
30
|
+
pitch: 0,
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
map.on("load", () => {
|
|
34
|
+
// Vola animadament a una nova posició i zoom.
|
|
35
|
+
map.flyTo({ center: [2.812786, 41.98559], zoom: 14 });
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Commutar l'estil base (p. ex. des d'un menú de ràdio buttons amb els id
|
|
39
|
+
// 'TOPO', 'LIGHT', 'ORTO', 'ORTO3D', 'ADMIN', 'DARK'...)
|
|
40
|
+
window.switchLayer = function (styleKey) {
|
|
41
|
+
map.setStyle(data.Styles[styleKey]);
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
initMap();
|
|
45
|
+
</script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Amb NPM (si fas servir un bundler): `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.` de `Map`/`Config`.
|
|
51
|
+
|
|
52
|
+
Font: test/exemples/addMapStyle.html i test/exemples/styleOrto3D.html.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# Capa FlatGeobuf (FGB) de l'ICGC
|
|
2
|
+
|
|
3
|
+
`addFGBLayerICGC(url, idLayer, options)` descarrega i afegeix una capa en format
|
|
4
|
+
FlatGeobuf (`.fgb`), molt més lleuger que GeoJSON per a grans volums de dades.
|
|
5
|
+
Les URLs reals surten de `data.Layers.FGBAdmin.<clau>`.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.TOPO,
|
|
27
|
+
center: [1.808, 41.618],
|
|
28
|
+
zoom: 10,
|
|
29
|
+
maxZoom: 19,
|
|
30
|
+
hash: true,
|
|
31
|
+
pitch: 0,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
map.on("load", () => {
|
|
35
|
+
map.addFGBLayerICGC(data.Layers.FGBAdmin.comarquesVigent, "Comarques", {
|
|
36
|
+
type: "line", // "auto" | "line" | "fill" | "circle"
|
|
37
|
+
layout: { visibility: "visible" },
|
|
38
|
+
paint: { "line-color": "grey", "line-width": 2 },
|
|
39
|
+
layerPosition: "top",
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
initMap();
|
|
44
|
+
</script>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
50
|
+
|
|
51
|
+
Font: test/exemples/fetchDataAndMenu.html i Map.js (`addFGBLayerICGC`).
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Afegir una capa GeoJSON pròpia
|
|
2
|
+
|
|
3
|
+
`addLayerGeoJSON(layer, layerPosition)` afegeix dades GeoJSON pròpies (no de
|
|
4
|
+
l'ICGC) com a font i capa de MapLibre en un sol pas.
|
|
5
|
+
|
|
6
|
+
```html
|
|
7
|
+
<!DOCTYPE html>
|
|
8
|
+
<html>
|
|
9
|
+
<head>
|
|
10
|
+
<meta charset="utf-8" />
|
|
11
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
12
|
+
<style>
|
|
13
|
+
body { margin: 0; padding: 0; }
|
|
14
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div id="map"></div>
|
|
19
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
20
|
+
<script>
|
|
21
|
+
async function initMap() {
|
|
22
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
23
|
+
const map = new mapicgcgl.Map({
|
|
24
|
+
container: "map",
|
|
25
|
+
style: data.Styles.TOPO,
|
|
26
|
+
center: [1.001, 41.759],
|
|
27
|
+
zoom: 7.4,
|
|
28
|
+
maxZoom: 19,
|
|
29
|
+
hash: true,
|
|
30
|
+
pitch: 0,
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
map.on("load", () => {
|
|
34
|
+
const geojsonLayer = {
|
|
35
|
+
id: "geojsonTest",
|
|
36
|
+
data: {
|
|
37
|
+
type: "Feature",
|
|
38
|
+
geometry: {
|
|
39
|
+
type: "Polygon",
|
|
40
|
+
coordinates: [[
|
|
41
|
+
[1.3119, 41.489],
|
|
42
|
+
[1.0119, 41.489],
|
|
43
|
+
[1.0119, 42.0489],
|
|
44
|
+
[1.3119, 42.0489],
|
|
45
|
+
]],
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
type: "fill",
|
|
49
|
+
layout: {},
|
|
50
|
+
paint: { "fill-color": "#088", "fill-opacity": 0.8 },
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const layerPosition = "labels"; // 'top', 'lines' o 'labels'
|
|
54
|
+
map.addLayerGeoJSON(geojsonLayer, layerPosition);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
initMap();
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
64
|
+
|
|
65
|
+
Font: test/exemples/addLayerGeojson.html i Map.js (`addLayerGeoJSON`).
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# Capa d'imatge ICGC (ortofoto / WMS)
|
|
2
|
+
|
|
3
|
+
`addImageLayerICGC(url, idLayer, options)` afegeix una capa ràster (WMS) de l'ICGC,
|
|
4
|
+
com ara una sèrie d'ortofoto històrica. Les URLs reals surten de
|
|
5
|
+
`data.Layers.Orto.<clau>` (p. ex. `ortofotoColor2014`, `ortofotoColorVigent`).
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.TOPO,
|
|
27
|
+
center: [2.1464, 41.306],
|
|
28
|
+
zoom: 7.4,
|
|
29
|
+
maxZoom: 19,
|
|
30
|
+
hash: true,
|
|
31
|
+
pitch: 0,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
map.on("load", () => {
|
|
35
|
+
map.addImageLayerICGC(data.Layers.Orto.ortofotoColorVigent, "orto-vigent", {
|
|
36
|
+
type: "raster",
|
|
37
|
+
layout: { visibility: "visible" },
|
|
38
|
+
paint: { "raster-opacity": 1 },
|
|
39
|
+
layerPosition: "labels",
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
initMap();
|
|
44
|
+
</script>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
50
|
+
|
|
51
|
+
Internament, `addImageLayerICGC` valida la URL contra `Layers.Orto` / `Layers.VectorAdmin`
|
|
52
|
+
/ `Layers.WMS` / `Layers.Vector` i crida `addLayerWMS` per afegir la capa ràster.
|
|
53
|
+
|
|
54
|
+
Font: test/exemples/addImageLayerICGC.html i Map.js (`addImageLayerICGC`, `addLayerWMS`).
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Capa vectorial de l'ICGC (`addVectorLayerICGC`)
|
|
2
|
+
|
|
3
|
+
`addVectorLayerICGC(url, idLayer, options)` afegeix una capa vectorial de l'ICGC
|
|
4
|
+
(límits administratius, cobertes del sòl...). Les URLs reals surten de
|
|
5
|
+
`data.Layers.VectorAdmin.<clau>` o `data.Layers.Vector.<clau>`.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.TOPO,
|
|
27
|
+
center: [2.1464, 41.306],
|
|
28
|
+
zoom: 7.4,
|
|
29
|
+
maxZoom: 19,
|
|
30
|
+
hash: true,
|
|
31
|
+
pitch: 0,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
map.on("load", () => {
|
|
35
|
+
const optionsVectorAdmin = {
|
|
36
|
+
type: "line",
|
|
37
|
+
layout: { visibility: "visible" },
|
|
38
|
+
paint: { "line-color": "#4832a8", "line-opacity": 1, "line-width": 1 },
|
|
39
|
+
layerPosition: "top", // 'top', 'lines' o 'labels'
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
map.addVectorLayerICGC(
|
|
43
|
+
data.Layers.VectorAdmin.seccionsCensals2023,
|
|
44
|
+
"municipisVigent",
|
|
45
|
+
optionsVectorAdmin
|
|
46
|
+
);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
initMap();
|
|
50
|
+
</script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
56
|
+
|
|
57
|
+
Font: test/exemples/addVectorLayerICGC.html i Map.js (`addVectorLayerICGC`).
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Cerca territorial en clicar el mapa (`addApiTerritorialICGC`)
|
|
2
|
+
|
|
3
|
+
`addApiTerritorialICGC(options, position)` afegeix un botó (o una consulta activa
|
|
4
|
+
sense botó) que, en clicar el mapa, interroga `api.icgc.cat/territorial` per les
|
|
5
|
+
col·leccions indicades (comarca, municipi, província, parcel·la cadastral...) al
|
|
6
|
+
punt clicat, i mostra un panell d'informació. Per cridar-ho directament sense UI,
|
|
7
|
+
fes servir la funció `searchApiTerritorialICGC(lng, lat, collectionsOrOptions)`.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html>
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="utf-8" />
|
|
14
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
15
|
+
<style>
|
|
16
|
+
body { margin: 0; padding: 0; }
|
|
17
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="map"></div>
|
|
22
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
23
|
+
<script>
|
|
24
|
+
async function initMap() {
|
|
25
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
26
|
+
const map = new mapicgcgl.Map({
|
|
27
|
+
container: "map",
|
|
28
|
+
style: data.Styles.TOPO,
|
|
29
|
+
center: [1.808, 41.618],
|
|
30
|
+
zoom: 10,
|
|
31
|
+
maxZoom: 19,
|
|
32
|
+
hash: true,
|
|
33
|
+
pitch: 0,
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
map.on("load", () => {
|
|
37
|
+
map.addApiTerritorialICGC(
|
|
38
|
+
{
|
|
39
|
+
infoPanel: true, // Mostra un panell lateral amb el resultat.
|
|
40
|
+
IconButton: true, // false = consulta activa sense mostrar cap botó.
|
|
41
|
+
icon: "https://uxwing.com/wp-content/themes/uxwing/download/location-travel-map/unknown-map-location-icon.png",
|
|
42
|
+
collections: ["comarques", "municipis", "provincies", "parcelles-cadastre", "arees-basiques-policials"],
|
|
43
|
+
// Camps a conservar per col·lecció; si no apareixen a la resposta, no es mostren.
|
|
44
|
+
fields: {
|
|
45
|
+
default: ["id", "nom"],
|
|
46
|
+
municipis: ["NOMMUNI"],
|
|
47
|
+
comarques: ["NOMCOMAR"],
|
|
48
|
+
provincies: ["NOMPROV"],
|
|
49
|
+
"parcelles-cadastre": ["refcadp"],
|
|
50
|
+
},
|
|
51
|
+
onResult(resultat, lngLat) {
|
|
52
|
+
console.log("Resultat territorial:", resultat, lngLat);
|
|
53
|
+
return resultat;
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
"top-right"
|
|
57
|
+
);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
initMap();
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
67
|
+
|
|
68
|
+
Font: test/exemples/addApiTerritorialICGC.html i
|
|
69
|
+
src/territorial/searchApiTerritorialICGC.js.
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Comparador de dos mapes (`CompareMaps`)
|
|
2
|
+
|
|
3
|
+
`CompareMaps` (importat juntament amb `Map` i `Config`) crea un control
|
|
4
|
+
lliscant que compara dos mapes costat a costat sobre el mateix contenidor.
|
|
5
|
+
|
|
6
|
+
```html
|
|
7
|
+
<!DOCTYPE html>
|
|
8
|
+
<html>
|
|
9
|
+
<head>
|
|
10
|
+
<meta charset="utf-8" />
|
|
11
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
12
|
+
<style>
|
|
13
|
+
body { margin: 0; padding: 0; }
|
|
14
|
+
#comparison-container, .map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div id="comparison-container">
|
|
19
|
+
<div id="before" class="map"></div>
|
|
20
|
+
<div id="after" class="map"></div>
|
|
21
|
+
</div>
|
|
22
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
23
|
+
<script>
|
|
24
|
+
async function initMap() {
|
|
25
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
26
|
+
|
|
27
|
+
const map1 = new mapicgcgl.Map({
|
|
28
|
+
container: "before",
|
|
29
|
+
style: data.Styles.ORTO,
|
|
30
|
+
center: [1.1464, 41.706],
|
|
31
|
+
zoom: 7.4,
|
|
32
|
+
maxZoom: 19,
|
|
33
|
+
hash: true,
|
|
34
|
+
pitch: 0,
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
const map2 = new mapicgcgl.Map({
|
|
38
|
+
container: "after",
|
|
39
|
+
style: data.Styles.TOPO,
|
|
40
|
+
center: [1.1464, 41.706],
|
|
41
|
+
zoom: 7.4,
|
|
42
|
+
maxZoom: 19,
|
|
43
|
+
hash: true,
|
|
44
|
+
pitch: 0,
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
const container = "#comparison-container";
|
|
48
|
+
new mapicgcgl.CompareMaps(map1, map2, container, {});
|
|
49
|
+
}
|
|
50
|
+
initMap();
|
|
51
|
+
</script>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Amb NPM: `import { Map, Config, CompareMaps } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
57
|
+
|
|
58
|
+
Font: test/exemples/addCompare.html.
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Carregar dades externes i consultar elements amb popup
|
|
2
|
+
|
|
3
|
+
`fetchData(url, idLayer, options)` descarrega GeoJSON extern i l'afegeix com a
|
|
4
|
+
capa. `addFeatureQuery(idLayer, queryFields, popupStyle)` hi afegeix un popup
|
|
5
|
+
d'informació en clicar cada element.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.TOPO,
|
|
27
|
+
center: [2.1464, 41.306],
|
|
28
|
+
zoom: 7.4,
|
|
29
|
+
maxZoom: 19,
|
|
30
|
+
hash: true,
|
|
31
|
+
pitch: 0,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
map.on("load", () => {
|
|
35
|
+
const paintOptions = {
|
|
36
|
+
layout: { visibility: "visible" },
|
|
37
|
+
paint: { "line-color": "red", "line-width": 2, "line-opacity": 1 },
|
|
38
|
+
layerPosition: "top",
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
map.fetchData(
|
|
42
|
+
"https://analisi.transparenciacatalunya.cat/resource/pzaa-n72w.geojson",
|
|
43
|
+
"RutesMontserrat",
|
|
44
|
+
paintOptions
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
const popupStyle = {
|
|
48
|
+
title: "Informació:",
|
|
49
|
+
image: "https://eines.icgc.cat/recursos/logos/icgc_logo_color.png",
|
|
50
|
+
};
|
|
51
|
+
// Camps concrets a mostrar al popup; buit = mostra totes les propietats.
|
|
52
|
+
const queryFields = [];
|
|
53
|
+
map.addFeatureQuery("RutesMontserrat", queryFields, popupStyle);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
initMap();
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Per agrupar les dades sota un menú de capes amb caselles de selecció, fes servir
|
|
63
|
+
`fetchDataAndMenu(url, idLayer, filterField, options)` en lloc de `fetchData`.
|
|
64
|
+
|
|
65
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
66
|
+
|
|
67
|
+
Font: test/exemples/addFeatureQuery.html i test/exemples/fetchData.html.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Controls habituals del mapa
|
|
2
|
+
|
|
3
|
+
Resum dels controls més comuns que es poden afegir a un mapa mapicgc-gl-js:
|
|
4
|
+
geolocalització, navegació, coordenades del ratolí, pantalla completa i
|
|
5
|
+
exportació de la vista actual.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
const map = new mapicgcgl.Map({
|
|
25
|
+
container: "map",
|
|
26
|
+
style: data.Styles.TOPO,
|
|
27
|
+
center: [2.1464, 41.306],
|
|
28
|
+
zoom: 7.4,
|
|
29
|
+
maxZoom: 19,
|
|
30
|
+
hash: true,
|
|
31
|
+
pitch: 0,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
map.on("load", () => {
|
|
35
|
+
// Geolocalització de l'usuari (embolcall de maplibregl.GeolocateControl).
|
|
36
|
+
map.addGeolocateControl(
|
|
37
|
+
{ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true },
|
|
38
|
+
"bottom-right"
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
// Zoom i rotació.
|
|
42
|
+
map.addNavigationControl();
|
|
43
|
+
|
|
44
|
+
// Exportar la vista actual del mapa a imatge/PDF (@watergis/maplibre-gl-export).
|
|
45
|
+
map.addExportControl();
|
|
46
|
+
|
|
47
|
+
// Mostra coordenades (lon/lat i/o UTM) sota el cursor.
|
|
48
|
+
map.addMouseCoordControl({ width: "225px", utm: true, lonlat: true }, "bottom-left");
|
|
49
|
+
|
|
50
|
+
map.addFullscreenControl({}, "top-right");
|
|
51
|
+
|
|
52
|
+
// També es pot fer servir qualsevol control natiu de maplibre-gl, reexportat
|
|
53
|
+
// com a 'mapicgcgl.maplibregl' per no haver de carregar la llibreria per separat.
|
|
54
|
+
map.addControl(new mapicgcgl.maplibregl.NavigationControl(), "bottom-right");
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
initMap();
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Amb NPM: `import { Map, Config, maplibregl } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
64
|
+
|
|
65
|
+
Font: test/exemples/addControl.html i test/exemples/addMouseCoordinateControl.html.
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Estil RELIEF personalitzat
|
|
2
|
+
|
|
3
|
+
A banda dels estils base de l'ICGC, pots definir un estil `RELIEF` totalment
|
|
4
|
+
personalitzat passant un objecte `{ source, colorRelief }` com a `style` del mapa:
|
|
5
|
+
una font `raster-dem` (p. ex. terrarium) i una rampa de colors per elevació.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!DOCTYPE html>
|
|
9
|
+
<html>
|
|
10
|
+
<head>
|
|
11
|
+
<meta charset="utf-8" />
|
|
12
|
+
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
|
|
13
|
+
<style>
|
|
14
|
+
body { margin: 0; padding: 0; }
|
|
15
|
+
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%); }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="map"></div>
|
|
20
|
+
<script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
async function initMap() {
|
|
23
|
+
const data = await mapicgcgl.Config.getConfigICGC();
|
|
24
|
+
|
|
25
|
+
const map = new mapicgcgl.Map({
|
|
26
|
+
container: "map",
|
|
27
|
+
style: {
|
|
28
|
+
source: {
|
|
29
|
+
type: "raster-dem",
|
|
30
|
+
tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
|
|
31
|
+
encoding: "terrarium",
|
|
32
|
+
tileSize: 256,
|
|
33
|
+
maxzoom: 20,
|
|
34
|
+
},
|
|
35
|
+
colorRelief: [
|
|
36
|
+
"interpolate",
|
|
37
|
+
["linear"],
|
|
38
|
+
["elevation"],
|
|
39
|
+
-50, "rgb(30, 70, 130)",
|
|
40
|
+
0, "rgb(120, 180, 210)",
|
|
41
|
+
500, "rgb(245, 220, 110)",
|
|
42
|
+
1400, "rgb(230, 140, 80)",
|
|
43
|
+
2400, "rgb(180, 150, 130)",
|
|
44
|
+
3600, "rgb(255, 255, 255)",
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
center: [1.3237, 42.1995],
|
|
48
|
+
zoom: 11.05,
|
|
49
|
+
maxZoom: 19,
|
|
50
|
+
hash: true,
|
|
51
|
+
pitch: 72,
|
|
52
|
+
bearing: 26.3,
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
map.on("load", () => {
|
|
56
|
+
map.addTerrainICGC(data.Terrains.WORLD30M);
|
|
57
|
+
|
|
58
|
+
// Es pot superposar una ortofoto semitransparent per donar context.
|
|
59
|
+
map.addImageLayerICGC(data.Layers.Orto.ortofotoColor2014, "orto2014", {
|
|
60
|
+
type: "raster",
|
|
61
|
+
layout: { visibility: "visible" },
|
|
62
|
+
paint: { "raster-opacity": 0.26 },
|
|
63
|
+
layerPosition: "labels",
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
initMap();
|
|
68
|
+
</script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Amb NPM: `import { Map, Config } from "mapicgc-gl-js";` i treu el prefix `mapicgcgl.`.
|
|
74
|
+
|
|
75
|
+
Font: test/exemples/addReliefStyle.html.
|