After successfully integrating Leaflet into Angular 12 using the following commands:
npm install leaflet
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet
I made sure to include the styles:
./node_modules/leaflet/dist/leaflet.cssangular.json file and added the LeafletModule to my app.module.ts.
The map was functioning properly, however, I wanted to incorporate a search input control from geocoder. To achieve this, I included the necessary link and script for geocoder functionality in my index.html, which can be found here.
This is a snippet of my TypeScript 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:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> `
`contributors',
}
);
tiles.addTo(this.map);
//L.Control.geocoder().addTo(this.map);
}
However, when attempting to add the geocoder control with
L.Control.geocoder().addTo(this.map);property 'geocoder' does not exist on type 'typeof control'