How to display a feature layer

SylvainKerdreux2 · ‎08-21-2018

Hello,

I'm new in javascript development and I try to do something very simple :

Display a featureLayer.

Here my code :

<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function(Map, MapView,FeatureLayer) {

var layerRoute = new FeatureLayer({
url: "http://roadsandhighwayssample.esri.com/arcgis/rest/services/RoadsHighways/NewYork/MapServer/3",
id: "route",
opacity:0.8
});

layerRoute.when(function() {
view.goTo(layerRoute.fullExtent);
});
var map = new Map({
basemap: "streets",
layers: [layerRoute]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4
});

});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

It should works but I had an error :

dojo-lite.js:171 GET https://roadsandhighwayssample.esri.com/arcgis/rest/services/RoadsHighways/NewYork/MapServer/3?f=jso... 0 ()
[esri.layers.FeatureLayer] #load() Failed to load layer (title: 'NewYork', id: 'route') h {name: "request:server", message: "Error loading https://roadsandhighwayssample.esri.…ojo_request_script_callbacks.dojo_request_script0", details: {…}}

I have no idea why it's not working.

Is there anybody who can help me on this?

RobertScheitlin__GISP · ‎08-21-2018

Sylvain,

This works:

<html>

<head>
  <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
  <script src="http://js.arcgis.com/4.8/"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {

      var layerRoute = new FeatureLayer({
        url: "http://roadsandhighwayssample.esri.com/arcgis/rest/services/RoadsHighways/NewYork/MapServer/3",
        id: "route",
        opacity: 0.8
      });

      layerRoute.when(function() {
        view.goTo(layerRoute.fullExtent);
      });


      var map = new Map({
        basemap: "streets",
        layers: [layerRoute]
      });


      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4
      });
    });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Because your layer is http protocol I switched the JS API urls to http as well.

View solution in original post

RobertScheitlin__GISP · ‎08-21-2018

Sylvain,

This works:

<html>

<head>
  <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
  <script src="http://js.arcgis.com/4.8/"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {

      var layerRoute = new FeatureLayer({
        url: "http://roadsandhighwayssample.esri.com/arcgis/rest/services/RoadsHighways/NewYork/MapServer/3",
        id: "route",
        opacity: 0.8
      });

      layerRoute.when(function() {
        view.goTo(layerRoute.fullExtent);
      });


      var map = new Map({
        basemap: "streets",
        layers: [layerRoute]
      });


      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4
      });
    });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Because your layer is http protocol I switched the JS API urls to http as well.

SylvainKerdreux2 · ‎08-22-2018

thank you for your answer.

In fact I also need to change javascript target framework from 4.8 to 4.7

https://community.esri.com/thread/217842-problem-with-httphttps

RobertScheitlin__GISP · ‎08-22-2018

Sylvain,

You can switch back to the 4.8 API if you do NOT use http://localhost or file://. You need to use your machine name.