chunxiawu.github.io/test_webmap.html at main · chunxiawu/chunxiawu.github.io · 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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap | Sample | ArcGIS API for JavaScript 4.22</title>

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

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.22/"></script>

    <script>
      require([
          "esri/config",
          "esri/views/MapView",
          "esri/WebMap"
        ],  (esriConfig,MapView, WebMap) => {
        /************************************************************
         * Creates a new WebMap instance. A WebMap must reference
         * a PortalItem ID that represents a WebMap saved to
         * arcgis.com or an on-premise portal.
         *
         * To load a WebMap from an on-premise portal, set the portal
         * url with esriConfig.portalUrl.
         * // Set the hostname to the on-premise portal
         * esriConfig.portalUrl = "https://myHostName.esri.com/arcgis"
         *
         ************************************************************/
        // esriConfig.portalUrl = "https://giscat.ne.gov/Agency/rest/services/INSIGHT_DNR_NE/MapServer/0";
        // // esriConfig.portalUrl = "https://gis.nebraska.gov/Agency/rest/services/INSIGHT_DNR_NE/MapServer/";

        // esriConfig.portalUrl = "https://giscat.ne.gov/portal/home/item.html"
        esriConfig.portalUrl ="https://giscat.ne.gov/portal/apps/mapviewer/index.html"
        // https://gis.ne.gov/portal/home/item.html?id=de0f1701768b4682af0897f7f05b9e62

        // https://giscat.ne.gov/portal/apps/mapviewer/index.html?webmap=eeb860d0e6e842ea89f4e9e7179f262b
        const webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            // id: "f2e9b762544945f390ca4ac3671cfa72"
            id:"eeb860d0e6e842ea89f4e9e7179f262b"

          }
        });
        // const webmap = new WebMap({
        //   portalItem: {
        //     id: "e691172598f04ea8881cd2a4adaa45ba"
        //   }
        // });

        /************************************************************
         * Set the WebMap instance to the map property in a MapView.
         ************************************************************/
        const view = new MapView({
          map: webmap,
          container: "viewDiv"
        });
      });
    </script>
  </head>

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