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.

   Use dark colors for code blocksCopy

   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.

   Use dark colors for code blocks

   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.12/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

   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.12/dist/esri-leaflet.js"></script>
       <script src="https://unpkg.com/esri-leaflet-vector@4.2.3/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 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.

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);

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.

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();

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:

• Geocoding service:
  • Search for an address
  • Find places
  • Reverse geocode
• Routing service:
  • Find a route and directions
  • Find service areas
• GeoEnrichment service:
  • Find local facts and demographic information
• Portal service:
  • Access and manage content hosted in ArcGIS

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