Search code examples
javascriptgisarcgisesriarcgis-js-api

Feature Layer does not display but the Feature table does display


I am new to ArcGIS javascript and have modified one of the samples at ArcGIS Developers to try to show some driving routes on top of a base map. I am also generating a table of the routes. The table shows so I think that means the route layer is added but the routes do not display on the map. The code is shown below. Any help would be appreciated!

EDIT:

I have found I can display the routes as a ArcGISDynamicMapServiceLayer using the url http:.../MapServer and I can generate the feature table using the url http:.../MapServer/0. I think I need to use FeatureLayer for the routes so I can highlight the route corresponding to the row in the table the user selects. One of the samples at FeatureLayer Sample said

This sample demonstrates how to add a basic feature layer to a map. At a minimum, the FeatureLayer must point to a valid feature service hosted on ArcGIS Server or ArcGIS Online or be constructed with a Feature Collection object.

My understanding is the route feature is set up as a map service, not as a feature service. Could this be my problem? Some of the FeatureLayer examples use layers stored on a MapService (eg. Gas Price Data ) so I'm not sure it matters.

     var map, stateBaseMap, geometryLayer, routeFeature, myFeatureTable,
        stateBaseMapUrl, geometryLayerUrl, routeFeatureUrl;

  require([ "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/tasks/GeometryService",
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
              "dijit/layout/ContentPane",
              "dijit/layout/BorderContainer",
              "esri/geometry/Extent",
              "esri/graphicsUtils",
              "esri/tasks/query",
              "dojo/dom",
              "dojo/parser",
              "dojo/ready",
              "dojo/on"],
    function(Map,
            ArcGISTiledMapServiceLayer, 
             GeometryService, 
             FeatureLayer,
             FeatureTable,
             ContentPane, 
             BorderContainer,
             Extent, 
             graphicsUtils, 
             Query,
              dom, 
              parser, 
              ready, 
              on) {
      parser.parse();

      ready(function(){
            esri.config.defaults.io.proxyUrl = "/llr/llrproxy";
            esri.config.defaults.io.alwaysUseProxy = false;
            esri.config.defaults.io.corsDetection = false;
            stateBaseMapUrl = document.getElementById("shipment_stateBaseMapServiceURL").value;
            geometryLayerUrl = document.getElementById("shipment_geometryServiceURL").value;
            routeFeatureUrl = document.getElementById("shipment_routeLayerURL").value;

            map = new Map("map");
            stateBaseMap = new ArcGISTiledMapServiceLayer(stateBaseMapUrl);
            map.addLayer(stateBaseMap);
            geometryLayer = new GeometryService(geometryLayerUrl);
            map.addLayer(geometryLayer);
            routeFeature = new FeatureLayer(routeFeatureUrl, {
                                                    mode : FeatureLayer.MODE_SNAPSHOT,
                                                    outFields : [ "*" ],
                                                    visible:true,
                                                    id : "routeFeature"
                                                });
            map.addLayer(routeFeature);
            on(routeFeature, "load", function(){
                loadTable();
              });

            function loadTable(){
                    myFeatureTable = new FeatureTable({
                    featureLayer : routeFeature,
                    map : map, 
                    editable: false,
                    fieldInfos: [
                      {
                        name: 'ORIGIN', 
                        alias: 'Entry State'
                      },
                      {
                        name: 'ROUTE_DESC', 
                        alias: 'Route Description'
                      },
                      {
                        name: 'DESTNATION', 
                        alias: 'Exit State'
                      }
                    ]
                  }, 'myTableNode');

                  myFeatureTable.startup();
            }
        });
      });

Solution

  • The code does not share the details of the actual URL you are using. If you are trying to create a FeatureLayer with a map service url(url ending with http...MapServer/). That is not possible. You need have the specific Layer url, url which ends with the layer id to create a FeatureLayer. That might be an issue.

    EDIT: You can create a FeatureLayer from one of the Layer from a MapService. but, the url needs to be [map service url]/[layerid]. where the layerid is a number/index of the layer.