Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh · ‎11-10-2016

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!

JohnGravois · ‎11-10-2016

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

JohnGravois · ‎11-10-2016

sample: http://esri.github.io/esri-leaflet/examples/tile-layer-2.html

API reference: http://esri.github.io/esri-leaflet/api-reference/layers/tiled-map-layer.html

AdrianWelsh · ‎11-10-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JohnGravois · ‎11-10-2016

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 · ‎11-10-2016

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

AdrianWelsh · ‎11-10-2016

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

JohnGravois · ‎11-11-2016

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 · ‎11-11-2016

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.

AdrianWelsh · ‎11-14-2016

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.

JohnGravois · ‎11-14-2016

no worries!