2

angular verison: 8

version in package.json:

"leaflet": "1.5.1",
"leaflet-draw": "1.0.4",
"leaflet-sidebar-v2": "3.0.3",
"esri-leaflet": "2.3.2",
"leaflet-control-geocoder": "1.10.0"

I have import leaflet and other like this:

import * as L from 'leaflet';
import 'leaflet-draw';
import * as esri from 'esri-leaflet';
import 'leaflet-sidebar-v2';
import 'leaflet-control-geocoder';

Now i have to use or leaflet-control-geocoder to implement this function but if i write this:

L.control.geocoder().addTo(map);

angular crash.(Property 'geocoder' does not exist on type 'typeof Control') I try also with esri-leaflet-geocoder, but it's crash too.

any solution?

Gianluca Straffi
  • 21
  • 4

3 Answers3

3

I had the same problem. I fixed it by doing so

import * as L from 'leaflet';
import Geocoder from 'leaflet-control-geocoder';
...
this.map = L.map('map', {
    center: [staticLatLng.lat, staticLatLng.lng], 
    zoom: zoomLevel
});
const GeocoderControl = new Geocoder();
GeocoderControl.addTo(this.map);
GeocoderControl.on('markgeocode', function (e) {
console.log(e);
});
...
Bhagat Gurung
  • 61
  • 4
0

Pls try with uppercase "C" L.Control.geocoder().addTo(map)

or (but that should have the same effect)

var geocoder = new L.Control.geocoder();
map.addControl(geocoder);
Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • Same result. Property 'geocoder' does not exist on type 'typeof Control' – Gianluca Straffi Jan 03 '20 at 09:42
  • Then look into : https://github.com/consbio/Leaflet.ZoomBox/issues/15#issuecomment-429856018 or https://stackoverflow.com/questions/42620830/property-draw-does-not-exist-on-type-typeof-control – Falke Design Jan 03 '20 at 11:14
0

I had the same problem. I added the geocoder inside L.Routing.control, and it works! (actually, VS Code still says Property 'Geocoder' does not exist on type 'typeof Control') but it works!:

L.Routing.control({ waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)], showAlternatives: true, geocoder: L.Control.Geocoder.nominatim() }).addTo(this.map);

I'm working with Angular 8, leaftlet-routing-machine plugin.

ndrpochin
  • 1
  • 1
  • I find a solution! https://www.npmjs.com/package/leaflet-geosearch https://smeijer.github.io/leaflet-geosearch/#search Here there are all that i need! – Gianluca Straffi May 05 '20 at 07:46