Migration

Migrate existing Leaflet applications

If you have an existing Leaflet application, its easy to update your application to use Esri Leaflet.

The general steps are to:

  1. Keep your references to the Leaflet js library and css files.

    Use dark colors for code blocks
       
    1
    2
    3
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
  2. Add a reference to the core Esri Leaflet library.

    Use dark colors for code blocks
          
    Add line.
    1
    2
    3
    4
    5
    6
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
  3. Add references to additional Esri Leaflet libraries and plug-ins as required. The most common library to add is esri-leaflet-vector.js to access and display a basemap layer.

    Use dark colors for code blocks
           
    Add line.
    1
    2
    3
    4
    5
    6
    7
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@^3.0.0/dist/esri-leaflet-vector.js"></script>
  4. Add additional libraries and plugins as necessary to access other services and funcitonality.

How to update the basemap

To use the ArcGIS basemap layer service, you can replace your current basemap with the vectorBasemapLayer class. There are over 30 different basemap styles to choose from, including OpenStreetMap styles and satellite imagery. You can also create and publish your own custom styles to create your own basemap layer styles.

Esri Leaflet automatically displays the required attribution text for all ArcGIS basemap layer styles added to a map.

Example: OpenStreetMap to the basemap layer service

This example shows how to migrate to the ArcGIS basemap layer service. You will need an API key or to implement OAuth 2.0 to access the service.

Steps

  1. Create and reference an API key or implement OAuth 2.0.
  2. Select a basemap layer style to use. See the Change the basemap layer tutorial for examples.
  3. Add the vector basemap layer to the map.

Leaflet

Use dark colors for code blocks
    
1
2
3
4
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
  }).addTo(map);

Esri Leaflet

Use dark colors for code blocks
     
1
2
3
4
5
  const apiKey = "YOUR_API_KEY";

  L.esri.Vector.vectorBasemapLayer("ArcGIS:Streets",{
    apiKey: apiKey
  }).addTo(map);

How to access and display data

If you are accessing a file to display GeoJSON features on your map, you can use ArcGIS to host your data as a hosted feature layer in a feature service instead. Hosting and accessing your data as a feature layer makes it easier to display, query, and update your data. It also provides additional security and management features.

Example: GeoJSON to a hosted feature layer

As an alternative to accessing GeoJSON files directly, you can access you data as hosted feature layer.

Steps

  1. Import your GeoJSON data to ArcGIS. Learn how in the Import data as a feature layer tutorial.
  2. Create and reference an API key. If the feature layer is private, the API key will need to be scoped to access the layer. Learn how to scope API keys in API keys.
  3. Add the feature layer to your map.

Leaflet

Use dark colors for code blocks
      
1
2
3
4
5
6
  async function addGeoJson() {
      const response = await fetch("trails.geojson");
      const data = await response.json();
      L.geoJson(data).addTo(map);
  }
  addGeoJson();

Esri Leaflet

Use dark colors for code blocks
    
1
2
3
4
  L.esri.featureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
    })
    .addTo(map);

Migrating to other location services

You might also want to migrate your apps to use other ArcGIS location services.

See a list of the more common services and operations below:

Visit the Tutorials or Sample code to see more code samples that access location services.

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