Geocoder

The Geocoder component is a Svelte-based library for integrating geocoding and routing functionalities with a MapLibre GL map. It supports searching for places, drawing points, and handling routing layers on the map.

Features

• Search Autocomplete: Provides a search bar for keyword-based geocoding.
• Dynamic Map Updates: Automatically centers the map and adjusts zoom based on the selected place.
• Routing Layer: Adds a visual marker for routing points on the map.
• Interactivity: Automatically updates or removes layers based on user actions.

Installation

Install the component via npm:

npm install @icgcat/geocoder

Usage

Here’s a basic example to integrate Geocoder with a MapLibre map:

Example

<script>
    import Geocoder from "@icgcat/geocoder";
    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], // Barcelona
            zoom: 10,
        });
    });
</script>

<Geocoder map={map} />
<div id="map" style="height: 500px;"></div>

Component Props

Geocoder

| Prop | Type | Default | Description | |-----------|--------------|---------|----------------------------------------------------------------------------| | map | object | null | Required. A MapLibre GL map instance to integrate with the geocoder. |

Methods Provided

changePlace(coords)

Updates the selected place and centers the map to the new location. It can handle both place-based and coordinate-based inputs.

• Parameters:
  • coords: GeoJSON object representing the selected place or coordinates.

drawPointRouting(point, origin)

Draws a routing point on the map.

• Parameters:
  • point: Object containing { lng, lat } of the point to be drawn.
  • origin: Boolean to indicate if this is the routing origin.

Behavior

Keyword Search

• The geocoder uses a search autocomplete (SearchAutocomplete.svelte) to allow users to input place names or coordinates.
• Upon selecting a result:
  • The map centers on the corresponding location.
  • The changePlaceStore is updated with the new coordinates.

Routing Layer

• The routing layer (routing-in) is dynamically created when a point is added.
• The routing layer is removed if no point is selected.

Zoom Logic

• The zoom level is determined dynamically based on the type of place selected (determinaZoom function).

Events

The component leverages Svelte's reactive stores for state management:

• changePlaceStore: Manages the selected place and map state.
• drawPointRoutingStore: Tracks and updates the routing point.

Example Integration with Context

To integrate custom behavior using Svelte's context API:

<script>
    import { getContext } from "svelte";
    
    const changePlace = getContext("changePlace");
    const drawPointRouting = getContext("drawPointRouting");

    // Use changePlace to center the map
    changePlace({
        geometry: {
            coordinates: [2.1734, 41.3851],
        },
    });

    // Use drawPointRouting to add a routing point
    drawPointRouting({ lng: 2.1734, lat: 41.3851 }, true);
</script>

Styling

The routing layer uses the following default styles:

• Circle Color: #FFA700 (orange).
• Circle Radius: 10.
• Circle Stroke: #FFA700, width 3.

License

This component is open-source and distributed under the MIT License.