web-mapping/QuickStartMap.html at main · paulnuo/web-mapping · 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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>University of Oregon Mapping</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--    Include the reference to the Mapbox JavaScript here in the <head> of the page  (Part I.1)  -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.20.0/mapbox-gl.js"></script>

    <!--    Include the reference to the Mapbox CSS here in between <head> tags    (Part I.2) -->
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.20.0/mapbox-gl.css"
      rel="stylesheet"
    />

    <style>
      /* Insert the additional CSS code here between the <style> tags  (Part I.4)   */
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      #banner {
        z-index: 9999;
        background-color: green;
        opacity: 80%;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!--  Insert the map div here in the <body> of the page  (Part I)  -->
    <div id="map"></div>

    <!--  Insert the title div here (part VI) -->
    <div id="banner">
      <h1>UO in PDX</h1>
      <h2>By: Paul N</h2>
    </div>

    <script>
      // Insert the JavaScript within the <script> tags, within the body
      // Start with the Mapbox access token here (Part 2.1)
      mapboxgl.accessToken =
        "pk.eyJ1IjoicGF1bGVuIiwiYSI6ImNtbmY2bTJzYTA3MzUycG5hcXFmMzIzemkifQ.PRYMITPnkL-dduQ9bivpvg";

      // Then initialize the map here (Part 2.2)
      var map = new mapboxgl.Map({
        container: "map", // id of a div on your page, where the map will be inserted
        style: "mapbox://styles/mapbox/satellite-v9", // stylesheet location
        center: [-122.6788, 45.5212], // starting position [lng, lat] eg. [-122.6788, 45.5212]
        zoom: 11, // starting zoom
        // zoom: 8,
        // center: [-74.5447, 40.6892],
      });

      map.on("load", function () {
        map.addSource("wms-test-source", {
          type: "raster",
          // use the tiles option to specify a WMS tile source URL
          // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
          tiles: [
            "https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015",
          ],
          tileSize: 256,
        });
        map.addLayer(
          {
            id: "wms-test-layer",
            type: "raster",
            source: "wms-test-source",
            paint: {},
          },
          "aeroway-line",
        );
      });

      // Add the zoom contols here (part V)
      map.addControl(
        new mapboxgl.NavigationControl({
          showCompass: false,
        }),
        "bottom-left",
      );

      // Add popups for markers here. Yes, before the markers!  (part IV)
      var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(
        "Hello World. Welcome to Portland!",
      );

      // Add any other variables such as markers here (part III)
      var marker = new mapboxgl.Marker({ color: "red" })
        .setLngLat([-122.6788, 45.5212])
        .setPopup(popup)
        .addTo(map);
      var marker2 = new mapboxgl.Marker({ color: "orange" })
        .setLngLat([-122.69, 45.55])
        .addTo(map);
      var markerUO = new mapboxgl.Marker({ color: "green" })
        .setLngLat([-122.67103983300761, 45.5256269789183])
        .addTo(map);

      var popup_layer = new mapboxgl.Popup({
        closeOnClick: true,
        anchor: "top-left",
      })
        .setLngLat([-122.67103983300761, 45.5256269789183]) //popup coordinates
        .setHTML('<a href="https://pdx.uoregon.edu">UO PDX</a>') //popup text
        .addTo(map); //add this popup to the map!

      // Add optional advanced "On load" function here
    </script>
  </body>
</html>