<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Fulcrum FeatureLayer Example</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css"/>
    <script src="https://js.arcgis.com/4.17/"></script>

    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function (Map, MapView, FeatureLayer) {
        var map = new Map({
          basemap: "topo-vector"
        });

        var view = new MapView({
          container: "map",
          map: map
        });

        // Whitier & Alamo fire damage assessment
        var featureLayer = new FeatureLayer({
          url: "https://fulcrumapp.io/share/aaecda06b8d5c440dabc/geoservices/FeatureServer/0"
        });

        featureLayer
          .when(function () {
            return featureLayer;
          })
          .then(function (layer) {
            view.goTo(layer.fullExtent);
          });

        var template = {
          title: "{_title}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "_status",
              label: "Status"
            }, {
              fieldName: "incident_number",
              label: "Incident Number"
            }, {
              fieldName: "incident_name",
              label: "Incident Name"
            }, {
              fieldName: "hazard_type",
              label: "Hazard Type"
            }, {
              fieldName: "inspection_date",
              label: "Inspection Date"
            }, {
              fieldName: "structure_types",
              label: "Structure Types"
            }, {
              fieldName: "roof_construction",
              label: "Roof Construction"
            }, {
              fieldName: "estimated_loss",
              label: "Estimated Loss"
            }, {
              fieldName: "vegetation_clearance",
              label: "Vegetation Clearance"
            }, {
              fieldName: "comment",
              label: "Comment"
            }]
          }, {
            type: "media",
            mediaInfos: [{
              title: "",
              caption: "",
              type: "image",
              value: {
                sourceURL: "{photos}",
                linkURL: "{photos}"
              }
            }]
          }]
        };

        featureLayer.popupTemplate = template;

        map.add(featureLayer);
      });
    </script>
  </head>

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.