web-mapping/temp-changes-map.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
<!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" />

    <!--  Mapbox JavaScript  -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v3.20.0/mapbox-gl.js'></script>

    <!--  Mapbox CSS  -->
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v3.20.0/mapbox-gl.css' rel='stylesheet' />

    <style>
      /* Additional CSS */
      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>
    <!--  Map div  -->
    <div id="map"></div>

    <!--  Title div  -->
    <div id="banner">
      <h1>Annual Temperature Changes Per US County</h1>
      <h2>By: Paul Naylor</h2>
    </div>

    <script>
      // Mapbox access token
      mapboxgl.accessToken =
        "pk.eyJ1IjoicGF1bGVuIiwiYSI6ImNtbmY2bTJzYTA3MzUycG5hcXFmMzIzemkifQ.PRYMITPnkL-dduQ9bivpvg";

      // Initialize the map
      var map = new mapboxgl.Map({
        container: "map", // id of a div on your page, where the map will be inserted
        style: "mapbox://styles/paulen/cmo94wka900ao01seh4ileus9", // stylesheet location
        center: [-94.7, 39.2], // starting position [lng, lat] eg. [-122.6788, 45.5212]
        zoom: 4, // starting zoom
      });

      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
      map.addControl(
        new mapboxgl.NavigationControl({
          showCompass: false,
        }),
        "bottom-left",
      );

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

</html>