Esri Leaflet and ArcGIS location services

Esri Leaflet is lightweight set of JavaScript tools for accessing ArcGIS location services. Use this guide to learn how to develop mapping and location-based applications with Esri Leaflet and ArcGIS location services.

Audience: Developers building mapping, location-based, and spatial analysis solutions.

Maps

Learn how to create and display maps with basemap layers.

Layers

Learn how to add different types of data layers to maps.

Query and edit

Learn how to work with feature layers and feature services.

Style and data visualization

Learn how to style data layers and basemap layers for maps.

Geocode and search

Learn how to find addresses, businesses, and places with the geocoding service.

Route and directions

Learn how to find a route and directions and service areas with the routing service.

Demographic data

Learn how to get demographic data with the GeoEnrichment service.

Get started

To start building applications with location services, you need an account and an API key.

1. Sign in with your ArcGIS account

Access the developer dashboard and tools you need to start building applications.

Get a free developer account

2. Start with an API key

The ArcGIS Platform supports different authentication methods. You can use an API key or OAuth 2.0 access token; we recommend starting with an API key. Learn more in Security and authentication.

Get an API key

3. Quick start

Below is a simple example that shows how to create a map with Esri Leaflet and the basemap layer service.

To build this map:

  1. Open the code in .

  2. Replace the apiKey with your API key from the dashboard .

    Change line
                                                             
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <title>Esri Leaflet</title>
    
      <!-- Load Leaflet from CDN -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    
      <!-- Load Esri Leaflet from CDN -->
      <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
      <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>
    
      <style>
        body { margin:0; padding:0; }
        #map {
            position: absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
      </style>
    
    </head>
    
    <body>
      <div id="map"></div>
    
      <script>
    
        const apiKey = "YOUR-API-KEY";
        const basemapEnum = "ArcGIS:Navigation";
    
        const map = L.map('map', {
          minZoom: 2
        }).setView([25,-10], 2); //Latitude, longitude
    
        L.esri.Vector.vectorBasemapLayer(basemapEnum, {
          apiKey: apiKey
        }).addTo(map);
    
      </script>
    
    </body>
    
    </html>

4. Tutorials

Follow step-by-step tutorials to learn more about how to integrate Esri Leaflet with other location services.

See all tutorials

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