Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ESRI Leaflet + Types + Angular 4

See original GitHub issue


I’m trying to get esri-leaflet and leaflet to work with typescript typings. I have installed the types into my package.json, and successfully imported them (with no errors) in vscode.

However, when running the application and defining a basemap layer, I get the error: ERROR TypeError: Cannot read property 'basemapLayer' of undefined I found out that the application does not bind esri to the leaflet module (L.esri is undefined).

Am I doing something wrong?

  • Browser and version:

Chrome 59

  • Version of Leaflet (L.version):


  • Version of esri Leaflet (L.esri.VERSION):


Steps to reproduce the error:

  1. Add leaflet, esri-leaflet, @types/leaflet, @types/esri-leaflet to package.json
  2. Import the files within my application: import * as L from 'leaflet' import 'esri-leaflet'
  3. Try to use esri-leaflet as basemap: basemap = L.esri.basemapLayer('oceans')

I then get the error described above: ERROR TypeError: Cannot read property 'basemapLayer' of undefined

I have searched throughout the issues, and found a similar issue, but I had no success in solving it.

I’m not using the CDN, I’m loading/bundling the library using:


Thanks for the help! Regards, Tiago

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

calegarifabiocommented, Jun 1, 2020

const esri = require(‘esri-leaflet’); works for me!

tgmendescommented, Sep 13, 2017

@HarelM Thanks a lot! This worked for me.

  1. Removed ESRI typings from package.json and node_modules
  2. Used the import you mentioned: `import * as esri from ‘esri-leaflet’;
  3. Used esri directly (i.e. not as an extension of Leaflet).
  4. Still could use leaflet typings without a problem.

However, I still consider this to be a workaround, since it’s still not possible to use esri-leaflet’s typings.

Read more comments on GitHub >

github_iconTop Results From Across the Web

@types/esri-leaflet - npm
@types/esri-leaflet. TypeScript icon, indicating that this package has built-in type declarations. 2.1.9 • Public • Published a year ago.
Read more >
Wiring Leaflet, ESRI-leaflet, and Angular for a web map
Basic prototype wiring to map geospatial information using Leaflet, ESRI-leaflet, Angular 4. There are several nice examples out there, but it ...
Read more >
esri-leaflet NOT showing in angular typescript it doesn't ...
I am not able to show the map or to use the search offered by esri-leafleft: here the code ...
Read more >
Leaflet-ESRI-DynamicMapLayer - StackBlitz
import { Component, OnInit } from '@angular/ ... import * as Esri from 'esri-leaflet'; ... title = 'leaflet-tile-load-example';. map: L.Map;.
Read more >
Esri Leaflet | ArcGIS Developers
Esri Leaflet is a light-weight, open source Leaflet plug-in for accessing ArcGIS location services and ArcGIS Enterprise services . You can use the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found