1

How can I integrate the ESRI street maps (https://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri.WorldStreetMap) into my leaflet javascript. Following is what I did but the map doesn't load. 

<script src="https://unpkg.com/esri-leaflet@2.0.6"></script>
<script> var map = L.map('map1').setView([48.135, 11.582], 3);
L.esri.basemapLayer('Streets').addTo(map); 

     L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map /MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS,    Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand),  TomTom, 2012'}).addTO(map);
Steve
  • 25,806
  • 2
  • 33
  • 43
Kulin Shah
  • 11
  • 2
  • Do we need an api-key to access esri tile for commercial purpose ?. We are able to access tileLayer URI without any key. Do we have any limitation in such cases ? – Abdul Razak AK Apr 22 '22 at 07:01

1 Answers1

4

you're mixing up two entirely different techniques of loading the same tiled map service.

when you use the esri leaflet plugin you can just mention the Esri basemap by name. Leaflet's attribution control will be populated automatically with relevant credits recognizing data providers in the area as users pan and zoom automatically.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2"></script>
<script src="https://unpkg.com/esri-leaflet@2.0.6"></script>
<script>
  var map = L.map("map").setView([37.75, -122.23], 10);
  L.esri.basemapLayer('Streets').addTo(map); 
</script>

The second technique is to use Leaflet's own TileLayer class to load the Esri basemap. You had a typo in your own attempt, but its certainly valid to reference the service url manually and skip using the plugin.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2"></script>
<script>
var map = L.map("map").setView([37.75, -122.23], 10);

var serviceUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
var credits = 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012 etc. etc. etc.';
// not addTO(map)
L.tileLayer(serviceUrl, { attribution: credits }).addTo(map); 
</script>

No matter which approach you take, Esri has two requirements when you display an ArcGIS Online service in a Leaflet application

  1. You need a (free) ArcGIS Online account.
  2. You must display 'Powered by Esri' and recognize all data providers.
john gravois
  • 392
  • 2
  • 8
  • Thanks John. I tried both methods but I get the following error. Uncaught Error: Map container not found. at NewClass._initContainer (leaflet@1.0.2:3249) at NewClass.initialize (leaflet@1.0.2:2370) at new NewClass (leaflet@1.0.2:310) at Object.L.map (leaflet@1.0.2:3850) at (index):713 – Kulin Shah Jan 09 '17 at 02:03
  • if you're going to pass the string 'map' when creating your leaflet map, you need to have a div on the page with the same id. you can find an example here: http://esri.github.io/esri-leaflet/examples/ – john gravois Jan 09 '17 at 03:41
  • Thanks @JohnGravois Sorry for being slow here. The Div for map fixed the issue. Only error I am getting now is a permission issue (403) for the following link - I am guessing it's a rights issue with ESRI? https://lh3.googleusercontent.com/0j9CesNRqurEplp_FjOY4BOBQjDL7cIWqKoqODFFn5YTFkvI6esX6A64TClb7j1zOjdGTl2DA8ANcOxXeBl8mJ-NKUrb7Sc7R9jEyy9dxbyu3VMa2Q47Uk5InsH2QkO6p3SBALfWo-HNeKgtccWY7XP_uuFpJr6Je1xaxlkCRDiLHZKYTClujz0XhJVcBvZ622O2zMaVGTT7MKDoXGPqeBRQE_LQenYlk868sboECvb0YyHZHe3rAOtxBVee0we_SrNLWhlSu-9n9D-t7eL-0V-kqdQHu8atIgRBJ3XFd0kBtPWJiPEuzcdKqAIT-VrZ5T2wgw2Y1HyI- (next comment) – Kulin Shah Jan 16 '17 at 01:35
  • (continued) zpeAHl2M4TmO4a2NrHUm1fOP3DFxfWL7PvRBorwiD_pc9LghTKZ09Fej8fG6Pgpxb0HR4Fb8NNszaJTBfJ3zosonLXM8ymxtBOHbgL4CSEotf7XWHQpU2LNlx1sMARadiaBDAd-_Y3HqFIdZiJafqP9uchibewYNhpc5WMbl6-uLhGtb6UHJP8KV0N3jOhKbnrDuVn8QKLFn5g5Eenip7mrUsK056N5ySidUT5fbhOXajiLJz1JNn_Nd6XdI8A=s1352-no – Kulin Shah Jan 16 '17 at 01:40
  • im unable to make sense of your url that spans two comments. – john gravois Jan 17 '17 at 00:41