How to import leaflet-control-geocoder in Angular 12.x?

user_16459787 0
Viewed 756

I've installed leaflet in angular 12 using the following commands:

npm install leaflet
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet

I included the styles: ./node_modules/leaflet/dist/leaflet.css on the angular.json file and the LeafletModule no my app.module.ts.

The map works fine, however, I'm trying to add the search input control from geocoder, for that I've included the link and script for geocoder links to my index.html, found here.

And this is my ts file:

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})

export class AppComponent implements AfterViewInit {
  title = 'leaf-let';

  private map: any;

  constructor() {}

  ngAfterViewInit(): void {
   this.initMap();
  }

  private initMap(): void {
   this.map = L.map('map').setView([14.094167, -87.206667], 15);

   const tiles = L.tileLayer(
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   {
     maxZoom: 19,
     attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ` 
       `contributors',
   }
 );

 tiles.addTo(this.map);

  //L.Control.geocoder().addTo(this.map);
 }

But when I do L.Control.geocoder().addTo(this.map); it gives me the error:

property 'geocoder' does not exist on type 'typeof control'

leaflet angular typescript
1 Answers

You have not imported the library and its style:

  1. Install leaflet-control-geocoder
  2. import "leaflet-control-geocoder/dist/Control.Geocoder.css";
  3. import "leaflet-control-geocoder/dist/Control.Geocoder.js";

Also it seems you are not using ngx-leaflet but vanilla leaflet instead. If that is the case you should go with the following approach:

private initMap(): void {
    this.map = L.map("map").setView([14.094167, -87.206667], 15);

    const tiles = L.tileLayer(
      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }
    ).addTo(this.map);

    tiles.addTo(this.map);

    (L.Control as any).geocoder().addTo(this.map);
}

Initialize the plugin using (L.Control as any) to avoid getting the typescript error but the error you were getting was because you did not import the library in advance.

Demo

user_49295310
Related