@icgcat/territori 0.0.2 → 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 +20 -12
  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
@@ -6,9 +6,9 @@
6
6
 
7
7
  <div style="text-align:center">
8
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)
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
12
  <img src="https://eines.icgc.cat/recursos//images/JS-logo.svg" width="20px"/>
13
13
  </div>
14
14
 
@@ -52,14 +52,16 @@ The `Municipi` component retrieves and displays information about a municipality
52
52
  });
53
53
  </script>
54
54
 
55
- <Municipi map={map} color="#ffcc00" />
55
+ <Municipi map={map} color="#ffcc00" addGeometry={true} onSelect={handleSelect} />
56
56
  <div id="map" style="height: 500px;"></div>
57
57
 
58
58
  ```
59
59
  **Props:**
60
60
 
61
61
  - `map`: (Required) A MapLibre GL instance.
62
- - `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.
63
65
 
64
66
  ##
65
67
 
@@ -85,14 +87,16 @@ The `Comarca` component works similarly to `Municipi`, but retrieves and display
85
87
  });
86
88
  </script>
87
89
 
88
- <Comarca map={map} color="#8a2be2" />
90
+ <Comarca map={map} color="#8a2be2" addGeometry={true} onSelect={handleSelect} />
89
91
  <div id="map" style="height: 500px;"></div>
90
92
 
91
93
  ```
92
94
  **Props:**
93
95
 
94
96
  - `map`: (Required) A MapLibre GL instance.
95
- - `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.
96
100
 
97
101
  ##
98
102
 
@@ -118,7 +122,7 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
118
122
  });
119
123
  </script>
120
124
 
121
- <Cadastre map={map} color="#00cc66" />
125
+ <Cadastre map={map} color="#00cc66" addGeometry={true} onSelect={handleSelect} />
122
126
  <div id="map" style="height: 500px;"></div>
123
127
 
124
128
  ```
@@ -126,7 +130,9 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
126
130
  **Props:**
127
131
 
128
132
  - `map`: (Required) A MapLibre GL instance.
129
- - `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.
130
136
 
131
137
  <br>
132
138
 
@@ -134,8 +140,9 @@ The `Cadastre` component retrieves cadastral data and displays it on the map.
134
140
 
135
141
  For all components:
136
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.
137
- 2. The data is displayed as a layer on the map with the specified or default fill color.
138
- 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).
139
146
 
140
147
  ## Styling
141
148
 
@@ -177,4 +184,5 @@ This project is licensed under the MIT License.
177
184
 
178
185
  ##
179
186
 
180
- 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.2",
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>