topic Re: Adding a tiled map service from ArcGIS Online to Leaflet in Open Source Mapping Libraries Ques.

Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Mon, 28 Aug 2023 13:25:56 GMT

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-9d28-153bf05f8834&searchIndex=0 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!

Re: Adding a tiled map service from ArcGIS Online to Leaflet

JohnGravois — Thu, 10 Nov 2016 17:33:46 GMT

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

Re: Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Sun, 12 Dec 2021 10:20:21 GMT

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

Re: Adding a tiled map service from ArcGIS Online to Leaflet

JohnGravois — Sun, 12 Dec 2021 10:20:24 GMT

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.

Re: Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Thu, 10 Nov 2016 21:31:35 GMT

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

Re: Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Fri, 11 Nov 2016 03:50:51 GMT

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

Re: Adding a tiled map service from ArcGIS Online to Leaflet

JohnGravois — Fri, 11 Nov 2016 16:40:34 GMT

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

Re: Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Fri, 11 Nov 2016 16:46:42 GMT

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.

Re: Adding a tiled map service from ArcGIS Online to Leaflet

AdrianWelsh — Mon, 14 Nov 2016 17:56:53 GMT

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.

Re: Adding a tiled map service from ArcGIS Online to Leaflet

JohnGravois — Mon, 14 Nov 2016 18:35:59 GMT

no worries!