@icgcat/territori 0.0.1 → 0.0.3

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.
Files changed (5) hide show
  1. package/README.md +32 -10
  2. package/package.json +1 -1
  3. package/src/Cadastre.svelte +47 -58
  4. package/src/Comarca.svelte +47 -59
  5. package/src/Municipi.svelte +45 -55
package/README.md CHANGED
@@ -1,4 +1,18 @@
1
- # @icgcat/territori
1
+ <div style="text-align:center">
2
+ <p>
3
+ <img src="https://eines.icgc.cat/recursos/logos/icgc_logo_color.png" alt="ICGC Logo" width="250px">
4
+ </p>
5
+ </div>
6
+
7
+ <div style="text-align:center">
8
+
9
+ [![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg?style=flat)](LICENSE.txt)
10
+ [![Version](https://img.shields.io/npm/v/@icgcat/territori?style=flat)](https://www.npmjs.com/package/@icgcat/territori)
11
+ [![X](https://img.shields.io/twitter/follow/icgcat?style=social)](https://twitter.com/icgcat)
12
+ <img src="https://eines.icgc.cat/recursos//images/JS-logo.svg" width="20px"/>
13
+ </div>
14
+
15
+ # API Territorial Component
2
16
 
3
17
  **@icgcat/territori** is a Svelte component library designed to interact with territorial services provided by the ICGC. It allows for the visualization of municipalities, counties, and cadastral data on an interactive map using **MapLibre**.
4
18
 
@@ -38,14 +52,16 @@ The `Municipi` component retrieves and displays information about a municipality
38
52
  });
39
53
  </script>
40
54
 
41
- <Municipi map={map} color="#ffcc00" />
55
+ <Municipi map={map} color="#ffcc00" addGeometry={true} onSelect={handleSelect} />
42
56
  <div id="map" style="height: 500px;"></div>
43
57
 
44
58
  ```
45
59
  **Props:**
46
60
 
47
61
  - `map`: (Required) A MapLibre GL instance.
48
- - `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
62
+ - `color`: (Optional) Fill color for the municipality layer. Defaults to `#f0f0f0` if not provided.
63
+ - `addGeometry`: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to `true`.
64
+ - `onSelect`: (Optional) Callback function triggered when a municipality is selected, receiving the feature data.
49
65
 
50
66
  ##
51
67
 
@@ -71,14 +87,16 @@ The `Comarca` component works similarly to `Municipi`, but retrieves and display
71
87
  });
72
88
  </script>
73
89
 
74
- <Comarca map={map} color="#8a2be2" />
90
+ <Comarca map={map} color="#8a2be2" addGeometry={true} onSelect={handleSelect} />
75
91
  <div id="map" style="height: 500px;"></div>
76
92
 
77
93
  ```
78
94
  **Props:**
79
95
 
80
96
  - `map`: (Required) A MapLibre GL instance.
81
- - `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
97
+ - `color`: (Optional) Fill color for the county layer. Defaults to `#f0f0f0` if not provided.
98
+ - `addGeometry`: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to `true`.
99
+ - `onSelect`: (Optional) Callback function triggered when a county is selected, receiving the feature data.
82
100
 
83
101
  ##
84
102
 
@@ -104,7 +122,7 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
104
122
  });
105
123
  </script>
106
124
 
107
- <Cadastre map={map} color="#00cc66" />
125
+ <Cadastre map={map} color="#00cc66" addGeometry={true} onSelect={handleSelect} />
108
126
  <div id="map" style="height: 500px;"></div>
109
127
 
110
128
  ```
@@ -112,7 +130,9 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
112
130
  **Props:**
113
131
 
114
132
  - `map`: (Required) A MapLibre GL instance.
115
- - `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
133
+ - `color`: (Optional) Fill color for the cadastral layer. Defaults to `#f0f0f0` if not provided.
134
+ - `addGeometry`: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to `true`.
135
+ - `onSelect`: (Optional) Callback function triggered when a cadastral feature is selected, receiving the feature data.
116
136
 
117
137
  <br>
118
138
 
@@ -120,8 +140,9 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
120
140
 
121
141
  For all components:
