Learn how to use Esri Leaflet and the basemap layer service to display a map .
You can display a map with Esri Leaflet by using a vector tile basemap layer from the basemap layer services . A vector tile basemap layer contains the styles, layers , font glyphs, and icons to render the layers.
In this tutorial, you display a map of the Santa Monica Mountains using the streets basemap layer from the Basemap layer service .
This code is used as the starting point for the other Esri Leaflet tutorials.
You need a free ArcGIS developer account to access your dashboard and API keys . The API key must be scoped to access the services used in this tutorial.
Go to CodePen to create a new pen for your application. Create an HTML page with references to Leaflet, Esri Leaflet, and Mapbox GL JS. These are required to access and display vector tile basemap layers.
In the <head>, add <script> elements to reference to the libraries. In the <head>, add a <style> element to provide styling for the page and map. In the <body>, add a <div> element for the map. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
<!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:Streets" ;
const map = L.map( 'map' , {
minZoom: 2
}).setView([ 34.02 , -118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey: apiKey
}).addTo(map);
</ script >
</ body >
</ html >
In the <body> element, add <script> element with code to create a map.
Show more lines
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
<!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:Streets" ;
const map = L.map( 'map' , {
minZoom: 2
}).setView([ 34.02 , -118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey: apiKey
}).addTo(map);
</ script >
</ body >
</ html >
Show more lines
To access ArcGIS location services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , update apiKey to use your key.
Change line
<!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:Streets" ;
const map = L.map( 'map' , {
minZoom: 2
}).setView([ 34.02 , -118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey: apiKey
}).addTo(map);
</ script >
</ body >
</ html >
In CodePen , run your code to display the map.
