1

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?

|improve this question
1

That url of your service is http while the rest of the content is https. Most web browsers block mixed content (non-secure scripts and other content types when the address bar shows https). If you open the console (f12) and navigate to the network section, you will see this. enter image description here

Unfortunately it looks like your map service is not available over https as that would be an easy solution. Fixing this is beyond the scope of this answer and your original question which, to finish answering it. No there is no special formatting that your service/data needs.

|improve this answer
  • I suspected that would be the case - I noticed that all of the functional services were https. I'm new to html/js, so was not aware that mixing is a no-go. Thanks for you help! – Jvhowube Mar 29 '18 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.