@icgcat/territori 0.0.1

package/README.md

@@ -0,0 +1,166 @@
+# @icgcat/territori
+
+**@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**.
+
+## Features
+- **Municipality (`Municipi`)**: Displays information about a selected municipality on the map.
+- **County (`Comarca`)**: Displays information about a selected county on the map.
+- **Cadastre (`Cadastre`)**: Displays cadastral information for a selected area on the map.
+- Compatible with **MapLibre GL** for rendering data as map layers.
+
+## Installation
+Install the package via npm:
+```bash
+npm install @icgcat/territori
+```
+
+## Usage
+
+### Municipality (Municipi)
+
+The `Municipi` component retrieves and displays information about a municipality when clicking on the map.
+
+**Basic example:**
+```js
+<script>
+    import { Municipi } from "@icgcat/territori";
+    import maplibregl from "maplibre-gl";
+
+    let map;
+
+    onMount(() => {
+        map = new maplibregl.Map({
+            container: "map",
+            style: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",
+            center: [2.1734, 41.3851],
+            zoom: 10,
+        });
+    });
+</script>
+
+<Municipi map={map} color="#ffcc00" />
+<div id="map" style="height: 500px;"></div>
+
+```
+**Props:**
+
+- `map`: (Required) A MapLibre GL instance.
+- `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
+
+##
+
+### County (Comarca)
+
+The `Comarca` component works similarly to `Municipi`, but retrieves and displays county data.
+
+**Example:**
+
+```js
+<script>
+    import { Comarca } from "@icgcat/territori";
+
+    let map;
+
+    onMount(() => {
+        map = new maplibregl.Map({
+            container: "map",
+            style: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",
+            center: [1.5200, 41.3000],
+            zoom: 8,
+        });
+    });
+</script>
+
+<Comarca map={map} color="#8a2be2" />
+<div id="map" style="height: 500px;"></div>
+
+```
+**Props:**
+
+- `map`: (Required) A MapLibre GL instance.
+- `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
+
+##
+
+### Cadastre (Cadastre)
+
+The `Cadastre` component retrieves cadastral data and displays it on the map.
+
+**Example:**
+
+```js
+<script>
+    import { Cadastre } from "@icgcat/territori";
+
+    let map;
+
+    onMount(() => {
+        map = new maplibregl.Map({
+            container: "map",
+            style: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json",
+            center: [2.1500, 41.3800],
+            zoom: 14,
+        });
+    });
+</script>
+
+<Cadastre map={map} color="#00cc66" />
+<div id="map" style="height: 500px;"></div>
+
+```
+
+**Props:**
+
+- `map`: (Required) A MapLibre GL instance.
+- `color`: (Optional) Fill color for the municipality layer. Defaults to #f0f0f0 if not provided.
+
+<br>
+
+## Behavior
+
+For all components:
+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.
+2. The data is displayed as a layer on the map with the specified or default fill color.
+3. If no data is available, the existing layer is removed (if present).
+
+## Styling
+
+Each component includes default styles for displaying data. You can customize these styles as needed.
+
+```css
+#apinfo {
+    position: fixed;
+    top: 10px;
+    border-radius: 8px;
+    padding: 10px;
+    background-color: rgb(221, 220, 220);
+    color: black;
+    border: 1px solid rgb(87, 87, 87);
+}
+```
+
+## API Endpoints
+
+The components use the following ICGC API endpoints:
+
+- Municipi: `https://api.icgc.cat/territori/municipis/geo/{lon}/{lat}`
+- Comarca: `https://api.icgc.cat/territori/comarques/geo/{lon}/{lat}`
+- Cadastre: `https://api.icgc.cat/territori/cadastre/geo/{lon}/{lat}`
+
+## Contributing
+
+To contribute to this project:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature-new-feature`).
+3. Commit your changes (`git commit -m 'Add new feature'`).
+4. Push to the branch (`git push origin feature-new-feature`).
+5. Open a pull request.
+
+## License
+
+This project is licensed under the MIT License.
+
+##
+
+For further inquiries or support, please contact the [ICGC development team](https://icgc.cat).

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@icgcat/territori",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "Geostarters",
+  "license": "ISC",
+  "description": "A Svelte API Territorial component",
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.3",
+    "vite": "^6.0.3"
+  }
+}

package/src/Cadastre.svelte

@@ -0,0 +1,91 @@
+<script>
+    export const componentProps = {
+        map: { default: null },
+        color: { default: undefined }, // Es permet no especificar color
+    };
+
+    const { map, color } = $props();
+    let cadastre = $state();
+
+    // Valor per defecte del color
+    const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
+
+    map.on("click", function (e) {
+        let lon = e.lngLat.lng;
+        let lat = e.lngLat.lat;
+        apiConnect(lat, lon, "cadastre");
+    });
+
+    async function apiConnect(lat, lon, service) {
+        let response;
+        try {
+            response = await fetch(
+                `https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`,
+            );
+        } catch (error) {
+            console.error("Error", error);
+        }
+        const dades = await response.json();
+        if (dades.responses) {
+            cadastre = dades.responses.features[0].properties.localId;
+
+            if (!map.getLayer("punts")) {
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.6,
+                    },
+                });
+            } else {
+                map.removeLayer("punts").removeSource("punts");
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.75,
+                    },
+                });
+            }
+        } else {
+            cadastre = dades.error;
+            if (map.getLayer("punts")) {
+                map.removeLayer("punts").removeSource("punts");
+            }
+        }
+    }
+</script>
+
+{#if cadastre}
+    <div id="apinfo">{cadastre}</div>
+{/if}
+
+<style>
+    #apinfo {
+        position: fixed;
+        top: 10px;
+        border-radius: 8px;
+        padding: 10px;
+        background-color: rgb(221, 220, 220);
+        color: black;
+        border: 1px solid rgb(87, 87, 87);
+    }
+</style>

package/src/Comarca.svelte

@@ -0,0 +1,91 @@
+<script>
+    export const componentProps = {
+        map: { default: null },
+        color: { default: undefined }, // Es permet no especificar color
+    };
+
+    const { map, color } = $props();
+    let comarca = $state();
+
+    // Valor per defecte del color
+    const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
+
+    map.on("click", function (e) {
+        let lon = e.lngLat.lng;
+        let lat = e.lngLat.lat;
+        apiConnect(lat, lon, "comarques");
+    });
+
+    async function apiConnect(lat, lon, service) {
+        let response;
+        try {
+            response = await fetch(
+                `https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`,
+            );
+        } catch (error) {
+            console.error("Error", error);
+        }
+        const dades = await response.json();
+        if (dades.responses) {
+            comarca = dades.responses.features[0].properties.NOMCOMAR;
+
+            if (!map.getLayer("punts")) {
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.6,
+                    },
+                });
+            } else {
+                map.removeLayer("punts").removeSource("punts");
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.75,
+                    },
+                });
+            }
+        } else {
+            comarca = dades.error;
+            if (map.getLayer("punts")) {
+                map.removeLayer("punts").removeSource("punts");
+            }
+        }
+    }
+</script>
+
+{#if comarca}
+    <div id="apinfo">{comarca}</div>
+{/if}
+
+<style>
+    #apinfo {
+        position: fixed;
+        top: 10px;
+        border-radius: 8px;
+        padding: 10px;
+        background-color: rgb(221, 220, 220);
+        color: black;
+        border: 1px solid rgb(87, 87, 87);
+    }
+</style>

package/src/Municipi.svelte

@@ -0,0 +1,91 @@
+<script>
+    export const componentProps = {
+        map: { default: null },
+        color: { default: undefined }, // Es permet no especificar color
+    };
+
+    const { map, color } = $props();
+    let municipi = $state();
+
+    // Valor per defecte del color
+    const fillColor = color || "#f0f0f0"; // Utilitza el color o un valor predeterminat
+
+    map.on("click", function (e) {
+        let lon = e.lngLat.lng;
+        let lat = e.lngLat.lat;
+        apiConnect(lat, lon, "municipis");
+    });
+
+    async function apiConnect(lat, lon, service) {
+        let response;
+        try {
+            response = await fetch(
+                `https://api.icgc.cat/territori/${service}/geo/${lon}/${lat}`,
+            );
+        } catch (error) {
+            console.error("Error", error);
+        }
+        const dades = await response.json();
+        if (dades.responses) {
+            municipi = dades.responses.features[0].properties.NOMMUNI;
+
+            if (!map.getLayer("punts")) {
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.6,
+                    },
+                });
+            } else {
+                map.removeLayer("punts").removeSource("punts");
+                map.addSource("punts", {
+                    type: "geojson",
+                    data: {
+                        type: "FeatureCollection",
+                        features: dades.responses.features,
+                    },
+                });
+                map.addLayer({
+                    id: "punts",
+                    type: "fill",
+                    source: "punts",
+                    paint: {
+                        "fill-color": fillColor,
+                        "fill-opacity": 0.75,
+                    },
+                });
+            }
+        } else {
+            municipi = dades.error;
+            if (map.getLayer("punts")) {
+                map.removeLayer("punts").removeSource("punts");
+            }
+        }
+    }
+</script>
+
+{#if municipi}
+    <div id="apinfo">{municipi}</div>
+{/if}
+
+<style>
+    #apinfo {
+        position: fixed;
+        top: 10px;
+        border-radius: 8px;
+        padding: 10px;
+        background-color: rgb(221, 220, 220);
+        color: black;
+        border: 1px solid rgb(87, 87, 87);
+    }
+</style>

package/src/index.js

@@ -0,0 +1,4 @@
+import Municipi from "./Municipi.svelte";
+import Comarca from "./Comarca.svelte";
+import Cadastre from "./Cadastre.svelte";
+export { Municipi, Comarca, Cadastre };

package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
+
+export default defineConfig({
+    plugins: [svelte({ preprocess: sveltePreprocess() })],
+    build: {
+        lib: {
+            entry: "src/index.js",
+            name: "Territori",
+            formats: ["es", "cjs", "umd"],
+            fileName: (format) => `territori.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["svelte"],
+            output: {
+                globals: {
+                    svelte: "Svelte",
+                },
+            },
+        },
+    },
+});