I'm having trouble getting my ArcServer feature layers to display at all in leaflet webmaps. I'm just using a simple HTML tester, and I am able to display and mess around with ESRI-supplied feature layers, but when I link to my layers they simply do not display in the map. I thought at first it might've been a projection issue as I was initially serving the data in local UTM, so I served up the data in web mercator to no avail.
<html>
<head>
<meta charset=utf-8 />
<title>Simple FeatureLayer</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.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.1.3/dist/esri-leaflet.js"
integrity="sha512-pijLQd2FbV/7+Jwa86Mk3ACxnasfIMzJRrIlVQsuPKPCfUBCDMDUoLiBQRg7dAQY6D1rkmCcR8286hVTn/wlIg=="
crossorigin=""></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.48, -106.84], 12);
L.esri.basemapLayer('Topographic').addTo(map);
L.esri.featureLayer({
url: 'http://maps.steamboatsprings.net/arcgis/rest/services/ParksRec/TrailsTest/FeatureServer/0'
}).addTo(map);
</script>
</body>
</html>
I'm using this HTML tester to mess around with my code. And this https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0 feature layer is the one supplied by ESRI that displays just fine when you switch it out for my service.
Any ideas? Is there any specific formatting that data needs before it will display in leaflet?
