Web-Mapping/Fixed-structure.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
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
145
146
<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Fixed Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--    1.1.  Include the reference to the Mapbox JavaScript here in the <head> of the page  -->
      <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js'></script>

    <!--    1.2 Include the reference to the Mapbox CSS here in the <head> of the page  -->
      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        /* 1.4 Insert the CSS code here between the <style> tags */
          body { margin:50px; padding:0; }
          #map1 { position:relative; height:300px; width:100%;}


        /* 2.5.2 Insert additional CSS code here between the <style> tags */
          #map2 { position:relative; height:300px; width:100%;}

        /* CSS for map 3 */
          #map3 { position:relative; height:300px; width:100%; }

    </style>
  </head>

  <body>
        <!-- 1.3 Insert the div for the structure of the page here in the <body> of the page -->
        <h1> Map 1: I am starting my day off in Downtown Portland and am spending time with some friends. We are getting lunch and shopping.</h1>
            <div id='map1'></div>
        <hr>

        <h1> Map 2: After we got lunch and we shopping, we went down to the river where we went swimming and had a picnic. </h1>
        <div id='map2'></div>

        <h1> Map 3: After the river, we then went to my friends house for the rest of the day. We listened to music and made dinner, and after that, we drove back to Eugene.</h1>
            <div id='map3'></div>
        <hr>

        <script>
            /* Insert the JavaScript within the <script> tags, within the body */
            // 2.1 Start with the Mapbox access token
            mapboxgl.accessToken = 'pk.eyJ1IjoiaHJvc3F1aXN0IiwiYSI6ImNtOTF1ZWhoZzA0eWcyam42cWszanM5ZnAifQ.cEBrgBlFHQg9Utrk2ovNeg'; //  Put your access token between the single quotes.


            // 2.2 Then initialize the first map
            var map = new mapboxgl.Map({
                container: 'map1', // id of a div on your page, where the map will be inserted
                style: 'mapbox://styles/mapbox/outdoors-v12', // the style URL 'mapbox://styles/mapbox/streets-v11'
                center: [-122.6788, 45.5212], // starting position [lng, lat] eg. [-122.6788, 45.5212]
                zoom: 11 // starting zoom
            });


            // 2.3 Add any other variables (such as popups and markers) to the first map
            var popup = new mapboxgl.Popup()
                .setText('This is where my friends and I got lunch and went shopping.');

            var marker = new mapboxgl.Marker({color:'red'})
                .setLngLat([-122.6788, 45.5212]) // starting position [lng, lat]
                .setPopup(popup) //add the popup named "popup" to this marker
		            .addTo(map); // add it to the map with the ID "map"


            // 2.4 Add arguments to disable the map interactivity here
              // Disable drag and zoom handlers.
              map.dragPan.disable();
              map.scrollZoom.disable();
              map.boxZoom.disable();
              map.dragRotate.disable();
              map.keyboard.disable();
              map.doubleClickZoom.disable();
              map.touchZoomRotate.disable();
              map.touchZoomRotate.disableRotation();


            // 2.5.3 Then initialize the 2nd map
            var map2 = new mapboxgl.Map({
            container: 'map2', // id of a div on your page, where the map will be inserted
            style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
            center: [-122.653359, 45.483896], // starting position [lng, lat] eg. [-122.6788, 45.5212]
            zoom: 11 // starting zoom
            });


            // 2.5.4 Add any other variables (such as markers) to the second map
            var popup2 = new mapboxgl.Popup()
            .setText('This is where we hung out when we went to the river.');

            var marker2 = new mapboxgl.Marker({color:'blue'})
              .setLngLat([-122.653359, 45.483896]) // starting position [lng, lat]
              .setPopup(popup2) //add the popup to the marker
              .addTo(map2); // id it to the map with the ID *map2*


            // 2.5.5 Add arguments to disable the second map's interactivity here
            map2.dragPan.disable();
            map2.scrollZoom.disable();
            map2.boxZoom.disable();
            map2.dragRotate.disable();
            map2.keyboard.disable();
            map2.doubleClickZoom.disable();
            map2.touchZoomRotate.disable();
            map2.touchZoomRotate.disableRotation();


            // Initialize third map
            var map3 = new mapboxgl.Map({
                container: 'map3', // id of a div on your page, where the map will be inserted
                style: 'mapbox://styles/mapbox/navigation-day-v1', // stylesheet location
                center: [-122.5900, 45.5050], // starting position [lng, lat]
                zoom: 11 // starting zoom
            });

            // Add a marker with popup
            var popup3 = new mapboxgl.Popup()
                .setText('This is where my friend lives.');

            var marker3 = new mapboxgl.Marker({color: 'green'})
                .setLngLat([-122.5900, 45.5050]) // position of marker
                .setPopup(popup3)
                .addTo(map3);

            // Disable map3 interactivity
            map3.dragPan.disable();
            map3.scrollZoom.disable();
            map3.boxZoom.disable();
            map3.dragRotate.disable();
            map3.keyboard.disable();
            map3.doubleClickZoom.disable();
            map3.touchZoomRotate.disable();
            map3.touchZoomRotate.disableRotation();


            // 2.6 Change the map pointers
            map.getCanvas().style.cursor = 'auto';
	          map2.getCanvas().style.cursor = 'auto';
            map3.getCanvas().style.cursor = 'auto';

        </script>
  </body>
</html>