├── umtri_logo.png ├── style.css ├── index.html └── map.js /umtri_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/aadt/master/umtri_logo.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | #content{ 2 | padding: 15px; 3 | } 4 | 5 | #map{ 6 | width: inherit; 7 | height: 500px; 8 | } 9 | 10 | .mapboxgl-popup{ 11 | max-width: 400px !important; 12 | font-family: 'Arial'; 13 | font-size: 10pt; 14 | } 15 | 16 | .popupInside{ 17 | padding: 5px !important; 18 | padding-bottom: 1px !important; 19 | } 20 | 21 | .mapboxgl-popup-close-button{ 22 | padding: 3px !important; 23 | } 24 | 25 | .infobar{ 26 | background-color: #efe9e1; 27 | } 28 | 29 | form{ 30 | padding: 10px 0px; 31 | padding-bottom: 15px; 32 | } 33 | 34 | h3{ 35 | padding-bottom: 0px; 36 | } 37 | 38 | .group{ 39 | padding: 10px 0px; 40 | } 41 | 42 | h6{ 43 | font-weight: bold; 44 | } 45 | 46 | label{ 47 | font-weight: bold; 48 | } 49 | .searchfield{ 50 | width: 80%; 51 | } 52 | 53 | h5{ 54 | font-size: 12pt; 55 | margin: 0px; 56 | } 57 | 58 | .unchangingVals{ 59 | margin-top: 10px; 60 | padding: 5px; 61 | border-top: 1px dashed black; 62 | } 63 | 64 | footer{ 65 | padding: 5px; 66 | background-color: #00274c; 67 | position: absolute; 68 | left:0; 69 | right:0; 70 | bottom: 0; 71 | width: inherit; 72 | margin: 0px !important; 73 | } 74 | 75 | footer img{ 76 | padding: 5px; 77 | height: 40px; 78 | } 79 | 80 | .maplegend{ 81 | padding-top: 5px; 82 | } 83 | 84 | /* basic positioning */ 85 | .legend { 86 | border: 1px solid black; 87 | list-style: none; 88 | padding: 8px; 89 | } 90 | 91 | .legend li { 92 | /* display: block; */ 93 | padding-right: 15px; 94 | font-size: 9pt; 95 | } 96 | 97 | .legend span { 98 | display:inline-block; 99 | border: 1px solid #ccc; 100 | width: 20px; 101 | height: 15px; 102 | } 103 | 104 | /* your colors */ 105 | 106 | .legend .gray { 107 | background-color: gray; 108 | } 109 | 110 | .legend .greenbrown { 111 | background-color: #7A5F16; 112 | } 113 | .legend .teal { 114 | background-color: #009c96; 115 | } 116 | .legend .red { 117 | background-color: #821807; 118 | } 119 | 120 | .legend .purple{ 121 | background-color:#3E006B; 122 | } 123 | 124 | .legend .blue{ 125 | background-color: #075482; 126 | } 127 | 128 | .legend .green{ 129 | background-color: #067815; 130 | } 131 | 132 | .findroadheader{ 133 | margin: 0px; 134 | padding: 0px; 135 | } 136 | 137 | #findsection{ 138 | padding: 0px 5px; 139 | } 140 | 141 | #roadPR{ 142 | margin: 0px; 143 | padding-left: 5px; 144 | } 145 | 146 | #roadBPT{ 147 | margin: 0px; 148 | padding-left: 5px; 149 | } 150 | 151 | #roadEPT{ 152 | margin: 0px; 153 | padding-left: 5px; 154 | } 155 | 156 | .pr, .bpt, .ept{ 157 | padding: 10px 0px; 158 | } 159 | 160 | label{ 161 | margin: 0px; 162 | padding: 0px; 163 | } 164 | small{ 165 | margin: 0px !important; 166 | padding: 0px; 167 | padding-left: 5px; 168 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | AADT 21 | 22 | 23 | 24 | 25 | Skip to main content 26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
    38 |
  • AADT Estimate is null or 0
    • 39 |
  • AADT Estimate between 0 and 1000
    • 40 |
  • AADT Estimate between 1001 and 4000
    • 41 |
  • AADT Estimate between 4001 and 6000
    • 42 |
  • AADT Estimate between 6001 and 8000
    • 43 |
  • AADT Estimate between 8001 and 10000
    • 44 |
  • AADT Estimate is greater than 10001
    • 45 |
