Migration

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.

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

    1
    2
    3
    4
    5
    6
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@3.0.14/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 .

    1
    2
    3
    4
    5
    6
    7
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@3.0.14/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.2.7/dist/esri-leaflet-vector.js"></script>
  4. Add additional libraries and plugins as necessary to access other services and functionality.

How to update the basemap

To use the ArcGIS basemap styles 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 styles service

This example shows how to migrate to the ArcGIS basemap styles 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

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

1
2
3
4
5
  const accessToken = "YOUR_ACCESS_TOKEN";

  L.esri.Vector.vectorBasemapLayer("arcgis/streets",{
    token: accessToken
  }).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 in a 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

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

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 .

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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close