Adding a tiled map service from ArcGIS Online to Leaflet

6632
9
Jump to solution
11-10-2016 08:15 AM
Labels (1)
AdrianWelsh
MVP Honored Contributor

So, I really don't know what I'm doing at times. I hope this is a simple question. I have a tiled map service that I published to the cloud in https://community.esri.com/community/gis/web-gis/arcgisonline?sr=search&searchId=8d391d6f-63e6-4084-... of a jpg that is georeferenced. I want to show this in Leaflet but I am not exactly sure how to do this (the purpose is that I want to add some points to it afterwards that will have popup info, etc - I just want the image as the "basemap").

 

I posted a leaflet question a couple of months ago that John Gravois‌ helped me with, here: How to make custom basemap with arbitrary location . He posted great sample that showed me how to add a loose image to a map without it being georeferenced with this code: JS Bin - Collaborative JavaScript Debugging  (that I use all the time!).

 

In any case, what is a simple way to make a quick leaflet example that will show my tiled service as the "basemap"? Or is this not possible?

 

Thanks in advance!

0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Frequent Contributor

you just aren't zoomed in close enough.

var map = L.map('map').setView([40.374761, -111.736418], 18);
L.esri.tiledMapLayer({
  url: "http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer",
  minZoom: 15,
  maxZoom: 21
}).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

View solution in original post

9 Replies
AdrianWelsh
MVP Honored Contributor

John,

Thanks for your help. I tried using the code in that sample but my image is not showing up. Here is my code sample:

<html>
<head>
  <meta charset=utf-8 />
  <title>Navigation Charts</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.4"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map('map').setView([40.374761, -111.736418], 5);

  L.esri.tiledMapLayer({
    url: "http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer",
    detectRetina: false,
    minZoom: 3,
    maxZoom: 10
  }).addTo(map);
</script>

</body>
</html>
0 Kudos
JohnGravois
Frequent Contributor

you just aren't zoomed in close enough.

var map = L.map('map').setView([40.374761, -111.736418], 18);
L.esri.tiledMapLayer({
  url: "http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background/MapServer",
  minZoom: 15,
  maxZoom: 21
}).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍

i figured that out by snooping the web traffic in the JSAPI sample viewer that ships with the service.

AdrianWelsh
MVP Honored Contributor

John,

I appreciate the help. I am not sure how to snoop the web traffic, but I am glad you figured that out. 

From the new code, my map showed up (changing the zoom numbers). Though, when it gets zoomed in closer, the image gets real grainy and does not behave as I would expect. Plus, sometimes the tiles disappear. Is this an issue with the service or with something else?

this picture

Should look more like this picture

0 Kudos
AdrianWelsh
MVP Honored Contributor

For the record, I broke my map service and had to recreate it but couldn't use the same name. It's now at:

http://tiles.arcgis.com/tiles/mvnrDxfOCq0CsVom/arcgis/rest/services/15094Background2/MapServer

EDIT Again: This is now changed back to the original link of https://community.esri.com/thread/update-advanced-comment.jspa?id=646909&draftID=291564 

0 Kudos
JohnGravois
Frequent Contributor

i'm not an export on selecting cache options, but i'm assuming the degradation is the result of the default settings for output cache raster format and quality.

Available map and image cache properties—Documentation | ArcGIS for Server 

AdrianWelsh
MVP Honored Contributor

Hmm, maybe it's best if I publish this image to a server as opposed to ArcGIS Online. I will look into that and see if the quality improves.

0 Kudos
AdrianWelsh
MVP Honored Contributor

Thanks again. I figured out a better way to publish this map to make it zoom better. It works like it is supposed to (I think). Thanks for all your help, John.

0 Kudos
JohnGravois
Frequent Contributor

no worries!

0 Kudos