46 |
47 |
48 |
49 |
50 |
51 |

Road Name

52 |
53 |
54 |
55 |
PR:
56 |

57 |
58 |
59 |
60 |
61 |
BPT:
62 |

63 |
64 |
65 |
66 |
67 |
EPT:
68 |

69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 | 81 |
82 |
83 | 84 | Between 0 and 7 85 |
86 | 87 |
88 |
89 |
90 | 91 | 0 = No, 1= Yes 92 |
93 | 94 |
95 |
96 |
97 | 98 | 0 = Rural, 1= Urban 99 |
100 | 101 |
102 |
103 |
104 | 105 |
106 | 107 |
108 |
109 |
110 | 111 |
112 | 113 |
114 | 115 |
116 |
117 |

AADT - SEMCOG

118 |

0

119 |

AADT - ESTIMATED

120 |

121 |

0

122 |
123 |
124 |
125 | 130 |
131 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /map.js: -------------------------------------------------------------------------------- 1 | //globals that update and are updated 2 | var pr = 0 ; 3 | var bpt = ""; 4 | var ept = "" ; 5 | var rdname = '' ; 6 | var nfc = 0 ; 7 | var censustract = "" ; 8 | var ru = 0 ; 9 | var housing = 0 ; 10 | var novehicle = "" ; 11 | var ramp = 0 ; 12 | var aadt = 0 ; 13 | var estimaadt = 0 ; 14 | 15 | 16 | // //input is roadid, populates sidebar form // return aadt 17 | function createMap() { 18 | 19 | mapboxgl.accessToken = 'pk.eyJ1Ijoic3RjaG9pIiwiYSI6ImNqd2pkNWN0NzAyNnE0YW8xeTl5a3VqMXQifQ.Rq3qT82-ysDHcMsHGTBiQg'; 20 | 21 | 22 | map = new mapboxgl.Map({ 23 | container: 'map', 24 | style: 'mapbox://styles/stchoi/cjz8u2gky3dqn1cmxm71d6yus', 25 | center: [-83.84, 42.25], 26 | zoom: 14 27 | }); 28 | 29 | map.addControl(new mapboxgl.NavigationControl()); 30 | 31 | map.on('click', ({point, lngLat}) =>{ 32 | 33 | var features = map.queryRenderedFeatures(point, { layers: ['reducedallroads'] }); 34 | // console.log(features); 35 | var {properties: {PR, BPT, EPT, RDNAME, NFC, CENSUS_TRACT, RU, HOUSING, NO_VEHICLE, RAMP, AADT, ESTIMATED_AADT}} = features[0]; 36 | 37 | var filter = features.reduce(function(memo, features) { 38 | 39 | memo[1].push(features.properties.PR); 40 | memo[2].push(features.properties.BPT); 41 | memo[3].push(features.properties.EPT); 42 | return memo; 43 | }, [ "all", 44 | ["in", 'PR'], 45 | ["in", 'BPT'], 46 | ["in", 'EPT'] 47 | ]); 48 | 49 | 50 | 51 | map.setFilter("roads-highlighted", filter) 52 | // map.setPaintProperty('roads-highlighted', 'line-color', 'black'); 53 | 54 | pr = PR ; 55 | bpt = BPT ; 56 | ept = EPT ; 57 | rdname = RDNAME ; 58 | nfc = NFC ; 59 | censustract = CENSUS_TRACT ; 60 | ru = RU ; 61 | novehicle = NO_VEHICLE ; 62 | housing = HOUSING ; 63 | ramp = RAMP ; 64 | if (AADT != null){ 65 | aadt = AADT; 66 | } else { 67 | aadt = "N/A"; 68 | } 69 | estimaadt = ESTIMATED_AADT 70 | 71 | updateVals(); 72 | }) 73 | 74 | map.on('load', () => { 75 | //https://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty 76 | // https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/ 77 | //https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/ 78 | //https://stackoverflow.com/questions/47951532/mapbox-gl-expressions 79 | 80 | map.setPaintProperty('reducedallroads', 'line-color', ["step", 81 | ["get", "ESTIMATED_AADT"], 82 | 'gray', 1, //gray 83 | '#7A5F16', 1000, //green-brown 84 | '#009c96', 4000, //teal 85 | '#821807', 6000, //red 86 | '#3E006B', 8000, //purple 87 | '#075482', 10000, //blue 88 | '#067815' //green 89 | ]); 90 | 91 | 92 | map.addSource('reducedallroads-highlight', { 93 | "type": "vector", 94 | "url": "mapbox://stchoi.3myu05ki" 95 | }); 96 | map.addLayer({ 97 | "id": "roads-highlighted", 98 | "type": "line", 99 | "source": "reducedallroads-highlight", 100 | "source-layer": "washtenaw_roads_est_aadt-afk5hb", 101 | "filter": [ "all", 102 | ["in", 'PR'], 103 | ["in", 'BPT'], 104 | ["in", 'EPT'] 105 | ], 106 | "layout": { 107 | "line-cap" : "round" 108 | }, 109 | "paint" : { 110 | "line-width" : 12, 111 | "line-opacity" : 0.4 112 | } 113 | }, 'road-label'); 114 | }); 115 | // https://bl.ocks.org/danswick/4906b495e0b206758f71 116 | map.on('mouseenter', 'reducedallroads', () => { 117 | map.getCanvas().style.cursor = 'pointer'; 118 | }); 119 | 120 | // Change it back to a pointer when it leaves. 121 | map.on('mouseleave', 'reducedallroads', () => { 122 | map.getCanvas().style.cursor = ''; 123 | }); 124 | } 125 | 126 | function updateVals(){ 127 | console.log('got to updateVals'); 128 | valRDNAME = document.querySelector("#valRDNAME"); 129 | valSemcogAADT = document.querySelector("#valSemcogAADT"); 130 | valEstimAADT = document.querySelector("#valEstimAADT") 131 | inp_NFC = document.querySelector("#inputfieldNFC"); 132 | inp_RAMP = document.querySelector("#inputfieldRAMP"); 133 | inp_RU = document.querySelector("#inputfieldRU"); 134 | inp_HOUSING = document.querySelector("#inputfieldHOUSING"); 135 | inp_NOVEHICLE = document.querySelector("#inputfieldNOVEHICLE"); 136 | inp_RDNAME = document.querySelector("#valRDNAME"); 137 | inp_EPT = document.querySelector("#roadEPT"); 138 | inp_BPT = document.querySelector("#roadBPT"); 139 | inp_PR = document.querySelector("#roadPR"); 140 | estimAADT = document.querySelector("#estimAADT") 141 | 142 | valRDNAME.innerHTML = rdname; 143 | valSemcogAADT.innerHTML = aadt; 144 | inp_NFC.value = nfc; 145 | inp_RAMP.value = ramp; 146 | inp_RU.value= ru; 147 | inp_HOUSING.value = housing * 1000; 148 | inp_NOVEHICLE.value= novehicle * 1000; 149 | inp_RDNAME.innerHTML = rdname; 150 | inp_EPT.innerHTML = ept; 151 | inp_BPT.innerHTML = bpt; 152 | inp_PR.innerHTML= pr; 153 | estimAADT.innerHTML = estimaadt 154 | } 155 | 156 | // function updateFromSearch(object){ 157 | // console.log('got to updatefromsearch') 158 | // aadt = object.properties.AADT; 159 | // nfc = object.properties.NFC; 160 | // ramp = object.properties.RAMP; 161 | // ru = object.properties.RU; 162 | // housing = object.properties.HOUSING; 163 | // novehicle = object.properties.NO_VEHICLE; 164 | // pr = object.properties.PR ; 165 | // bpt = object.properties.BPT ; 166 | // ept = object.properties.EPT ; 167 | // rdname = object.properties.RDNAME ; 168 | // censustract = object.properties.CENSUS_TRACT ; 169 | 170 | // updateVals(); 171 | // } 172 | 173 | // function listenForVals(){ 174 | // event.preventDefault(); 175 | // console.log("run") 176 | // // valSemcogAADT = document.querySelector("#valSemcogAADT").value; 177 | // inp_EPT = document.querySelector("#inputfieldEPT").value; 178 | // inp_BPT = document.querySelector("#inputfieldBPT").value; 179 | // inp_PR = parseInt(document.querySelector("#inputfieldPR").value); 180 | 181 | // map.queryRenderedFeatures({layers : ['reducedallroads']}).map(j => j) 182 | // .forEach( obj => { 183 | 184 | // if ( obj.properties.EPT == inp_EPT && obj.properties.BPT == inp_BPT && obj.properties.PR == inp_PR){ 185 | // console.log("we found a match"); 186 | // console.log(obj); 187 | // selectOnMap(obj); 188 | // updateFromSearch(obj); 189 | // } 190 | // }); 191 | // } 192 | 193 | // function selectOnMap(road){ 194 | // // console.log(road); 195 | // map.setFilter("roads-highlighted", [ "all", 196 | // ["in", 'PR'], 197 | // ["in", 'BPT'], 198 | // ["in", 'EPT'] 199 | // ] ); 200 | // map.setPaintProperty('roads-highlighted', 'line-color', 'black'); 201 | 202 | // } 203 | 204 | function calculateNewAADT(){ 205 | console.log("calculate"); 206 | event.preventDefault(); 207 | valEstimAADT = document.querySelector("#valEstimAADT"); 208 | val_NFC = parseInt(document.querySelector("#inputfieldNFC").value); 209 | val_RAMP = parseInt(document.querySelector("#inputfieldRAMP").value); 210 | val_RU = parseInt(document.querySelector("#inputfieldRU").value); 211 | val_HOUSING = parseInt(document.querySelector("#inputfieldHOUSING").value) / 1000; 212 | val_NOVEHICLE = parseInt(document.querySelector("#inputfieldNOVEHICLE").value) / 1000; 213 | 214 | ; 215 | let vehicHousing = val_NOVEHICLE - val_HOUSING; 216 | 217 | function coefficientNFC(){ 218 | if (val_NFC == 2){ 219 | return 14.118 220 | } else if (val_NFC == 3){ 221 | return -170.121 222 | } else if (val_NFC == 4){ 223 | return -169.488 224 | } else if (val_NFC == 5){ 225 | return -208.668 226 | } else { 227 | return 0 228 | }; 229 | }; 230 | 231 | function vehicleMinusHousing(){ 232 | return -14.128 * vehicHousing 233 | }; 234 | 235 | function ruralUrban(){ 236 | if (val_RU == 1){ 237 | return 17.66 238 | } else { 239 | return 0 240 | } 241 | }; 242 | function rampFlag(){ 243 | return -193.921 * val_RAMP 244 | }; 245 | 246 | function nfcRAMP(){ 247 | if (val_RAMP == 1){ 248 | if (val_NFC == 2){ 249 | return 22.136 250 | } else if (val_NFC == 3){ 251 | return 67.665 252 | } else { 253 | return 0 254 | } 255 | } else { 256 | return 0 257 | } 258 | }; 259 | 260 | function nfcVEHICLEHOUSING(){ 261 | if (val_NFC == 2){ 262 | return -4.817 * vehicHousing 263 | } else if (val_NFC == 3){ 264 | return 21.998 * vehicHousing 265 | } else if (val_NFC == 4){ 266 | return 7.281 * vehicHousing 267 | } else if (val_NFC == 5){ 268 | return 10.741 * vehicHousing 269 | } else { 270 | return 0 271 | } 272 | }; 273 | 274 | function nfcIFURBAN(){ 275 | if (val_RU == 1){ 276 | if (val_NFC == 2){ 277 | return -29.5 278 | } else if (val_NFC == 3){ 279 | return 21.006 280 | } else if (val_NFC == 4){ 281 | return -10.039 282 | } else if (val_NFC == 5){ 283 | return -3.349 284 | } else { 285 | return 0 286 | } 287 | } else { 288 | return 0 289 | } 290 | }; 291 | 292 | 293 | estimateAADT = Math.round( Math.pow((264.208 + coefficientNFC() + vehicleMinusHousing() + rampFlag() + ruralUrban() + nfcRAMP() + nfcVEHICLEHOUSING() + nfcIFURBAN()), 2)) 294 | 295 | valEstimAADT.innerHTML = estimateAADT.toLocaleString(); 296 | // val_AADT.innerHTML = "we did it" 297 | } --------------------------------------------------------------------------------