I've been working on a project to bring historical imagery overlays into a webmap. I have developed a web app but I am seeing some issues with the tiled map layers. The tiled area is small, and only covers a city/township (Harrisonburg, VA - tiles will load if you view the code). The issues can be seen in the tiles that are supposed to be blank/transparent and do not contain any images. When the page loads, the blank tiles are showing all of the tile frames with broken image icons. The overlay loads fine, but the additional tile frames should not be showing. To make sure that this was not being caused by some other portion of my code, I copied the tiled map layer into a clean webmap to see if it caused the same error - and it did. Is this an issue with the way the esri.leaflet handles the blank tiles? Is there any work around or fix?
The code below is as simple as I can make it to take all the chance of personal error out of the equation. I've also attached an copy of the simple html file that contains this basic webmap still showing the tiled map layer error.
Thanks for any help anyone can provide! !
-------------------------see code below------------------------------
<head>
<meta charset=utf-8 />
<title>Custom popups</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
<script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></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([38.449596, -78.869165], 14);
L.esri.basemapLayer('Imagery').addTo(map);
//added imagery
var year1912 = L.esri.tiledMapLayer({
url: "https://tiles.arcgis.com/tiles/XZdM4KpLdu6Rlgql/arcgis/rest/services/1912_arcgisOnlineTiles/MapServe...",
opacity:.8
}).addTo(map);
</script>
</body>
</html>
