MapTiler SDK JS geocoding control how to search places using Svelte

This tutorial shows how to search for places using the Geocoding control. The geocoder component facilitates the use of the MapTiler Geocoding API.

1. Follow the How to display a map in Svelte using MapTile SDK JS tutorial to create a simple full-screen map application. You do not need to add the marker to the map.

2. Install the Geocoding control module

   npm install --save @maptiler/geocoding-control

   Bash

   Copy

3. Import the Geocoding control and the required React functions. Add these lines on top of Map.Svelte file.

   import { onMount, onDestroy } from 'svelte';
   import GeocodingControl from "@maptiler/geocoding-control/svelte/GeocodingControl.svelte";
   import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl";
   import * as maptilersdk from '@maptiler/sdk';
   import {Map, MapStyle, config} from '@maptiler/sdk';
   import "@maptiler/sdk/dist/maptiler-sdk.css";
   

   JavaScript

   Copy

4. Create the mapController variable

   let mapContainer;
   let mapController;
   

   JavaScript

   Copy

5. Create the apiKey variable

   let mapController;
   const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
   
   config.apiKey = apiKey;
   

   JavaScript

   Copy

6. Set the mapController. Use the current MapLibre map.

   onMount(() => {
     const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };
   
     map = new Map({
       container: mapContainer,
       style: MapStyle.STREETS,
       center: [initialState.lng, initialState.lat],
       zoom: initialState.zoom
     });
   
     mapController = createMapLibreGlMapController(map, maptilersdk);
   });
   

   JavaScript

   Copy

7. Add the GeocodingControl component to the map.

   <div class="map-wrap">
     <div class="map" bind:this={mapContainer}></div>
     {#if mapController}
       <div class="geocoding">
         <GeocodingControl {mapController} {apiKey} {maptilersdk} />
       </div>
     {/if}
   </div>
   

   JavaScript

   Copy

8. We’ll need a simple style to correctly render the Geocoding control on the map. Add the following to the end of the <style> tag.

   .geocoding {
     position: absolute;
     top: 10px;
     left: 10px;
   }

   CSS

   Copy

We are finished, your Map.Svelte file should look like this:

<script>
  import { onMount, onDestroy } from 'svelte';
  import GeocodingControl from "@maptiler/geocoding-control/svelte/GeocodingControl.svelte";
  import { createMapLibreGlMapController } from "@maptiler/geocoding-control/maplibregl";
  import * as maptilersdk from '@maptiler/sdk';
  import {Map, MapStyle, config} from '@maptiler/sdk';
  import "@maptiler/sdk/dist/maptiler-sdk.css";

  let map;
  let mapContainer;
  let mapController;
  const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  config.apiKey = apiKey;

  onMount(() => {
    const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };

    map = new Map({
      container: mapContainer,
      style: MapStyle.STREETS,
      center: [initialState.lng, initialState.lat],
      zoom: initialState.zoom
    });

    mapController = createMapLibreGlMapController(map, maptilersdk);
  });


  onDestroy(() => {
    map.remove();
  });
</script>

<div class="map-wrap">
  <div class="map" bind:this={mapContainer}></div>
  {#if mapController}
    <div class="geocoding">
      <GeocodingControl {mapController} {apiKey} {maptilersdk} />
    </div>
  {/if}
</div>

<style>
  .map-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 77px); /* calculate height of the screen minus the heading */
  }

  .map {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .geocoding {
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>

import type { MapController } from "@maptiler/geocoding-control/types";
...
...
...
let mapController: MapController;

MapTiler Geocoding control on GitHub

Learn more

Visit the MapTiler Geocoding API reference for all search options. For example specifying the language of the results, etc.