API Territorial Component

@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:

npm install @icgcat/territori

Usage

Municipality (Municipi)

The Municipi component retrieves and displays information about a municipality when clicking on the map.

Basic example:

<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" addGeometry={true} onSelect={handleSelect} />
<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.
• addGeometry: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to true.
• onSelect: (Optional) Callback function triggered when a municipality is selected, receiving the feature data.

County (Comarca)

The Comarca component works similarly to Municipi, but retrieves and displays county data.

Example:

<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" addGeometry={true} onSelect={handleSelect} />
<div id="map" style="height: 500px;"></div>

Props:

• map: (Required) A MapLibre GL instance.
• color: (Optional) Fill color for the county layer. Defaults to #f0f0f0 if not provided.
• addGeometry: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to true.
• onSelect: (Optional) Callback function triggered when a county is selected, receiving the feature data.

Cadastre (Cadastre)

The Cadastre component retrieves cadastral data and displays it on the map.

Example:

<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" addGeometry={true} onSelect={handleSelect} />
<div id="map" style="height: 500px;"></div>

Props:

• map: (Required) A MapLibre GL instance.
• color: (Optional) Fill color for the cadastral layer. Defaults to #f0f0f0 if not provided.
• addGeometry: (Optional) Boolean to control whether the geometry should be added to the map. Defaults to true.
• onSelect: (Optional) Callback function triggered when a cadastral feature is selected, receiving the feature data.

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. If onSelect is provided, it will be called with the feature data.
3. If addGeometry is true, the geometry is displayed as a layer on the map with the specified or default fill color.
4. 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.

#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.