0

I have not been able to render certain ArcGis Service layers on a web map with the esri leaflet plugin. I can run L.esri.query and get data back. Also, metadata returns a response with no errors. I've tried using the Esri Leaflet Renderers plugin to load the service symbology instead of custom styling, with no success. I've narrowed the issue down to the renderer given on the service. The layers that won't render look like this in the drawing section of the service:

Drawing Info:
  Renderer:
    Unique Value Renderer:
     Field 1: STR_TYPE 
     Field 2: null 
     Field 3: null 
     Field Delimiter: ,

Services that render successfully to the map look like this:

 Drawing Info:
      Renderer:
        Simple Renderer:

I've verfified that the field STR_TYPE is exposed in the service that is not able to render.

  Fields:
      OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID_1 ) 
      STR_TYPE ( type: esriFieldTypeString , alias: STR_TYPE , length: 50 , Coded Values: [Catch basin: Catch basin] , [Junction box: Junction box] , [Drop inlet: Drop inlet] , ...15 more... )

I get the same results with any geometry type with the same renderer on the service.

My prototype html:

  <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="assets/css/styles.css" />
        <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.js"></script>

        <!-- Load Esri Leaflet -->
        <script src="assets/dist/esri-leaflet.js"></script>

        <!-- Esri Leaflet Renderers -->
        <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>

        <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <body>
        <div id="map"></div>

        <!-- main js file -->
        <script src="assets/js/main.js?v="+Math.floor(Math.random() * 1001)></script>
      </body>
    </html>

My js (actual service url not shown):

  var map = L.map('map', {
      center: [lat, lng],
      zoom: 10
    });
    var esriStreets = L.esri.basemapLayer('Streets').addTo(map);
    var url = serviceurl;

    var fl = L.esri.featureLayer({
        url: url,
        simplifyFactor: 1
    }).addTo(map);

    fl.metadata(function(error,metadata){
      console.log(metadata);
    });

When attempting to render custom styling, the renderers plugin is not included, simplifyFactor is not present, and pointToLayer option is added to featureLayer returning a circleMarker with custom styling. (this also doesn't render anything). However, on production I can select an area where shapes would be and I get data back.

Any help would be appreciated.

fullStack_E
  • 3
  • 1
  • 1
    i found another service with an equivalent renderer defined and i can't reproduce the error you describe: http://jsbin.com/wivahem/edit?html,output – john gravois Mar 23 '18 at 18:50
  • Did you try using the `ignoreRenderer` option? – NettaB Mar 25 '18 at 06:36
  • Yes, I did use that option. Same result – fullStack_E Mar 26 '18 at 15:07
  • @JohnGravois Thank you. I thought it might be due to an undefined default symbol in the rendering options, but the link you sent has N/A, which doesn' follow my theory. However, this link doesn't render and has a unique value renderer...http://jsbin.com/kasuhov/3/edit?html,output – fullStack_E Mar 26 '18 at 15:17
  • @fullStack_E the console of your jsbin indicates that the service doesn't support CORS. adding `useCors: false` in the featureLayer constructor causes the service to display appropriately. – john gravois Mar 27 '18 at 16:49

0 Answers0