Web-Mapping/Assignment3.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
147
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Owners vs Renters Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

       /*  stye for paragraph tags */
       p {
         color: white;
       }

       /* style for heading level 4 tags */
       h4 {
         color: white;
         margin-left: 10px;
       }

       /*  style for items with the class "LegendContainer" */
       .LegendContainer {
         position: absolute;
         bottom: 20px;
         left: 20px;
         z-index: 2;
         width: 300px;
         height: 40px;
         background: rgba(80, 80, 80, .75);
         transition: width 2s, height 2s; /* this is the time it takes for the container to transition */
         border-radius: 7px;
       }

       /*  style for items with the class "descriptionPanel" */
       .descriptionPanel {
         position: absolute;
         bottom: 65px;
         left: 20px;
         z-index: 2;
         width: 300px;
         height: 40px;
         background: rgba(80, 80, 80, .75);
         transition: width 2s, height 2s;
         overflow: hidden;
         border-radius: 7px;
       }

       /*  style for items with the class "descriptionPanel" when active */
       .LegendContainer:active {
         width: 240px;
         height: 250px;
       }

       /* style for items with the class "legendItem" */
       .legendItem {
           margin: 0px;
           padding-left: 10px;
           display:inline-block;
           margin:auto;
           transform: translate(50%, 50%);
       }


       /* style for items with the class "layerDescription" */
       .layerDescription {
         color: white;
         padding-left: 10px;
       }


       .renter {
             color:#00cc29;
       }
       .owner{
             color:#0574cf;
       }

       /* style for items with the class "chevron" */
       .chevron {
         position: relative;
         margin-left: 45%;
         font-size: x-large;
         color: white;
       }
    </style>

</head>
<body>

  <div id='map'></div>

  <!-- map description panel -->
  <div class="descriptionPanel" id="descriptionPanel" style="height: 250px;">
    <span onClick=panelSelect() id="glyph" class="chevron glyphicon glyphicon-chevron-down"></span>
    <hr/>
    <h4>WHAT AM I LOOKING AT?</h4>
    <p style="margin-left: 10px; margin-right: 10px;">
      This is a map showing every single person in the Portland Area as a dot. Data is taken from the 2017 US Census, and is accurate at the level of a block; however, within each block location is randomized. Points are colored based on the number of home owners versus renters on a block.
    </p>
  </div>

  <!-- map legend -->
  <div class="LegendContainer">
    <div class="legendItem">
        <span class="owner">&#11044;</span>
        <span class="layerDescription">Owners</span>
    </div>
    <div class="legendItem">
        <span class="renter">&#11044;</span>
        <span class="layerDescription">Renters</span>
    </div>
  </div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHJvc3F1aXN0IiwiYSI6ImNtOTF1ZWhoZzA0eWcyam42cWszanM5ZnAifQ.cEBrgBlFHQg9Utrk2ovNeg';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/hrosquist/cm9ug9l5f00fk01sphf2zh5ya', // stylesheet location
        center: [-122.6765, 45.5231],
        zoom: 11
    });

    const nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-left');

    // legend interaction
    var state = { panelOpen: true };

    function panelSelect(e){
      if(state.panelOpen){
        document.getElementById('descriptionPanel').style.height = '26px';
        document.getElementById('glyph').className = "chevron glyphicon glyphicon-chevron-up";
        state.panelOpen = false;
      } else {
        document.getElementById('descriptionPanel').style.height = '250px';
        document.getElementById('glyph').className = "chevron glyphicon glyphicon-chevron-down";
        state.panelOpen = true;
      }
    }

  </script>

</body>
</html>