Leaflet Esri geocoding on Angular not import Geocoding class

Question

I try to use the Geocoding form esri-leaflet library on Angular project but I have import class problem.

This is my component code:

import { Component, OnInit, AfterViewInit, Type } from '@angular/core';
import { latLng, tileLayer, layerGroup, marker, Layer, Control, circle, polygon, Map } from 'leaflet';
import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import GeocodeService from 'esri-leaflet-geocoder/dist/esri-leaflet-geocoder';


@Component({
  selector: 'abd-map',
  templateUrl: './abd-map.component.html',
  styleUrls: ['./abd-map.component.scss']
})
export class AbdMapComponent implements OnInit, AfterViewInit {


  constructor() {}

  ngOnInit(): void {

 }


  ngAfterViewInit(): void{


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

    const googleMap = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    });


    const map = L.map('map', {
        center: [39.61, -105.02],
        zoom: 13,
        layers: [openStreetMap, googleMap]
    });

    const baseMaps = {
      'openStreetMap': openStreetMap,
      'googleMap': googleMap
  };

    L.control.layers(baseMaps).addTo(map);


    const searchControl = esri.Geocoding.geosearch().addTo(map);


  }



}

When I run "ng serve" I have this error:

ERROR in ./src/app/abd-map/abd-map.component.ts 41:30-44 "export 'Geocoding' (imported as 'esri') was not found in 'esri-leaflet'

Someone can help me? thanks.

Answer 1

You should import:

import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css";
import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder";
import * as ELG from "esri-leaflet-geocoder";

and then initialize the plugin like this:

  const searchControl = new ELG.Geosearch();
  const results = new L.LayerGroup().addTo(map);

    searchControl
      .on("results", function (data) {
        results.clearLayers();
        for (let i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      })
      .addTo(map);

Demo