Install and set up

You can access Esri Leaflet modules on the CDN or you can install them with NPM. The builds are also available for download on GitHub. To find the latest release and to learn about older versions and compatibility, go to Releases.

Leaflet library

leaflet

CDNNPM
Use dark colors for code blocks
  
1
2
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>

Install Leaflet from npm:

Use dark colors for code blocks
 
1
npm install leaflet --save

Esri Leaflet plugin

The main CDN and NPM references are listed below. To find other Esri and community plugins, go to Plugins.

esri-leaflet

Access the core mapping functionality to interact with ArcGIS location services.

CDNNPM
Use dark colors for code blocks
   
1
2
3
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

Install Esri Leaflet from npm:

Use dark colors for code blocks
 
1
npm install esri-leaflet --save

esri-leaflet-vector

Access and display vector tile layers and vector basemap layers.

CDNNPM
Use dark colors for code blocks
    
1
2
3
4
<!-- Vector Tiles -->
<script src="https://unpkg.com/esri-leaflet-vector@3.1.1/dist/esri-leaflet-vector.js"
    integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="
    crossorigin=""></script>
Use dark colors for code blocks
 
1
npm i esri-leaflet-vector

esri-leaflet-geocoder

A visual control for finding addresses and places that uses the geocoding service.

CDNNPM
Use dark colors for code blocks
       
1
2
3
4
5
6
7
<!-- Geocoding Control -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"
    integrity="sha512-enHceDibjfw6LYtgWU03hke20nVTm+X5CRi9ity06lGQNtC9GkBNl/6LoER6XzSudGiXy++avi1EbIg9Ip4L1w=="
    crossorigin=""></script>
Use dark colors for code blocks
 
1
npm i esri-leaflet-geocoder

esri-leaflet-cluster

Display clusters for overlapping points in a feature layer.

CDNNPM
Use dark colors for code blocks
    
1
2
3
4
<!-- Clustered Feature Layer -->
<script src="https://unpkg.com/esri-leaflet-cluster@2.1.0/dist/esri-leaflet-cluster.js"
    integrity="sha512-fEdNFHisleVtEYdLhW4Z2RsR7TN6hLutE/+O4D+skfTNY2rlHm8HOZARPWkdrFFy/+i2KjFxcZAKTUWaVfbV0g=="
    crossorigin=""></script>
Use dark colors for code blocks
 
1
npm i esri-leaflet-cluster

esri-leaflet-heatmap

Constructs a heatmap layer from a feature layer that contains points.

CDNNPM
Use dark colors for code blocks
    
1
2
3
4
<!-- Heatmap Feature Layer -->
<script src="https://unpkg.com/esri-leaflet-heatmap@2.0.0/dist/esri-leaflet-heatmap.js"
    integrity="sha512-fSJJRfO4PK90PN9jKKBzBZmzlNRsR12QA/CqTTWgfUTfLMF1Nrx5ouOqlpzC8LQIP+Qz0/G4BlHSgxHrCLHuMA=="
    crossorigin=""></script>
Use dark colors for code blocks
  
1
2

npm i esri-leaflet-heatmap-feature-layer

esri-leaflet-renderer

Display the renderer and symbols defined in the feature service for a feature layer.

CDNNPM
Use dark colors for code blocks
    
1
2
3
4
<!-- Renderers Plugin -->
<script src="https://unpkg.com/esri-leaflet-renderers@2.1.2/dist/esri-leaflet-renderers.js"
    integrity="sha512-/McnqdlwYvfeOEWqoniEagFRQnLi/TNbkHe4EJypmZI02LBT7vBU/+PZ5W3FSsFFlRbnMCsJvnbp5MX8XOBrnQ=="
    crossorigin=""></script>
Use dark colors for code blocks
 
1
npm i esri-leaflet-renderers

esri-leaflet-gp

Simplifies making calls to geoprocessing tasks.

CDNNPM
Use dark colors for code blocks
    
1
2
3
4
<!-- Geoprocessing Plugin -->
<script src="https://unpkg.com/esri-leaflet-gp@2.0.3/dist/esri-leaflet-gp.js"
    integrity="sha512-pYExthzLUD0etGnsvN2vg1LOEBd0nAfIwgZWlxavdBPNc2JT+f9hDQrXJrIhHK5WmuHVAuAb8jDekD36P/pXhg=="
    crossorigin=""></script>
Use dark colors for code blocks
 
1
npm i esri-leaflet-gp

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.