interactiveMaps/6-buildingMap.html at master · faisalrbk/interactiveMaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Extrude building footprints based on real world heights</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      item-id="397c462348464d069a7a63b97644086e"
      camera-position="-75.09519011, 38.32524201, 682.98652"
      camera-heading="53.86"
      camera-tilt="48.52">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-legend slot="bottom-right"></arcgis-legend>
    </arcgis-scene>

    <script type="module">
      const [FeatureLayer] = await $arcgis.import(["@arcgis/core/layers/FeatureLayer.js"]);

      /*****************************************************************
       * Get a reference to the HTML elements
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");

      /*****************************************************************
       * Create a function that generates symbols for extruded polygons.
       *****************************************************************/

      function getSymbol(color) {
        return {
          type: "polygon-3d", // autocasts as new PolygonSymbol3D()
          symbolLayers: [
            {
              type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
              material: {
                color: color,
              },
              edges: {
                type: "solid",
                color: "#999",
                size: 0.5,
              },
            },
          ],
        };
      }

      /*****************************************************************
       * Set each unique value directly in the renderer's constructor.
       * At least one field must be used (in this case the "DESCLU" field).
       * The label property of each unique value will be used to indicate
       * the field value and symbol in the legend.
       *
       * The size visual variable sets the height of each building as it
       * exists in the real world according to the "ELEVATION" field.
       *****************************************************************/

      const renderer = {
        type: "unique-value", // autocasts as new UniqueValueRenderer()
        defaultSymbol: getSymbol("#FFFFFF"),
        defaultLabel: "Other",
        field: "TYPE",
        uniqueValueInfos: [
          {
            value: "Residential",
            symbol: getSymbol("#A7C636"),
            label: "Residential",
          },
          {
            value: "Commercial",
            symbol: getSymbol("#FC921F"),
            label: "Commercial",
          },
          {
            value: "Hotel/Motel",
            symbol: getSymbol("#ED5151"),
            label: "Hotel/Motel",
          },
          {
            value: "Apartment Rentals",
            symbol: getSymbol("#149ECE"),
            label: "Apartment Rentals",
          },
        ],
        visualVariables: [
          {
            type: "size",
            field: "HEIGHT",
          },
        ],
      };

      // Set the renderer on the layer
      const buildingsLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/building_footprints_height/FeatureServer",
        renderer: renderer,
        elevationInfo: {
          mode: "on-the-ground",
        },
        title: "Extruded building footprints",
        popupTemplate: {
          // autocasts as new PopupTemplate()
          title: "{TYPE}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "TYPE",
                  label: "Type",
                },
                {
                  fieldName: "HEIGHT",
                  label: "Height",
                },
              ],
            },
          ],
        },
        outFields: ["TYPE", "HEIGHT"],
      });

      // Wait for the view to initialize
      await viewElement.viewOnReady();

      viewElement.map.add(buildingsLayer);
    </script>
  </body>
</html>