122
142
  1. When the user clicks on the map, the component sends a request to the ICGC territorial API to fetch data for the clicked coordinates.
123
- 2. The data is displayed as a layer on the map with the specified or default fill color.
124
- 3. If no data is available, the existing layer is removed (if present).
143
+ 2. If `onSelect` is provided, it will be called with the feature data.
144
+ 3. If `addGeometry` is `true`, the geometry is displayed as a layer on the map with the specified or default fill color.
145
+ 4. If no data is available, the existing layer is removed (if present).
125
146
 
126
147
  ## Styling
127
148
 
@@ -163,4 +184,5 @@ This project is licensed under the MIT License.
163
184
 
164
185
  ##
165
186
 
166
- For further inquiries or support, please contact the [ICGC development team](https://icgc.cat).
187
+ For further inquiries or support, please contact the [ICGC development team](https://icgc.cat).
188
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@icgcat/territori",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "main": "src/index.js",
5
5
  "type": "module",
6
6
  "scripts": {
package/src/Cadastre.svelte CHANGED
@@ -2,10 +2,11 @@
2
2
  export const componentProps = {
3
3
  map: { default: null },
4
4
  color: { default: undefined }, // Es permet no especificar color
5
+ addGeometry: { default: true }, // Propietat per condicionar la geometria
6
+ onSelect: { default: null }, // Funció callback per gestionar l'esdeveniment click
5
7
  };
6
8
 
7
- const { map, color } = $props();
8
- let cadastre = $state();
9
+ const { map, color, addGeometry, onSelect } = $props();
9
10
 
10
11
  // Valor per defecte del color
11
12
  const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
@@ -27,65 +28,53 @@
27
28
  }
28
29
  const dades = await response.json();
29
30
  if (dades.responses) {
30
- cadastre = dades.responses.features[0].properties.localId;
31
+ if (onSelect) {
32
+ onSelect(dades.responses.features[0]);
33
+ }
31
34
 
32
- if (!map.getLayer("punts")) {
33
- map.addSource("punts", {
34
- type: "geojson",
35
- data: {
36
- type: "FeatureCollection",
37
- features: dades.responses.features,
38
- },
39
- });
40
- map.addLayer({
41
- id: "punts",
42
- type: "fill",
43
- source: "punts",
44
- paint: {
45
- "fill-color": fillColor,
46
- "fill-opacity": 0.6,
47
- },
48
- });
35
+ if (addGeometry) {
36
+ if (!map.getLayer("punts")) {
37
+ map.addSource("punts", {
38
+ type: "geojson",
39
+ data: {
40
+ type: "FeatureCollection",
41
+ features: dades.responses.features,
42
+ },
43
+ });
44
+ map.addLayer({
45
+ id: "punts",
46
+ type: "fill",
47
+ source: "punts",
48
+ paint: {
49
+ "fill-color": fillColor,
50
+ "fill-opacity": 0.6,
51
+ },
52
+ });
53
+ } else {
54
+ map.removeLayer("punts").removeSource("punts");
55
+ map.addSource("punts", {
56
+ type: "geojson",
57
+ data: {
58
+ type: "FeatureCollection",
59
+ features: dades.responses.features,
60
+ },
61
+ });
62
+ map.addLayer({
63
+ id: "punts",
64
+ type: "fill",
65
+ source: "punts",
66
+ paint: {
67
+ "fill-color": fillColor,
68
+ "fill-opacity": 0.75,
69
+ },
70
+ });
71
+ }
49
72
  } else {
50
- map.removeLayer("punts").removeSource("punts");
51
- map.addSource("punts", {
52
- type: "geojson",
53
- data: {
54
- type: "FeatureCollection",
55
- features: dades.responses.features,
56
- },
57
- });
58
- map.addLayer({
59
- id: "punts",
60
- type: "fill",
61
- source: "punts",
62
- paint: {
63
- "fill-color": fillColor,
64
- "fill-opacity": 0.75,
65
- },
66
- });
67
- }
68
- } else {
69
- cadastre = dades.error;
70
- if (map.getLayer("punts")) {
71
- map.removeLayer("punts").removeSource("punts");
73
+ cadastre = dades.error;
74
+ if (addGeometry && map.getLayer("punts")) {
75
+ map.removeLayer("punts").removeSource("punts");
76
+ }
72
77
  }
73
78
  }
74
79
  }
75
80
  </script>
76
-
77
- {#if cadastre}
78
- <div id="apinfo">{cadastre}</div>
79
- {/if}
80
-
81
- <style>
82
- #apinfo {
83
- position: fixed;
84
- top: 10px;
85
- border-radius: 8px;
86
- padding: 10px;
87
- background-color: rgb(221, 220, 220);
88
- color: black;
89
- border: 1px solid rgb(87, 87, 87);
90
- }
91
- </style>
package/src/Comarca.svelte CHANGED
@@ -2,10 +2,11 @@
2
2
  export const componentProps = {
3
3
  map: { default: null },
4
4
  color: { default: undefined }, // Es permet no especificar color
5
+ addGeometry: { default: true }, // Propietat per condicionar la geometria
6
+ onSelect: { default: null }, // Funció callback per gestionar l'esdeveniment click
5
7
  };
6
8
 
7
- const { map, color } = $props();
8
- let comarca = $state();
9
+ const { map, color, addGeometry, onSelect } = $props();
9
10
 
10
11
  // Valor per defecte del color
11
12
  const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
@@ -27,65 +28,52 @@
27
28
  }
28
29
  const dades = await response.json();
29
30
  if (dades.responses) {
30
- comarca = dades.responses.features[0].properties.NOMCOMAR;
31
-
32
- if (!map.getLayer("punts")) {
33
- map.addSource("punts", {
34
- type: "geojson",
35
- data: {
36
- type: "FeatureCollection",
37
- features: dades.responses.features,
38
- },
39
- });
40
- map.addLayer({
41
- id: "punts",
42
- type: "fill",
43
- source: "punts",
44
- paint: {
45
- "fill-color": fillColor,
46
- "fill-opacity": 0.6,
47
- },
48
- });
49
- } else {
50
- map.removeLayer("punts").removeSource("punts");
51
- map.addSource("punts", {
52
- type: "geojson",
53
- data: {
54
- type: "FeatureCollection",
55
- features: dades.responses.features,
56
- },
57
- });
58
- map.addLayer({
59
- id: "punts",
60
- type: "fill",
61
- source: "punts",
62
- paint: {
63
- "fill-color": fillColor,
64
- "fill-opacity": 0.75,
65
- },
66
- });
31
+ if (onSelect) {
32
+ onSelect(dades.responses.features[0]);
67
33
  }
68
- } else {
69
- comarca = dades.error;
70
- if (map.getLayer("punts")) {
71
- map.removeLayer("punts").removeSource("punts");
34
+ if (addGeometry) {
35
+ if (!map.getLayer("punts")) {
36
+ map.addSource("punts", {
37
+ type: "geojson",
38
+ data: {
39
+ type: "FeatureCollection",
40
+ features: dades.responses.features,
41
+ },
42
+ });
43
+ map.addLayer({
44
+ id: "punts",
45
+ type: "fill",
46
+ source: "punts",
47
+ paint: {
48
+ "fill-color": fillColor,
49
+ "fill-opacity": 0.6,
50
+ },
51
+ });
52
+ } else {
53
+ map.removeLayer("punts").removeSource("punts");
54
+ map.addSource("punts", {
55
+ type: "geojson",
56
+ data: {
57
+ type: "FeatureCollection",
58
+ features: dades.responses.features,
59
+ },
60
+ });
61
+ map.addLayer({
62
+ id: "punts",
63
+ type: "fill",
64
+ source: "punts",
65
+ paint: {
66
+ "fill-color": fillColor,
67
+ "fill-opacity": 0.75,
68
+ },
69
+ });
70
+ }
71
+ } else {
72
+ comarca = dades.error;
73
+ if (addGeometry && map.getLayer("punts")) {
74
+ map.removeLayer("punts").removeSource("punts");
75
+ }
72
76
  }
73
77
  }
74
78
  }
75
79
  </script>
76
-
77
- {#if comarca}
78
- <div id="apinfo">{comarca}</div>
79
- {/if}
80
-
81
- <style>
82
- #apinfo {
83
- position: fixed;
84
- top: 10px;
85
- border-radius: 8px;
86
- padding: 10px;
87
- background-color: rgb(221, 220, 220);
88
- color: black;
89
- border: 1px solid rgb(87, 87, 87);
90
- }
91
- </style>
package/src/Municipi.svelte CHANGED
@@ -2,10 +2,11 @@
2
2
  export const componentProps = {
3
3
  map: { default: null },
4
4
  color: { default: undefined }, // Es permet no especificar color
5
+ addGeometry: { default: true }, // Propietat per condicionar la geometria
6
+ onSelect: { default: null }, // Funció callback per gestionar l'esdeveniment click
5
7
  };
6
8
 
7
- const { map, color } = $props();
8
- let municipi = $state();
9
+ const { map, color, addGeometry, onSelect } = $props();
9
10
 
10
11
  // Valor per defecte del color
11
12
  const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
@@ -27,65 +28,54 @@
27
28
  }
28
29
  const dades = await response.json();
29
30
  if (dades.responses) {
30
- municipi = dades.responses.features[0].properties.NOMMUNI;
31
+ // Si hi ha una funció onSelect, la cridem passant les dades del municipi
32
+ if (onSelect) {
33
+ onSelect(dades.responses.features[0]);
34
+ }
31
35
 
32
- if (!map.getLayer("punts")) {
33
- map.addSource("punts", {
34
- type: "geojson",
35
- data: {
36
- type: "FeatureCollection",
37
- features: dades.responses.features,
38
- },
39
- });
40
- map.addLayer({
41
- id: "punts",
42
- type: "fill",
43
- source: "punts",
44
- paint: {
45
- "fill-color": fillColor,
46
- "fill-opacity": 0.6,
47
- },
48
- });
49
- } else {
50
- map.removeLayer("punts").removeSource("punts");
51
- map.addSource("punts", {
52
- type: "geojson",
53
- data: {
54
- type: "FeatureCollection",
55
- features: dades.responses.features,
56
- },
57
- });
58
- map.addLayer({
59
- id: "punts",
60
- type: "fill",
61
- source: "punts",
62
- paint: {
63
- "fill-color": fillColor,
64
- "fill-opacity": 0.75,
65
- },
66
- });
36
+ if (addGeometry) {
37
+ if (!map.getLayer("punts")) {
38
+ map.addSource("punts", {
39
+ type: "geojson",
40
+ data: {
41
+ type: "FeatureCollection",
42
+ features: dades.responses.features,
43
+ },
44
+ });
45
+ map.addLayer({
46
+ id: "punts",
47
+ type: "fill",
48
+ source: "punts",
49
+ paint: {
50
+ "fill-color": fillColor,
51
+ "fill-opacity": 0.6,
52
+ },
53
+ });
54
+ } else {
55
+ map.removeLayer("punts").removeSource("punts");
56
+ map.addSource("punts", {
57
+ type: "geojson",
58
+ data: {
59
+ type: "FeatureCollection",
60
+ features: dades.responses.features,
61
+ },
62
+ });
63
+ map.addLayer({
64
+ id: "punts",
65
+ type: "fill",
66
+ source: "punts",
67
+ paint: {
68
+ "fill-color": fillColor,
69
+ "fill-opacity": 0.75,
70
+ },
71
+ });
72
+ }
67
73
  }
68
74
  } else {
69
75
  municipi = dades.error;
70
- if (map.getLayer("punts")) {
76
+ if (addGeometry && map.getLayer("punts")) {
71
77
  map.removeLayer("punts").removeSource("punts");
72
78
  }
73
79
  }
74
80
  }
75
81
  </script>
76
-
77
- {#if municipi}
78
- <div id="apinfo">{municipi}</div>
79
- {/if}
80
-
81
- <style>
82
- #apinfo {
83
- position: fixed;
84
- top: 10px;
85
- border-radius: 8px;
86
- padding: 10px;
87
- background-color: rgb(221, 220, 220);
88
- color: black;
89
- border: 1px solid rgb(87, 87, 87);
90
- }
91
- </style>