Web-Mapping/QuickStartMap.html at main · hrosquist/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
<!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.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>


    <!--    Include the reference to the Mapbox CSS here in between <head> tags    (Part I.2) -->
      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.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%; }

          #title { z-index: 9999;
            background-color:rgb(128, 148, 206);
            opacity: 70%;
            text-align: top-left
          }


    </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 V) -->

    <div id='title'>
          <h1>Map of Portland, Oregon</h1>
          <h2>By Hailey Rosquist</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.eyJ1IjoiaHJvc3F1aXN0IiwiYSI6ImNtOTF1ZWhoZzA0eWcyam42cWszanM5ZnAifQ.cEBrgBlFHQg9Utrk2ovNeg';


        // 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
        });


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

        var popup_pioneerplace = new mapboxgl.Popup({
              closeOnClick: false, anchor: 'top-left'
            })
            .setHTML('<a href="https://www.pioneerplace.com/en/">pioneer place</a>')

        // Add any other variables such as markers here (part III)
        var marker = new mapboxgl.Marker({color:'rgb(0,255,0)'})
            .setLngLat([-122.6788, 45.5212]) // starting position [lng, lat]
            .setPopup(popup)
            .addTo(map);

        var popup_layer = new mapboxgl.Popup({
              closeOnClick: false, anchor: 'bottom-left'
            })
            .setLngLat([-122.64, 45.5]) //popup coordinates
            .setHTML('<h1>Hi Portland!</h1>') //popup text
            .addTo(map); //add this popup to the map!

        var marker2 = new mapboxgl.Marker({color:'blue'})
            .setLngLat([-122.69, 45.55]) // starting position [lng, lat]
            .addTo(map);

        var marker3 = new mapboxgl.Marker({color:'rgb(389,230,0)'})
            .setLngLat([-122.678, 45.518])
            .setPopup(popup_pioneerplace)
            .addTo(map);

        var popup_layer_voodoo = new mapboxgl.Popup({
              closeOnClick: false, anchor: 'top-left'
            })
            .setLngLat([-122.673308, 45.522675])
            .setHTML('<a href="https://www.voodoodoughnut.com">voodoo donuts</a>')
            .addTo(map);


        // Add optional advanced "On load" function here

    </script>

  </body>

</html>