Aan de slag met ArcGIS JavaScript - FeatureLayer toevoegen

Egge-Jan_Pollé · ‎06-19-2019

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis...

FeatureLayer

Esri Nederland heeft een Feature Layer met Nederlandse gemeenten (voor het jaar 2019) gepubliceerd via ArcGIS Online.

Deze laag gaan we als FeatureLayer toevoegen aan onze webapplicatie.

Vervolgens passen we de stijl van de laag aan door het toepassen van een renderer. En we definiëren een popupTemplate om gegevens over de gemeente in een popup te kunnen tonen. Ten slotte voegen we een LayerList widget toe, zodat men de laag aan en uit kan zetten.

De volledige code staat hieronder. Klik hier om het eindresultaat in werking te zien.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Aan de slag met ArcGIS JavaScript - FeatureLayer toevoegen</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>  
      require([
        "esri/Map",
        "esri/geometry/Point",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList"
      ], function(Map, Point, MapView, FeatureLayer, LayerList) {

      var map = new Map({
        basemap: {
          portalItem: {
            id: "7aea6fa913a94176a1074edb40690318" // Topo RD
          }
        }
      });

      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "Gemeente {Gemeentenaam}",
        content: "Gemeentecode {GM_Code}"
      };

      var renderer = {
        type: "simple",  // autocasts as new SimpleRenderer()
        symbol: {
          type: "simple-fill",  // autocasts as new SimpleFillSymbol()
          style: "none", // The polygon has no fill
          outline: {  // autocasts as new SimpleLineSymbol()
            width: 1.5,
            color: "#F5B041" // Hex Color Code
          }
        }
      };
      
      var nederlandseGemeentenLayer = new FeatureLayer({
        url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
        title: "Gemeenten (2019)",
        popupTemplate: popupTemplate,
        renderer: renderer
      });

      map.add(nederlandseGemeentenLayer);

	  var view = new MapView({
	    spatialReference: 28992, 
	    container: "viewDiv",
	    map: map,
	    center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
	    zoom: 3
	  });

      var layerList = new LayerList({
        view: view
      });

      view.ui.add(layerList, {
        position: "top-right"
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