API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 15th, 2018
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 194.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Idaho 2014-18 Prototype</title>
  5. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  6. <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
  7. <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
  8. <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
  9. <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
  10. </script>
  11.  
  12. <style>
  13. body {
  14. margin: 0;
  15. padding: 0;}
  16. h1 {
  17. margin-left: 2px;
  18. margin-right: 2px;
  19. margin-bottom: 4px;
  20. margin-top: 4px;
  21. font-size: .75em;
  22. background-color: #c0c0c0;}
  23. h2 {
  24. margin-left: 10px;
  25. margin-right: 10px;
  26. margin-bottom: 4px;
  27. margin-top: 4px;
  28. font-size: 1.2em;
  29. text-align: center;}
  30. h3 {
  31. margin-left: 10px;
  32. margin-right: 10px;
  33. margin-bottom: 4px;
  34. margin-top: 4px;
  35. font-size: 1.2em;
  36. background-color: #c0c0c0;
  37. text-align: center;}
  38. p {
  39. font-size: 1em;
  40. line-height: 100%;
  41. margin-left: 10px;
  42. margin-right: 10px;
  43. margin-bottom: 2px;
  44. margin-top: 0px;
  45. text-align: left;
  46. }
  47. p1 { font-size: 1em;
  48. line-height: 100%;
  49. margin-left: 10px;
  50. margin-right: 10px;
  51. margin-bottom: 2px;
  52. margin-top: 0px;
  53. text-align: left;
  54. background-color: #ff7171;
  55. }
  56. p2 { font-size: 1em;
  57. line-height: 100%;
  58. margin-left: 10px;
  59. margin-right: 10px;
  60. margin-bottom: 2px;
  61. margin-top: 0px;
  62. text-align: left;
  63. background-color: #8282e5;
  64. }
  65. p3 { font-size: 1em;
  66. line-height: 100%;
  67. margin-left: 10px;
  68. margin-right: 10px;
  69. margin-bottom: 2px;
  70. margin-top: 0px;
  71. text-align: left;
  72. background-color: #42c041;
  73. }
  74. p4 { font-size: 1em;
  75. line-height: 100%;
  76. margin-left: 10px;
  77. margin-right: 10px;
  78. margin-bottom: 2px;
  79. margin-top: 0px;
  80. text-align: left;
  81. background-color: #c0c057;
  82. }
  83. p6 { font-size: .6em;
  84. line-height: 100%;
  85. margin-left: 2px;
  86. margin-right: 2px;
  87. margin-bottom: 2px;
  88. margin-top: 0px;
  89. text-align: left;
  90. }
  91. /**
  92. * Create a position for the map
  93. * on the page */
  94. #map {
  95. position: absolute;
  96. top: 0;
  97. bottom: 0;
  98. width: 100%;
  99. }
  100. #console {
  101. position: absolute;
  102. width: 120px;
  103. height: 95px;
  104. bottom: 40px;
  105. left: : 20px;
  106. margin: 5px;
  107. padding: 5px;
  108. background-color: white;
  109. opacity: .6;
  110. }
  111. .session {
  112. margin-left: 0px;
  113. margin-bottom: 5px;
  114. }
  115. .row {
  116. margin-left: 0px;
  117. height: 12px;
  118. width: 120px;
  119. margin-top: 10px;
  120. }
  121. .label {
  122. display: inline-block;
  123. text-align: left;
  124. }
  125. #map-overlay {
  126. font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  127. position: relative;
  128. width: 50%;
  129. left: 0;
  130. padding: 0px;
  131. }
  132. .map-overlay .map-overlay-inner {
  133. background-color: #fff;
  134. box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
  135. border-radius: 3px;
  136. padding: 5px;
  137. margin-bottom: 2px;
  138. }
  139. .map-overlay label {
  140. display: block;
  141. margin: 0 0 5px;
  142. }
  143. .map-overlay input {
  144. background-color: transparent;
  145. display: inline-block;
  146. width: 100%;
  147. position: relative;
  148. margin: 0;
  149. cursor: ew-resize;
  150. }
  151. #csmap-overlay {
  152. font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  153. position: relative;
  154. width: 50%;
  155. left: 0;
  156. top: 80px;
  157. padding: 0px;
  158. }
  159. .csmap-overlay .csmap-overlay-inner {
  160. background-color: #fff;
  161. box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
  162. border-radius: 3px;
  163. padding: 5px;
  164. margin-bottom: 2px;
  165. }
  166. .csmap-overlay label {
  167. display: block;
  168. margin: 0 0 5px;
  169. }
  170. .csmap-overlay input {
  171. background-color: transparent;
  172. display: inline-block;
  173. width: 100%;
  174. position: relative;
  175. margin: 0;
  176. cursor: ew-resize;
  177. }
  178. .csmap-year {
  179. position: relative;
  180. width: 100%;
  181. bottom: 5px;
  182. padding: 0px;
  183. }
  184. .csmap-year row {
  185. margin-left: 10px;
  186. padding: 0px;
  187. float: left;
  188. text-align: left;
  189. list-style: none;
  190. margin-bottom: 0px;
  191. margin-top: 0px;
  192. }
  193. .csmap-overlay .csmap-overlay-radio {
  194. background-color: #fff;
  195. border-radius: 3px;
  196. padding: 5px;
  197. margin-top: 2px;
  198. margin-bottom: 2px;
  199. }
  200. .csmap-overlay .csmap-overlay-radio ro {
  201. display: block;
  202. float: left;
  203. margin-left: 25%;
  204. margin-bottom: 10px;
  205. text-align: left;
  206. font-size: 100%;
  207. }
  208. .my-legend {
  209. font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  210. position: absolute;
  211. width: 275px;
  212. top: 10px;
  213. left: 10px;
  214. padding: 0px;
  215. margin-bottom: 0px;
  216. margin-top: 0px;
  217. background-color: #ffffff;
  218. opacity: 0.8;
  219. }
  220. .my-legend .legend-title {
  221. text-align: left;
  222. margin-left: 2px;
  223. margin-bottom: 0px;
  224. font-weight: bold;
  225. font-size: 90%;
  226. }
  227. .my-legend .legend-scale ul {
  228. margin-left: 10px;
  229. padding: 0px;
  230. float: left;
  231. text-align: left;
  232. list-style: none;
  233. margin-bottom: 0px;
  234. margin-top: 0px;
  235. }
  236. .my-legend .legend-candidates cn {
  237. text-align: left;
  238. width: 100px;
  239. font-size: 10px;
  240. padding: 0px;
  241. margin-top: 0px;
  242. margin-bottom: 0px;
  243.  
  244. }
  245. .my-legend .legend-scale ul li {
  246. display: block;
  247. float: left;
  248. width: 12px;
  249. margin-bottom: 0px;
  250. text-align: center;
  251. font-size: 80%;
  252. list-style: none;
  253. }
  254. .my-legend ul.legend-labels li span {
  255. display: block;
  256. float: left;
  257. height: 15px;
  258. width: 15px;
  259. margin-bottom: 0px;
  260. margin-top: 0px;
  261. }
  262. .my-legend .legend-source {
  263. font-size: 70%;
  264. color: #999;
  265. clear: both;
  266. }
  267. .my-legend a {
  268. color: #777;
  269. }
  270. .span {
  271. margin-top: 0px
  272. margin-bottom: 0px;
  273. }
  274. .menu {
  275. padding: 0;
  276. margin: 0;
  277. right: 300px;
  278. position: absolute;
  279. }
  280. .menu .menu {
  281. display: none;
  282. position: absolute;
  283. left: 0;
  284. width: 200px;
  285. }
  286. .menu .menu .menu {
  287. left: 100%;
  288. top: 0;
  289. }
  290. .menu li {
  291. position: relative;
  292. float: left;
  293. list-style: none;
  294. }
  295. .menu .menu li {
  296. float: none;
  297. }
  298. .menu li:hover > .menu {
  299. display: block;
  300. }
  301. .menu a {
  302. display: block;
  303. border: 1px solid #fff;
  304. padding: 10px;
  305. background: lightgray;
  306. }
  307. #menu {
  308. background: #fff;
  309. position: absolute;
  310. z-index: 1;
  311. bottom: 30px;
  312. left: 10px;
  313. border-radius: 3px;
  314. width: 80px;
  315. border: 1px solid rgba(0,0,0,0.4);
  316. font-family: 'Open Sans', sans-serif;
  317. }
  318.  
  319. #menu a {
  320. font-size: 13px;
  321. color: #404040;
  322. display: block;
  323. margin: 0;
  324. padding: 0;
  325. padding: 10px;
  326. text-decoration: none;
  327. border-bottom: 1px solid rgba(0,0,0,0.25);
  328. text-align: center;
  329. }
  330.  
  331. #menu a:last-child {
  332. border: none;
  333. }
  334.  
  335. #menu a:hover {
  336. background-color: #f8f8f8;
  337. color: #404040;
  338. }
  339.  
  340. #menu a.active {
  341. background-color: #3887be;
  342. color: #ffffff;
  343. }
  344.  
  345. #menu a.active:hover {
  346. background: #3074a4;
  347. }
  348. #menu a.county {
  349. background-color: #3887be;
  350. color: #ffffff;
  351. }
  352.  
  353. #menu a.county:hover {
  354. background: #3074a4;
  355. }
  356. #menu a.header {
  357. background-color: #707070;
  358. color: #ffffff;
  359. }
  360. #menu1 {
  361. background: #fff;
  362. position: absolute;
  363. z-index: 1;
  364. bottom: 30px;
  365. left: 140px;
  366. border-radius: 3px;
  367. width: 90px;
  368. border: 1px solid rgba(0,0,0,0.4);
  369. font-family: 'Open Sans', sans-serif;
  370. }
  371. #menu1 a {
  372. font-size: 13px;
  373. color: #404040;
  374. display: block;
  375. margin: 0;
  376. padding: 0;
  377. padding: 10px;
  378. text-decoration: none;
  379. border-bottom: 1px solid rgba(0,0,0,0.25);
  380. text-align: center;
  381. }
  382.  
  383. #menu1 a:last-child {
  384. border: none;
  385. }
  386.  
  387. #menu1 a:hover {
  388. background-color: #f8f8f8;
  389. color: #404040;
  390. }
  391.  
  392. #menu1 a.active1 {
  393. background-color: #3887be;
  394. color: #ffffff;
  395. }
  396.  
  397. #menu1 a.active1:hover {
  398. background: #3074a4;
  399. }
  400. #menu1 a.header {
  401. background-color: #707070;
  402. color: #ffffff;
  403. }
  404. #menu2 {
  405. background: #fff;
  406. position: absolute;
  407. z-index: 1;
  408. bottom: 30px;
  409. left: 140px;
  410. border-radius: 3px;
  411. width: 90px;
  412. border: 1px solid rgba(0,0,0,0.4);
  413. font-family: 'Open Sans', sans-serif;
  414. }
  415. #menu2 a {
  416. font-size: 13px;
  417. color: #404040;
  418. display: block;
  419. margin: 0;
  420. padding: 0;
  421. padding: 10px;
  422. text-decoration: none;
  423. border-bottom: 1px solid rgba(0,0,0,0.25);
  424. text-align: center;
  425. }
  426.  
  427. #menu2 a:last-child {
  428. border: none;
  429. }
  430.  
  431. #menu2 a:hover {
  432. background-color: #f8f8f8;
  433. color: #404040;
  434. }
  435.  
  436. #menu2 a.active2 {
  437. background-color: #3887be;
  438. color: #ffffff;
  439. }
  440.  
  441. #menu2 a.active2:hover {
  442. background: #3074a4;
  443. }
  444. #menu2 a.header {
  445. background-color: #707070;
  446. color: #ffffff;
  447. }
  448. #menu3 {
  449. background: #fff;
  450. position: absolute;
  451. z-index: 1;
  452. bottom: 30px;
  453. left: 140px;
  454. border-radius: 3px;
  455. width: 90px;
  456. border: 1px solid rgba(0,0,0,0.4);
  457. font-family: 'Open Sans', sans-serif;
  458. }
  459. #menu3 a {
  460. font-size: 13px;
  461. color: #404040;
  462. display: block;
  463. margin: 0;
  464. padding: 0;
  465. padding: 10px;
  466. text-decoration: none;
  467. border-bottom: 1px solid rgba(0,0,0,0.25);
  468. text-align: center;
  469. }
  470.  
  471. #menu3 a:last-child {
  472. border: none;
  473. }
  474.  
  475. #menu3 a:hover {
  476. background-color: #f8f8f8;
  477. color: #404040;
  478. }
  479.  
  480. #menu3 a.active3 {
  481. background-color: #3887be;
  482. color: #ffffff;
  483. }
  484.  
  485. #menu3 a.active3:hover {
  486. background: #3074a4;
  487. }
  488. #menu3 a.header {
  489. background-color: #707070;
  490. color: #ffffff;
  491. }
  492. #menu4 {
  493. background: #fff;
  494. position: absolute;
  495. z-index: 1;
  496. bottom: 30px;
  497. left: 140px;
  498. border-radius: 3px;
  499. width: 90px;
  500. border: 1px solid rgba(0,0,0,0.4);
  501. font-family: 'Open Sans', sans-serif;
  502. }
  503. #menu4 a {
  504. font-size: 13px;
  505. color: #404040;
  506. display: block;
  507. margin: 0;
  508. padding: 0;
  509. padding: 10px;
  510. text-decoration: none;
  511. border-bottom: 1px solid rgba(0,0,0,0.25);
  512. text-align: center;
  513. }
  514.  
  515. #menu4 a:last-child {
  516. border: none;
  517. }
  518.  
  519. #menu4 a:hover {
  520. background-color: #f8f8f8;
  521. color: #404040;
  522. }
  523.  
  524. #menu4 a.active4 {
  525. background-color: #3887be;
  526. color: #ffffff;
  527. }
  528.  
  529. #menu4 a.active4:hover {
  530. background: #3074a4;
  531. }
  532. #menu2014 {
  533. background: #fff;
  534. position: absolute;
  535. z-index: 1;
  536. bottom: 30px;
  537. left: 90px;
  538. border-radius: 3px;
  539. width: 50px;
  540. border: 1px solid rgba(0,0,0,0.4);
  541. font-family: 'Open Sans', sans-serif;
  542. }
  543. #menu4 a.header {
  544. background-color: #707070;
  545. color: #ffffff;
  546. }
  547. #menu2014 a {
  548. font-size: 13px;
  549. color: #404040;
  550. display: block;
  551. margin: 0;
  552. padding: 0;
  553. padding: 10px;
  554. text-decoration: none;
  555. border-bottom: 1px solid rgba(0,0,0,0.25);
  556. text-align: center;
  557. }
  558.  
  559. #menu2014 a:last-child {
  560. border: none;
  561. }
  562.  
  563. #menu2014 a:hover {
  564. background-color: #f8f8f8;
  565. color: #404040;
  566. }
  567.  
  568. #menu2014 a.active2014 {
  569. background-color: #3887be;
  570. color: #ffffff;
  571. }
  572.  
  573. #menu2014 a.active2014:hover {
  574. background: #3074a4;
  575. }
  576. #menu2014 a.header {
  577. background-color: #707070;
  578. color: #ffffff;
  579. }
  580. #menu2018 {
  581. background: #fff;
  582. position: absolute;
  583. z-index: 1;
  584. bottom: 30px;
  585. left: 90px;
  586. border-radius: 3px;
  587. width: 50px;
  588. border: 1px solid rgba(0,0,0,0.4);
  589. font-family: 'Open Sans', sans-serif;
  590. }
  591. #menu2018 a {
  592. font-size: 13px;
  593. color: #404040;
  594. display: block;
  595. margin: 0;
  596. padding: 0;
  597. padding: 10px;
  598. text-decoration: none;
  599. border-bottom: 1px solid rgba(0,0,0,0.25);
  600. text-align: center;
  601. }
  602.  
  603. #menu2018 a:last-child {
  604. border: none;
  605. }
  606.  
  607. #menu2018 a:hover {
  608. background-color: #f8f8f8;
  609. color: #404040;
  610. }
  611.  
  612. #menu2018 a.active2018 {
  613. background-color: #3887be;
  614. color: #ffffff;
  615. }
  616.  
  617. #menu2018 a.active2018:hover {
  618. background: #3074a4;
  619. }
  620. #menu2018 a.header {
  621. background-color: #707070;
  622. color: #ffffff;
  623. }
  624. worker-src blob: ;
  625. child-src blob: ;
  626. img-src data: blob: ;
  627. connect-src https://*.tiles.mapbox.com https://api.mapbox.com
  628.  
  629. /**
  630. </style>
  631. <div id='map'></div>
  632. <nav id ='menu'></nav>
  633. <nav id = 'menu2014'></nav>
  634. <nav id = 'menu2018'></nav>
  635. <nav id = 'menu1'></nav>
  636. <nav id = 'menu2'></nav>
  637. <nav id = 'menu3'></nav>
  638. <nav id = 'menu4'></nav>
  639. <nav id ='menu.menu2018'></nav>
  640. <div class='my-legend'>
  641. <div class='legend-title'><span id='legend-title'></span></div>
  642. <div class='legend-scale'>
  643. <tr><ul class='legend-labels'>
  644. <li><span id = 'color-value-2-0' style=''></span></li>
  645. <li><span id = 'color-value-210' style=''></span></li>
  646. <li><span id = 'color-value-220' style=''></span></li>
  647. <li><span id = 'color-value-230' style=''></span></li>
  648. <li><span id = 'color-value-240' style=''></span></li>
  649. <li><span id = 'color-value-250' style=''></span></li>
  650. <li><span id = 'color-value-260' style=''></span></li>
  651. <li><span id = 'color-value-270' style=''></span></li>
  652. <li><span id = 'color-value-280' style=''></span></li>
  653. <li><span id = 'color-value-290' style=''></span></li>
  654. <li><span id = 'color-value-300'style=''></span></li>
  655. <li><span id = 'color-value-3-10'style=''></span></li>
  656. </ul><ul class ='legend-candidates'><cn id='legend-CandidateC'></cn><cn id = 'legend-C-pct'></cn></ul></tr>
  657. <tr><ul class='legend-labels'>
  658. <li><span id = 'color-value-3-0' style=''></span></li>
  659. <li><span id = 'color-value-310' style=''></span></li>
  660. <li><span id = 'color-value-320' style=''></span></li>
  661. <li><span id = 'color-value-330' style=''></span></li>
  662. <li><span id = 'color-value-340' style=''></span></li>
  663. <li><span id = 'color-value-350' style=''></span></li>
  664. <li><span id = 'color-value-360' style=''></span></li>
  665. <li><span id = 'color-value-370' style=''></span></li>
  666. <li><span id = 'color-value-380' style=''></span></li>
  667. <li><span id = 'color-value-390' style=''></span></li>
  668. <li><span id = 'color-value-400'style=''></span></li>
  669. <li><span id = 'color-value-4-10'style=''></span></li>
  670. </ul><ul class ='legend-candidates'><cn id='legend-CandidateD'></cn><cn id = 'legend-D-pct'></cn></ul></tr>
  671. <tr><ul class='legend-labels'>
  672. <li><span id = 'color-value-4-0' style=''></span></li>
  673. <li><span id = 'color-value-410' style=''></span></li>
  674. <li><span id = 'color-value-420' style=''></span></li>
  675. <li><span id = 'color-value-430' style=''></span></li>
  676. <li><span id = 'color-value-440' style=''></span></li>
  677. <li><span id = 'color-value-450' style=''></span></li>
  678. <li><span id = 'color-value-460' style=''></span></li>
  679. <li><span id = 'color-value-470' style=''></span></li>
  680. <li><span id = 'color-value-480' style=''></span></li>
  681. <li><span id = 'color-value-490' style=''></span></li>
  682. <li><span id = 'color-value-500'style=''></span></li>
  683. <li><span id = 'color-value-5-10'style=''></span></li>
  684. </ul> <ul class ='legend-candidates'><cn id='legend-CandidateE'></cn><cn id = 'legend-E-pct'></cn></ul></tr>
  685. <tr><ul class ='legend-labels'>
  686. <li><span id='color-value-5-0' style=''></span><span = id = 'color-pct-0'>0%</span></li>
  687. <li><span id = 'color-value-510' style=''></span><span = id = 'color-pct-10'>10</span></li>
  688. <li><span id = 'color-value-520' style=''></span><span = id = 'color-pct-20'>20</span></li>
  689. <li><span id = 'color-value-530' style=''></span><span = id = 'color-pct-30'>30</span></li>
  690. <li><span id = 'color-value-540' style=''></span><span = id = 'color-pct-40'>40</span></li>
  691. <li><span id = 'color-value-550' style=''></span><span = id = 'color-pct-50'>50</span></li>
  692. <li><span id = 'color-value-560' style=''></span><span = id = 'color-pct-60'>60</span></li>
  693. <li><span id = 'color-value-570'style=''></span><span = id = 'color-pct-70'>70</span></li>
  694. <li><span id = 'color-value-580'style=''></span><span = id = 'color-pct-80'>80</span></li>
  695. <li><span id = 'color-value-590'style=''></span><span = id = 'color-pct-90'>90</span></li>
  696. <li><span id = 'color-value-600'style=''></span><span = id = 'color-pct-100'>99</span></li>
  697. <li><span id = 'color-value-6-10'style=''></span><span = id = 'color-pct-110'> 100%</span></li></ul>
  698. <ul class ='legend-candidates'><cn id='legend-CandidateF'>' '</cn><cn id = 'legend-F-pct'></cn></ul></tr>
  699. </div>
  700. <div class='legend-source'>Source: Idaho Secretary of State & Various Counties</div>
  701. <div class='map-overlay top'>
  702. <div class='map-overlay-inner'>
  703. <label>Layer opacity: <span id='slider-value'>75%</span></label>
  704. <input id='slider' type='range' min='0' max='100' step='0' value='75' />
  705. </div>
  706. </div>
  707. <div class='csmap-overlay top'>
  708. <div class='csmap-overlay-inner'>
  709. <label>Color Step: <span id='csslider-value'>10 points</span></label>
  710. <input id='csslider' type='range' min='1' max='100' step='0' value='100' />
  711. </div>
  712. </div>
  713. </head>
  714. <script>
  715. mapboxgl.accessToken = 'pk.eyJ1IjoiY2lueWMiLCJhIjoiY2plcDc5c2x1MnlhNDJ4bWVkODVqOWo1bCJ9.6ASroxRY3cWjadWnJz4fXA';
  716. var map = new mapboxgl.Map({
  717. container: 'map', // container id
  718. style: 'mapbox://styles/cinyc/cjic6stwl03q72sp76lddrh8p', // stylesheet location
  719. center: [-114.32, 43.50], // starting position [lng, lat]
  720. zoom: 7.0 // starting zoom
  721. });
  722. //must change for different races
  723. var layer1 = 'ID_Precinct-County_for_Websit-5ovw6t';
  724. var layerCounty = 'Idaho_County_2017-1dyjc1';
  725. var layer2 = 'ID_Precinct_2014_Final_Data_M-dyrpv7';
  726. var Wincode = "G_SPEWinco";
  727. var Wincode2 = 'G_14SupEdG';
  728. var Wincode3 = 'G_14GovGEW';
  729. var Wincode4 = 'G_Gwincode';
  730. var Red = "G_PCTYbarr";
  731. var Blue = "G_PCTWilso";
  732. var Green = '';
  733. var Yellow = "";
  734. var Orange = '';
  735. var Purple = '';
  736. var Red2 = "G_PCTWasde";
  737. var Blue2 = "G_PCTJones";
  738. var Green2 = '';
  739. var Yellow2 = "";
  740. var Orange2 = '';
  741. var Purple2 = '';
  742. var Red3 = "G_PCTOtter";
  743. var Blue3 = "G_PCTBaluk";
  744. var Green3 = 'G_PCTHumbl';
  745. var Yellow3 = "G_PCTBujak";
  746. var Orange3 = 'G_PCTPanke';
  747. var Purple3 = 'G_PCTPro-L';
  748. var Red4 = "G_PCTLittl";
  749. var Blue4 = "G_PCTJorda";
  750. var Green4 = '';
  751. var Yellow4 = "G_PCTBoek";
  752. var Orange4 = 'G_PCTBayes';
  753. var Purple4 = '';
  754. var RedCandidate = "Ybarra";
  755. var BlueCandidate = "Wilson";
  756. var GreenCandidate = '';
  757. var YellowCandidate = "";
  758. var OrangeCandidate = '';
  759. var PurpleCandidate = '';
  760. var RedCandidate2 = "Ybarra";
  761. var BlueCandidate2 = "Jones";
  762. var GreenCandidate2 = '';
  763. var YellowCandidate2 = "";
  764. var OrangeCandidate2 = '';
  765. var PurpleCandidate2 = '';
  766. var RedCandidate3 = "Otter";
  767. var BlueCandidate3 = "Balukoff";
  768. var GreenCandidate3 = 'Humble';
  769. var YellowCandidate3 = "Bujak";
  770. var OrangeCandidate3 = 'Pankey';
  771. var PurpleCandidate3 = 'Pro-Life';
  772. var RedCandidate4 = "Little";
  773. var BlueCandidate4 = "Jordan";
  774. var GreenCandidate4 = '';
  775. var YellowCandidate4 = "Boeck";
  776. var OrangeCandidate4 = 'Bayes';
  777. var PurpleCandidate4 = '';
  778. var RedStatewidePCT = '51.4';
  779. var BlueStatewidePCT = '48.6';
  780. var GreenStatewidePCT = '';
  781. var YellowStatewidePCT = '';
  782. var OrangeStatewidePCT = '';
  783. var PurpleStatewidePCT = '';
  784. var RedStatewidePCT2 = '50.9';
  785. var BlueStatewidePCT2 = '49.1';
  786. var GreenStatewidePCT2 = '';
  787. var YellowStatewidePCT2 = '';
  788. var OrangeStatewidePCT2 = '';
  789. var PurpleStatewidePCT2 = '';
  790. var RedStatewidePCT3 = '50.9';
  791. var BlueStatewidePCT3 = '49.1';
  792. var GreenStatewidePCT3 = '2.0';
  793. var YellowStatewidePCT3 = '4.3';
  794. var OrangeStatewidePCT3 = '1.2';
  795. var PurpleStatewidePCT3 = '0.7';
  796. var RedStatewidePCT4 = '59.8';
  797. var BlueStatewidePCT4 = '38.2';
  798. var GreenStatewidePCT4 = '';
  799. var YellowStatewidePCT4 = '1.1';
  800. var OrangeStatewidePCT4 = '1.0';
  801. var PurpleStatewidePCT4 = '';
  802. var StatewideVotes = '594,459';
  803. var StatewideVotes2 = '381,874';
  804. var StatewideVotes3 = '391,992';
  805. var StatewideVotes4 = ' 605,176';
  806. var TotalVotes = 'G_SPETotal';
  807. var TotalVotes2 = 'G_SupEdTot';
  808. var TotalVotes3 = 'G_GovTotal';
  809. var TotalVotes4 = 'G_Gtotal';
  810. var precname1 = 'G_NAME18';
  811. var precname2 = 'PRECINCT14';
  812. var precname3 = 'PRECINCT14';
  813. var precname4 = 'G_NAME18';
  814. var County = 'G_County';
  815. var County2 = '';
  816. var County3 = '';
  817. var County4 = 'G_County';
  818. //define default color scale (1=10 points)
  819. var colorscale = 1;
  820. //define slider values
  821. var slider = document.getElementById('slider');
  822. var sliderValue = document.getElementById('slider-value');
  823. var csslider = document.getElementById('csslider');
  824. var cssliderValue = document.getElementById('csslider-value');
  825. //define legend values
  826. var colorpct500b = document.getElementById('color-pct5-0');
  827. var colorpct510 = document.getElementById('color-pct-10');
  828. var colorpct520 = document.getElementById('color-pct-20');
  829. var colorpct530 = document.getElementById('color-pct-30');
  830. var colorpct540 = document.getElementById('color-pct-40');
  831. var colorpct550 = document.getElementById('color-pct-50');
  832. var colorpct560 = document.getElementById('color-pct-60');
  833. var colorpct570 = document.getElementById('color-pct-70');
  834. var colorpct580 = document.getElementById('color-pct-80');
  835. var colorpct590 = document.getElementById('color-pct-90');
  836. var colorpct600 = document.getElementById('color-pct-100');
  837. var colorpct600a = document.getElementById('color-pct-110');
  838. var colorvalue200b = document.getElementById('color-value-2-0');
  839. var colorvalue210 = document.getElementById('color-value-210');
  840. var colorvalue220 = document.getElementById('color-value-220');
  841. var colorvalue230 = document.getElementById('color-value-230');
  842. var colorvalue240 = document.getElementById('color-value-240');
  843. var colorvalue250 = document.getElementById('color-value-250');
  844. var colorvalue260 = document.getElementById('color-value-260');
  845. var colorvalue270 = document.getElementById('color-value-270');
  846. var colorvalue280 = document.getElementById('color-value-280');
  847. var colorvalue290 = document.getElementById('color-value-290');
  848. var colorvalue300 = document.getElementById('color-value-300');
  849. var colorvalue300a = document.getElementById('color-value-3-10');
  850. var colorvalue300b = document.getElementById('color-value-3-0');
  851. var colorvalue310 = document.getElementById('color-value-310');
  852. var colorvalue320 = document.getElementById('color-value-320');
  853. var colorvalue330 = document.getElementById('color-value-330');
  854. var colorvalue340 = document.getElementById('color-value-340');
  855. var colorvalue350 = document.getElementById('color-value-350');
  856. var colorvalue360 = document.getElementById('color-value-360');
  857. var colorvalue370 = document.getElementById('color-value-370');
  858. var colorvalue380 = document.getElementById('color-value-380');
  859. var colorvalue390 = document.getElementById('color-value-390');
  860. var colorvalue400 = document.getElementById('color-value-400');
  861. var colorvalue400a = document.getElementById('color-value-4-10');
  862. var colorvalue400b = document.getElementById('color-value-4-0');
  863. var colorvalue410 = document.getElementById('color-value-410');
  864. var colorvalue420 = document.getElementById('color-value-420');
  865. var colorvalue430 = document.getElementById('color-value-430');
  866. var colorvalue440 = document.getElementById('color-value-440');
  867. var colorvalue450 = document.getElementById('color-value-450');
  868. var colorvalue460 = document.getElementById('color-value-460');
  869. var colorvalue470 = document.getElementById('color-value-470');
  870. var colorvalue480 = document.getElementById('color-value-480');
  871. var colorvalue490 = document.getElementById('color-value-490');
  872. var colorvalue500 = document.getElementById('color-value-500');
  873. var colorvalue500a = document.getElementById('color-value-5-10');
  874. var colorvalue500b = document.getElementById('color-value-5-0');
  875. var colorvalue510 = document.getElementById('color-value-510');
  876. var colorvalue520 = document.getElementById('color-value-520');
  877. var colorvalue530 = document.getElementById('color-value-530');
  878. var colorvalue540 = document.getElementById('color-value-540');
  879. var colorvalue550 = document.getElementById('color-value-550');
  880. var colorvalue560 = document.getElementById('color-value-560');
  881. var colorvalue570 = document.getElementById('color-value-570');
  882. var colorvalue580 = document.getElementById('color-value-580');
  883. var colorvalue590 = document.getElementById('color-value-590');
  884. var colorvalue600 = document.getElementById('color-value-600');
  885. var colorvalue600a = document.getElementById('color-value-6-10');
  886. var background = 'background:';
  887. var candidateC = document.getElementById('legend-CandidateC');
  888. var candidateD = document.getElementById('legend-CandidateD');
  889. var candidateE = document.getElementById('legend-CandidateE');
  890. var candidateF = document.getElementById('legend-CandidateF');
  891. var cpct = document.getElementById('legend-C-pct');
  892. var dpct = document.getElementById('legend-D-pct');
  893. var epct = document.getElementById('legend-E-pct');
  894. var fpct = document.getElementById('legend-F-pct');
  895. var legendtitle = document.getElementById('legend-title');
  896. //define colors
  897. var red0 = '#909090';
  898. var red10 = '#ffbfbf';
  899. var red20 =' #ffacac';
  900. var red30 = '#ff9898';
  901. var red40 = '#ff8585';
  902. var red50 = '#ff7171';
  903. var red60 = '#ff5d5d';
  904. var red70 = '#ff4a4a';
  905. var red80 = '#ff3636';
  906. var red90 = '#ff2323';
  907. var red100 = '#ff0f0f';
  908. var red100a = '#ff0000';
  909. var blue0 = '#909090';
  910. var blue10 = '#bbbbfe';
  911. var blue20 = '#a8a8f5';
  912. var blue30 = '#9595ed';
  913. var blue40 = '#8282e5';
  914. var blue50 = '#6f6fdc';
  915. var blue60 = '#5c5cd4';
  916. var blue70 = '#4848cb';
  917. var blue80 = '#3535c3';
  918. var blue90 = '#2222bb';
  919. var blue100 = '#0f0fb2';
  920. var blue100a = '#0909aa'
  921. var green0 = '#909090';
  922. var green10 = '#abe6ab';
  923. var green20 = '#9ae099';
  924. var green30 = '#88d988';
  925. var green40 = '#77d376';
  926. var green50 = '#65cc64';
  927. var green60 = '#54c653';
  928. var green70 = '#42c041';
  929. var green80 = '#31b92f';
  930. var green90 = '#1fb31e';
  931. var green100 = '#0ead0c';
  932. var green100a = '#00a500';
  933. var yellow0 = '#909090';
  934. var yellow10 = '#fcfcb9';
  935. var yellow20 = '#f0f0a6';
  936. var yellow30 = '#e4e492';
  937. var yellow40 = '#d8d87e';
  938. var yellow50 = '#cccc6b';
  939. var yellow60 = '#c0c057';
  940. var yellow70 = '#b4b443';
  941. var yellow80 = '#a8a830';
  942. var yellow90 = '#9c9c1c';
  943. var yellow100 = '#909008';
  944. var yellow100a = '#7a7a00';
  945. var orange0 = '#909090';
  946. var orange10 = '#ffdbb7';
  947. var orange20 = '#ffd1a4';
  948. var orange30 = '#ffc790';
  949. var orange40 = '#ffbc7d';
  950. var orange50 = '#ffb269';
  951. var orange60 = '#ffa855';
  952. var orange70 = '#ff9e42';
  953. var orange80 = '#ff932e';
  954. var orange90 = '#ff891b';
  955. var orange100 = '#ff7f07';
  956. var orange100a = '#ff6e02';
  957. var purple0 = '#909090';
  958. var purple10 = '#e2a4e2';
  959. var purple20 = '#da92da';
  960. var purple30 = '#d280d2';
  961. var purple40 = '#ca6fca';
  962. var purple50 = '#c25dc2';
  963. var purple60 = '#b94bb9';
  964. var purple70 = '#b13ab1';
  965. var purple80 = '#a928a9';
  966. var purple90 = '#a116a1';
  967. var purple100 = '#990599';
  968. var purple100a = '#860081';
  969. var tie = '#c0c0c0';
  970. var novotes = '#707070';
  971. var white = '#ffffff';
  972. //define color schemes
  973. var Multi = ["interpolate",
  974. ["exponential", 0.1],
  975. ["number",
  976. ["get", Wincode]
  977. ],
  978. 0, red0,
  979. 0.0000001, red10,
  980. 0.1*colorscale, red20,
  981. 0.2*colorscale, red30,
  982. 0.3*colorscale, red40,
  983. 0.4*colorscale, red50,
  984. 0.5*colorscale, red60,
  985. 0.6*colorscale, red70,
  986. 0.7*colorscale, red80,
  987. 0.8*colorscale, red90,
  988. 0.9*colorscale, red100,
  989. 1, red100a,
  990. 1.00000001, green10,
  991. 1+(.1*colorscale), green20,
  992. 1+(.2*colorscale), green30,
  993. 1+(.3*colorscale), green40,
  994. 1+(.4*colorscale), green50,
  995. 1+(.5*colorscale), green60,
  996. 1+(.6*colorscale), green70,
  997. 1+(.7*colorscale), green80,
  998. 1+(.8*colorscale), green90,
  999. 1+(.9*colorscale), green100,
  1000. 2, green100a,
  1001. 2.00000001, blue10,
  1002. 2+(.1*colorscale), blue20,
  1003. 2+(.2*colorscale), blue30,
  1004. 2+(.3*colorscale), blue40,
  1005. 2+(.4*colorscale), blue50,
  1006. 2+(.5*colorscale), blue60,
  1007. 2+(.6*colorscale), blue70,
  1008. 2+(.7*colorscale), blue80,
  1009. 2+(.8*colorscale), blue90,
  1010. 2+(.9*colorscale), blue100,
  1011. 3, blue100a,
  1012. 3.00000001, yellow10,
  1013. 3+(.1*colorscale), yellow20,
  1014. 3+(.2*colorscale), yellow30,
  1015. 3+(.3*colorscale), yellow40,
  1016. 3+(.4*colorscale), yellow50,
  1017. 3+(.5*colorscale), yellow60,
  1018. 3+(.6*colorscale), yellow70,
  1019. 3+(.7*colorscale), yellow80,
  1020. 3+(.8*colorscale), yellow90,
  1021. 3+(.9*colorscale), yellow100,
  1022. 4, yellow100a,
  1023. 4.00000001, orange10,
  1024. 4+(.1*colorscale), orange20,
  1025. 4+(.2*colorscale), orange30,
  1026. 4+(.3*colorscale), orange40,
  1027. 4+(.4*colorscale), orange50,
  1028. 4+(.5*colorscale), orange60,
  1029. 4+(.6*colorscale), orange70,
  1030. 4+(.7*colorscale), orange80,
  1031. 4+(.8*colorscale), orange90,
  1032. 4+(.9*colorscale), orange100,
  1033. 5, orange100a,
  1034. 5.00000001, purple10,
  1035. 5+(.1*colorscale), purple20,
  1036. 5+(.2*colorscale), purple30,
  1037. 5+(.3*colorscale), purple40,
  1038. 5+(.4*colorscale), purple50,
  1039. 5+(.5*colorscale), purple60,
  1040. 5+(.6*colorscale), purple70,
  1041. 5+(.7*colorscale), purple80,
  1042. 5+(.8*colorscale), purple90,
  1043. 5+(.9*colorscale), purple100,
  1044. 6, purple100a,
  1045. 9, tie,
  1046. 10, novotes,
  1047. ];
  1048. var ColorRed =
  1049. ["interpolate",
  1050. ["exponential", 0.1],
  1051. ["number",
  1052. ["get", Red]
  1053. ],
  1054. 0, red0,
  1055. 0.0001, red10,
  1056. 0.1*colorscale, red20,
  1057. 0.2*colorscale, red30,
  1058. 0.3*colorscale, red40,
  1059. 0.4*colorscale, red50,
  1060. 0.5*colorscale, red60,
  1061. 0.6*colorscale, red70,
  1062. 0.7*colorscale, red80,
  1063. 0.8*colorscale, red90,
  1064. 0.9*colorscale, red100,
  1065. 1*colorscale, red100a
  1066. ]
  1067. var ColorBlue = ["interpolate",
  1068. ["exponential", 0.1],
  1069. ["number",
  1070. ["get", Blue]
  1071. ],
  1072. 0, blue0,
  1073. 0.001, blue10,
  1074. 0.1*colorscale,blue20,
  1075. 0.2*colorscale, blue30,
  1076. 0.3*colorscale, blue40,
  1077. 0.4*colorscale, blue50,
  1078. 0.5*colorscale, blue60,
  1079. 0.6*colorscale, blue70,
  1080. 0.7*colorscale, blue80,
  1081. 0.8*colorscale, blue90,
  1082. 0.9*colorscale, blue100,
  1083. 1*colorscale, blue100a
  1084. ]
  1085. var ColorGreen = ["interpolate",
  1086. ["exponential", 0.1],
  1087. ["number",
  1088. ["get", Green]
  1089. ],
  1090. 0, green0,
  1091. 0.001, green10,
  1092. 0.1*colorscale, green20,
  1093. 0.2*colorscale, green30,
  1094. 0.3*colorscale, green40,
  1095. 0.4*colorscale, green50,
  1096. 0.5*colorscale, green60,
  1097. 0.6*colorscale, green70,
  1098. 0.7*colorscale, green80,
  1099. 0.8*colorscale, green90,
  1100. 0.9*colorscale, green100,
  1101. 1*colorscale, green100a
  1102. ]
  1103. var ColorYellow = ["interpolate",
  1104. ["exponential", 0.1],
  1105. ["number",
  1106. ["get", Yellow]
  1107. ],
  1108. 0, yellow0,
  1109. 0.001, yellow10,
  1110. 0.1*colorscale, yellow20,
  1111. 0.2*colorscale, yellow30,
  1112. 0.3*colorscale, yellow40,
  1113. 0.4*colorscale, yellow50,
  1114. 0.5*colorscale, yellow60,
  1115. 0.6*colorscale, yellow70,
  1116. 0.7*colorscale, yellow80,
  1117. 0.8*colorscale, yellow90,
  1118. 0.9*colorscale, yellow100,
  1119. 1.0*colorscale, yellow100a,
  1120. ]
  1121. var ColorOrange = ["interpolate",
  1122. ["exponential", 0.1],
  1123. ["number",
  1124. ["get", Orange]
  1125. ],
  1126. 0, orange0,
  1127. 0.001, orange10,
  1128. 0.1*colorscale, orange20,
  1129. 0.2*colorscale, orange30,
  1130. 0.3*colorscale, orange40,
  1131. 0.4*colorscale, orange50,
  1132. 0.5*colorscale, orange60,
  1133. 0.6*colorscale, orange70,
  1134. 0.7*colorscale, orange80,
  1135. 0.8*colorscale, orange90,
  1136. 0.9*colorscale, orange100,
  1137. 1.0*colorscale, orange100a,
  1138. ]
  1139. var ColorPurple = ["interpolate",
  1140. ["exponential", 0.1],
  1141. ["number",
  1142. ["get", Purple]
  1143. ],
  1144. 0,purple0,
  1145. 0.001,purple10,
  1146. 0.1*colorscale, purple20,
  1147. 0.2*colorscale, purple30,
  1148. 0.3*colorscale, purple40,
  1149. 0.4*colorscale, purple50,
  1150. 0.5*colorscale, purple60,
  1151. 0.6*colorscale, purple70,
  1152. 0.7*colorscale, purple80,
  1153. 0.8*colorscale, purple90,
  1154. 0.9*colorscale, purple100,
  1155. 1.0*colorscale, purple100a
  1156.  
  1157. ]
  1158. var Multi2 = ["interpolate",
  1159. ["exponential", 0.1],
  1160. ["number",
  1161. ["get", Wincode2]
  1162. ],
  1163. 0, red0,
  1164. 0.0000001, red10,
  1165. 0.1*colorscale, red20,
  1166. 0.2*colorscale, red30,
  1167. 0.3*colorscale, red40,
  1168. 0.4*colorscale, red50,
  1169. 0.5*colorscale, red60,
  1170. 0.6*colorscale, red70,
  1171. 0.7*colorscale, red80,
  1172. 0.8*colorscale, red90,
  1173. 0.9*colorscale, red100,
  1174. 1, red100a,
  1175. 1.00000001, green10,
  1176. 1+(.1*colorscale), green20,
  1177. 1+(.2*colorscale), green30,
  1178. 1+(.3*colorscale), green40,
  1179. 1+(.4*colorscale), green50,
  1180. 1+(.5*colorscale), green60,
  1181. 1+(.6*colorscale), green70,
  1182. 1+(.7*colorscale), green80,
  1183. 1+(.8*colorscale), green90,
  1184. 1+(.9*colorscale), green100,
  1185. 2, green100a,
  1186. 2.00000001, blue10,
  1187. 2+(.1*colorscale), blue20,
  1188. 2+(.2*colorscale), blue30,
  1189. 2+(.3*colorscale), blue40,
  1190. 2+(.4*colorscale), blue50,
  1191. 2+(.5*colorscale), blue60,
  1192. 2+(.6*colorscale), blue70,
  1193. 2+(.7*colorscale), blue80,
  1194. 2+(.8*colorscale), blue90,
  1195. 2+(.9*colorscale), blue100,
  1196. 3, blue100a,
  1197. 3.00000001, yellow10,
  1198. 3+(.1*colorscale), yellow20,
  1199. 3+(.2*colorscale), yellow30,
  1200. 3+(.3*colorscale), yellow40,
  1201. 3+(.4*colorscale), yellow50,
  1202. 3+(.5*colorscale), yellow60,
  1203. 3+(.6*colorscale), yellow70,
  1204. 3+(.7*colorscale), yellow80,
  1205. 3+(.8*colorscale), yellow90,
  1206. 3+(.9*colorscale), yellow100,
  1207. 4, yellow100a,
  1208. 4.00000001, orange10,
  1209. 4+(.1*colorscale), orange20,
  1210. 4+(.2*colorscale), orange30,
  1211. 4+(.3*colorscale), orange40,
  1212. 4+(.4*colorscale), orange50,
  1213. 4+(.5*colorscale), orange60,
  1214. 4+(.6*colorscale), orange70,
  1215. 4+(.7*colorscale), orange80,
  1216. 4+(.8*colorscale), orange90,
  1217. 4+(.9*colorscale), orange100,
  1218. 5, orange100a,
  1219. 5.00000001, purple10,
  1220. 5+(.1*colorscale), purple20,
  1221. 5+(.2*colorscale), purple30,
  1222. 5+(.3*colorscale), purple40,
  1223. 5+(.4*colorscale), purple50,
  1224. 5+(.5*colorscale), purple60,
  1225. 5+(.6*colorscale), purple70,
  1226. 5+(.7*colorscale), purple80,
  1227. 5+(.8*colorscale), purple90,
  1228. 5+(.9*colorscale), purple100,
  1229. 6, purple100a,
  1230. 9, tie,
  1231. 10, novotes,
  1232. ];
  1233. var ColorRed2 =
  1234. ["interpolate",
  1235. ["exponential", 0.1],
  1236. ["number",
  1237. ["get", Red2]
  1238. ],
  1239. 0, red0,
  1240. 0.0001, red10,
  1241. 0.1*colorscale, red20,
  1242. 0.2*colorscale, red30,
  1243. 0.3*colorscale, red40,
  1244. 0.4*colorscale, red50,
  1245. 0.5*colorscale, red60,
  1246. 0.6*colorscale, red70,
  1247. 0.7*colorscale, red80,
  1248. 0.8*colorscale, red90,
  1249. 0.9*colorscale, red100,
  1250. 1*colorscale, red100a
  1251. ]
  1252. var ColorBlue2 = ["interpolate",
  1253. ["exponential", 0.1],
  1254. ["number",
  1255. ["get", Blue2]
  1256. ],
  1257. 0, blue0,
  1258. 0.001, blue10,
  1259. 0.1*colorscale,blue20,
  1260. 0.2*colorscale, blue30,
  1261. 0.3*colorscale, blue40,
  1262. 0.4*colorscale, blue50,
  1263. 0.5*colorscale, blue60,
  1264. 0.6*colorscale, blue70,
  1265. 0.7*colorscale, blue80,
  1266. 0.8*colorscale, blue90,
  1267. 0.9*colorscale, blue100,
  1268. 1*colorscale, blue100a
  1269. ]
  1270. var ColorGreen2 = ["interpolate",
  1271. ["exponential", 0.1],
  1272. ["number",
  1273. ["get", Green2]
  1274. ],
  1275. 0, green0,
  1276. 0.001, green10,
  1277. 0.1*colorscale, green20,
  1278. 0.2*colorscale, green30,
  1279. 0.3*colorscale, green40,
  1280. 0.4*colorscale, green50,
  1281. 0.5*colorscale, green60,
  1282. 0.6*colorscale, green70,
  1283. 0.7*colorscale, green80,
  1284. 0.8*colorscale, green90,
  1285. 0.9*colorscale, green100,
  1286. 1*colorscale, green100a
  1287. ]
  1288. var ColorYellow2 = ["interpolate",
  1289. ["exponential", 0.1],
  1290. ["number",
  1291. ["get", Yellow2]
  1292. ],
  1293. 0, yellow0,
  1294. 0.001, yellow10,
  1295. 0.1*colorscale, yellow20,
  1296. 0.2*colorscale, yellow30,
  1297. 0.3*colorscale, yellow40,
  1298. 0.4*colorscale, yellow50,
  1299. 0.5*colorscale, yellow60,
  1300. 0.6*colorscale, yellow70,
  1301. 0.7*colorscale, yellow80,
  1302. 0.8*colorscale, yellow90,
  1303. 0.9*colorscale, yellow100,
  1304. 1.0*colorscale, yellow100a,
  1305. ]
  1306. var ColorOrange2 = ["interpolate",
  1307. ["exponential", 0.1],
  1308. ["number",
  1309. ["get", Orange2]
  1310. ],
  1311. 0, orange0,
  1312. 0.001, orange10,
  1313. 0.1*colorscale, orange20,
  1314. 0.2*colorscale, orange30,
  1315. 0.3*colorscale, orange40,
  1316. 0.4*colorscale, orange50,
  1317. 0.5*colorscale, orange60,
  1318. 0.6*colorscale, orange70,
  1319. 0.7*colorscale, orange80,
  1320. 0.8*colorscale, orange90,
  1321. 0.9*colorscale, orange100,
  1322. 1.0*colorscale, orange100a,
  1323. ]
  1324. var ColorPurple2 = ["interpolate",
  1325. ["exponential", 0.1],
  1326. ["number",
  1327. ["get", Purple2]
  1328. ],
  1329. 0,purple0,
  1330. 0.001,purple10,
  1331. 0.1*colorscale, purple20,
  1332. 0.2*colorscale, purple30,
  1333. 0.3*colorscale, purple40,
  1334. 0.4*colorscale, purple50,
  1335. 0.5*colorscale, purple60,
  1336. 0.6*colorscale, purple70,
  1337. 0.7*colorscale, purple80,
  1338. 0.8*colorscale, purple90,
  1339. 0.9*colorscale, purple100,
  1340. 1.0*colorscale, purple100a
  1341. ]
  1342. var Multi3 = ["interpolate",
  1343. ["exponential", 0.1],
  1344. ["number",
  1345. ["get", Wincode3]
  1346. ],
  1347. 0, red0,
  1348. 0.0000001, red10,
  1349. 0.1*colorscale, red20,
  1350. 0.2*colorscale, red30,
  1351. 0.3*colorscale, red40,
  1352. 0.4*colorscale, red50,
  1353. 0.5*colorscale, red60,
  1354. 0.6*colorscale, red70,
  1355. 0.7*colorscale, red80,
  1356. 0.8*colorscale, red90,
  1357. 0.9*colorscale, red100,
  1358. 1, red100a,
  1359. 1.00000001, green10,
  1360. 1+(.1*colorscale), green20,
  1361. 1+(.2*colorscale), green30,
  1362. 1+(.3*colorscale), green40,
  1363. 1+(.4*colorscale), green50,
  1364. 1+(.5*colorscale), green60,
  1365. 1+(.6*colorscale), green70,
  1366. 1+(.7*colorscale), green80,
  1367. 1+(.8*colorscale), green90,
  1368. 1+(.9*colorscale), green100,
  1369. 2, green100a,
  1370. 2.00000001, blue10,
  1371. 2+(.1*colorscale), blue20,
  1372. 2+(.2*colorscale), blue30,
  1373. 2+(.3*colorscale), blue40,
  1374. 2+(.4*colorscale), blue50,
  1375. 2+(.5*colorscale), blue60,
  1376. 2+(.6*colorscale), blue70,
  1377. 2+(.7*colorscale), blue80,
  1378. 2+(.8*colorscale), blue90,
  1379. 2+(.9*colorscale), blue100,
  1380. 3, blue100a,
  1381. 3.00000001, yellow10,
  1382. 3+(.1*colorscale), yellow20,
  1383. 3+(.2*colorscale), yellow30,
  1384. 3+(.3*colorscale), yellow40,
  1385. 3+(.4*colorscale), yellow50,
  1386. 3+(.5*colorscale), yellow60,
  1387. 3+(.6*colorscale), yellow70,
  1388. 3+(.7*colorscale), yellow80,
  1389. 3+(.8*colorscale), yellow90,
  1390. 3+(.9*colorscale), yellow100,
  1391. 4, yellow100a,
  1392. 4.00000001, orange10,
  1393. 4+(.1*colorscale), orange20,
  1394. 4+(.2*colorscale), orange30,
  1395. 4+(.3*colorscale), orange40,
  1396. 4+(.4*colorscale), orange50,
  1397. 4+(.5*colorscale), orange60,
  1398. 4+(.6*colorscale), orange70,
  1399. 4+(.7*colorscale), orange80,
  1400. 4+(.8*colorscale), orange90,
  1401. 4+(.9*colorscale), orange100,
  1402. 5, orange100a,
  1403. 5.00000001, purple10,
  1404. 5+(.1*colorscale), purple20,
  1405. 5+(.2*colorscale), purple30,
  1406. 5+(.3*colorscale), purple40,
  1407. 5+(.4*colorscale), purple50,
  1408. 5+(.5*colorscale), purple60,
  1409. 5+(.6*colorscale), purple70,
  1410. 5+(.7*colorscale), purple80,
  1411. 5+(.8*colorscale), purple90,
  1412. 5+(.9*colorscale), purple100,
  1413. 6, purple100a,
  1414. 9, tie,
  1415. 10, novotes,
  1416. ];
  1417. var ColorRed3 =
  1418. ["interpolate",
  1419. ["exponential", 0.1],
  1420. ["number",
  1421. ["get", Red3]
  1422. ],
  1423. 0, red0,
  1424. 0.0001, red10,
  1425. 0.1*colorscale, red20,
  1426. 0.2*colorscale, red30,
  1427. 0.3*colorscale, red40,
  1428. 0.4*colorscale, red50,
  1429. 0.5*colorscale, red60,
  1430. 0.6*colorscale, red70,
  1431. 0.7*colorscale, red80,
  1432. 0.8*colorscale, red90,
  1433. 0.9*colorscale, red100,
  1434. 1*colorscale, red100a
  1435. ]
  1436. var ColorBlue3 = ["interpolate",
  1437. ["exponential", 0.1],
  1438. ["number",
  1439. ["get", Blue3]
  1440. ],
  1441. 0, blue0,
  1442. 0.001, blue10,
  1443. 0.1*colorscale,blue20,
  1444. 0.2*colorscale, blue30,
  1445. 0.3*colorscale, blue40,
  1446. 0.4*colorscale, blue50,
  1447. 0.5*colorscale, blue60,
  1448. 0.6*colorscale, blue70,
  1449. 0.7*colorscale, blue80,
  1450. 0.8*colorscale, blue90,
  1451. 0.9*colorscale, blue100,
  1452. 1*colorscale, blue100a
  1453. ]
  1454. var ColorGreen3 = ["interpolate",
  1455. ["exponential", 0.1],
  1456. ["number",
  1457. ["get", Green3]
  1458. ],
  1459. 0, green0,
  1460. 0.001, green10,
  1461. 0.1*colorscale, green20,
  1462. 0.2*colorscale, green30,
  1463. 0.3*colorscale, green40,
  1464. 0.4*colorscale, green50,
  1465. 0.5*colorscale, green60,
  1466. 0.6*colorscale, green70,
  1467. 0.7*colorscale, green80,
  1468. 0.8*colorscale, green90,
  1469. 0.9*colorscale, green100,
  1470. 1*colorscale, green100a
  1471. ]
  1472. var ColorYellow3 = ["interpolate",
  1473. ["exponential", 0.1],
  1474. ["number",
  1475. ["get", Yellow3]
  1476. ],
  1477. 0, yellow0,
  1478. 0.001, yellow10,
  1479. 0.1*colorscale, yellow20,
  1480. 0.2*colorscale, yellow30,
  1481. 0.3*colorscale, yellow40,
  1482. 0.4*colorscale, yellow50,
  1483. 0.5*colorscale, yellow60,
  1484. 0.6*colorscale, yellow70,
  1485. 0.7*colorscale, yellow80,
  1486. 0.8*colorscale, yellow90,
  1487. 0.9*colorscale, yellow100,
  1488. 1.0*colorscale, yellow100a,
  1489. ]
  1490. var ColorOrange3 = ["interpolate",
  1491. ["exponential", 0.1],
  1492. ["number",
  1493. ["get", Orange3]
  1494. ],
  1495. 0, orange0,
  1496. 0.001, orange10,
  1497. 0.1*colorscale, orange20,
  1498. 0.2*colorscale, orange30,
  1499. 0.3*colorscale, orange40,
  1500. 0.4*colorscale, orange50,
  1501. 0.5*colorscale, orange60,
  1502. 0.6*colorscale, orange70,
  1503. 0.7*colorscale, orange80,
  1504. 0.8*colorscale, orange90,
  1505. 0.9*colorscale, orange100,
  1506. 1.0*colorscale, orange100a,
  1507. ]
  1508. var ColorPurple3 = ["interpolate",
  1509. ["exponential", 0.1],
  1510. ["number",
  1511. ["get", Purple3]
  1512. ],
  1513. 0,purple0,
  1514. 0.001,purple10,
  1515. 0.1*colorscale, purple20,
  1516. 0.2*colorscale, purple30,
  1517. 0.3*colorscale, purple40,
  1518. 0.4*colorscale, purple50,
  1519. 0.5*colorscale, purple60,
  1520. 0.6*colorscale, purple70,
  1521. 0.7*colorscale, purple80,
  1522. 0.8*colorscale, purple90,
  1523. 0.9*colorscale, purple100,
  1524. 1.0*colorscale, purple100a
  1525. ]
  1526. var Multi4 = ["interpolate",
  1527. ["exponential", 0.1],
  1528. ["number",
  1529. ["get", Wincode4]
  1530. ],
  1531. 0, red0,
  1532. 0.0000001, red10,
  1533. 0.1*colorscale, red20,
  1534. 0.2*colorscale, red30,
  1535. 0.3*colorscale, red40,
  1536. 0.4*colorscale, red50,
  1537. 0.5*colorscale, red60,
  1538. 0.6*colorscale, red70,
  1539. 0.7*colorscale, red80,
  1540. 0.8*colorscale, red90,
  1541. 0.9*colorscale, red100,
  1542. 1, red100a,
  1543. 1.00000001, green10,
  1544. 1+(.1*colorscale), green20,
  1545. 1+(.2*colorscale), green30,
  1546. 1+(.3*colorscale), green40,
  1547. 1+(.4*colorscale), green50,
  1548. 1+(.5*colorscale), green60,
  1549. 1+(.6*colorscale), green70,
  1550. 1+(.7*colorscale), green80,
  1551. 1+(.8*colorscale), green90,
  1552. 1+(.9*colorscale), green100,
  1553. 2, green100a,
  1554. 2.00000001, blue10,
  1555. 2+(.1*colorscale), blue20,
  1556. 2+(.2*colorscale), blue30,
  1557. 2+(.3*colorscale), blue40,
  1558. 2+(.4*colorscale), blue50,
  1559. 2+(.5*colorscale), blue60,
  1560. 2+(.6*colorscale), blue70,
  1561. 2+(.7*colorscale), blue80,
  1562. 2+(.8*colorscale), blue90,
  1563. 2+(.9*colorscale), blue100,
  1564. 3, blue100a,
  1565. 3.00000001, yellow10,
  1566. 3+(.1*colorscale), yellow20,
  1567. 3+(.2*colorscale), yellow30,
  1568. 3+(.3*colorscale), yellow40,
  1569. 3+(.4*colorscale), yellow50,
  1570. 3+(.5*colorscale), yellow60,
  1571. 3+(.6*colorscale), yellow70,
  1572. 3+(.7*colorscale), yellow80,
  1573. 3+(.8*colorscale), yellow90,
  1574. 3+(.9*colorscale), yellow100,
  1575. 4, yellow100a,
  1576. 4.00000001, orange10,
  1577. 4+(.1*colorscale), orange20,
  1578. 4+(.2*colorscale), orange30,
  1579. 4+(.3*colorscale), orange40,
  1580. 4+(.4*colorscale), orange50,
  1581. 4+(.5*colorscale), orange60,
  1582. 4+(.6*colorscale), orange70,
  1583. 4+(.7*colorscale), orange80,
  1584. 4+(.8*colorscale), orange90,
  1585. 4+(.9*colorscale), orange100,
  1586. 5, orange100a,
  1587. 5.00000001, purple10,
  1588. 5+(.1*colorscale), purple20,
  1589. 5+(.2*colorscale), purple30,
  1590. 5+(.3*colorscale), purple40,
  1591. 5+(.4*colorscale), purple50,
  1592. 5+(.5*colorscale), purple60,
  1593. 5+(.6*colorscale), purple70,
  1594. 5+(.7*colorscale), purple80,
  1595. 5+(.8*colorscale), purple90,
  1596. 5+(.9*colorscale), purple100,
  1597. 6, purple100a,
  1598. 9, tie,
  1599. 10, novotes,
  1600. ];
  1601. var ColorRed4 =
  1602. ["interpolate",
  1603. ["exponential", 0.1],
  1604. ["number",
  1605. ["get", Red4]
  1606. ],
  1607. 0, red0,
  1608. 0.0001, red10,
  1609. 0.1*colorscale, red20,
  1610. 0.2*colorscale, red30,
  1611. 0.3*colorscale, red40,
  1612. 0.4*colorscale, red50,
  1613. 0.5*colorscale, red60,
  1614. 0.6*colorscale, red70,
  1615. 0.7*colorscale, red80,
  1616. 0.8*colorscale, red90,
  1617. 0.9*colorscale, red100,
  1618. 1*colorscale, red100a
  1619. ]
  1620. var ColorBlue4 = ["interpolate",
  1621. ["exponential", 0.1],
  1622. ["number",
  1623. ["get", Blue4]
  1624. ],
  1625. 0, blue0,
  1626. 0.001, blue10,
  1627. 0.1*colorscale,blue20,
  1628. 0.2*colorscale, blue30,
  1629. 0.3*colorscale, blue40,
  1630. 0.4*colorscale, blue50,
  1631. 0.5*colorscale, blue60,
  1632. 0.6*colorscale, blue70,
  1633. 0.7*colorscale, blue80,
  1634. 0.8*colorscale, blue90,
  1635. 0.9*colorscale, blue100,
  1636. 1*colorscale, blue100a
  1637. ]
  1638. var ColorGreen4 = ["interpolate",
  1639. ["exponential", 0.1],
  1640. ["number",
  1641. ["get", Green4]
  1642. ],
  1643. 0, green0,
  1644. 0.001, green10,
  1645. 0.1*colorscale, green20,
  1646. 0.2*colorscale, green30,
  1647. 0.3*colorscale, green40,
  1648. 0.4*colorscale, green50,
  1649. 0.5*colorscale, green60,
  1650. 0.6*colorscale, green70,
  1651. 0.7*colorscale, green80,
  1652. 0.8*colorscale, green90,
  1653. 0.9*colorscale, green100,
  1654. 1*colorscale, green100a
  1655. ]
  1656. var ColorYellow4 = ["interpolate",
  1657. ["exponential", 0.1],
  1658. ["number",
  1659. ["get", Yellow4]
  1660. ],
  1661. 0, yellow0,
  1662. 0.001, yellow10,
  1663. 0.1*colorscale, yellow20,
  1664. 0.2*colorscale, yellow30,
  1665. 0.3*colorscale, yellow40,
  1666. 0.4*colorscale, yellow50,
  1667. 0.5*colorscale, yellow60,
  1668. 0.6*colorscale, yellow70,
  1669. 0.7*colorscale, yellow80,
  1670. 0.8*colorscale, yellow90,
  1671. 0.9*colorscale, yellow100,
  1672. 1.0*colorscale, yellow100a,
  1673. ]
  1674. var ColorOrange4 = ["interpolate",
  1675. ["exponential", 0.1],
  1676. ["number",
  1677. ["get", Orange4]
  1678. ],
  1679. 0, orange0,
  1680. 0.001, orange10,
  1681. 0.1*colorscale, orange20,
  1682. 0.2*colorscale, orange30,
  1683. 0.3*colorscale, orange40,
  1684. 0.4*colorscale, orange50,
  1685. 0.5*colorscale, orange60,
  1686. 0.6*colorscale, orange70,
  1687. 0.7*colorscale, orange80,
  1688. 0.8*colorscale, orange90,
  1689. 0.9*colorscale, orange100,
  1690. 1.0*colorscale, orange100a,
  1691. ]
  1692. var ColorPurple4 = ["interpolate",
  1693. ["exponential", 0.1],
  1694. ["number",
  1695. ["get", Purple4]
  1696. ],
  1697. 0,purple0,
  1698. 0.001,purple10,
  1699. 0.1*colorscale, purple20,
  1700. 0.2*colorscale, purple30,
  1701. 0.3*colorscale, purple40,
  1702. 0.4*colorscale, purple50,
  1703. 0.5*colorscale, purple60,
  1704. 0.6*colorscale, purple70,
  1705. 0.7*colorscale, purple80,
  1706. 0.8*colorscale, purple90,
  1707. 0.9*colorscale, purple100,
  1708. 1.0*colorscale, purple100a
  1709. ]
  1710. //choose default color scheme
  1711. var color = Multi
  1712. var color2 = Multi2;
  1713. var color3 = Multi3;
  1714. var color4 = Multi4;
  1715. legendtitle.innerHTML = '<h2>Idaho 2018 Gov GE Results by Precinct/County</h2><h3>Hover over a Precinct!</h3>'
  1716. //load map
  1717. map.on('load',
  1718. function () {map.addLayer({
  1719. id: layer1,
  1720. type: 'fill',
  1721. source: {
  1722. type: 'vector',
  1723. // Mapbox tileset Map ID - must edit
  1724. url: 'mapbox://cinyc.6nkivfkc'
  1725. },
  1726. 'source-layer': layer1,
  1727. paint: {
  1728. 'fill-color': Multi4,
  1729. 'fill-opacity': 0.75,
  1730. 'fill-outline-color': '#f0f0f0'},
  1731. layout: {'visibility': 'visible'}
  1732. })
  1733. map.addLayer({
  1734. id: layer2,
  1735. type: 'fill',
  1736. source: {
  1737. type: 'vector',
  1738. // Mapbox tileset Map ID - must edit
  1739. url: 'mapbox://cinyc.c3ok1cpz'
  1740. },
  1741. 'source-layer': layer2,
  1742. paint: {
  1743. 'fill-color': Multi2,
  1744. 'fill-opacity': 0.75,
  1745. 'fill-outline-color': '#f0f0f0'},
  1746. layout: {'visibility': 'none'}
  1747. })
  1748. var clickedLayer = layerCounty
  1749. var clickedLayer2014 = 'Gov'
  1750. var clickedLayer2018 = 'Gov'
  1751. var clickedLayer1 = 'W'
  1752. var clickedLayer2 = 'W'
  1753. var clickedLayer3 = 'W'
  1754. var clickedLayer4 = 'W'
  1755. var x1status = 0
  1756. var x2status = 0
  1757. var x3status = 0
  1758. var x4status = 0
  1759. var x2014status = 0
  1760. var x2018status = 0
  1761. var x1 = document.getElementById("menu1")
  1762. var x2 = document.getElementById("menu2")
  1763. var x3 = document.getElementById("menu3")
  1764. var x4 = document.getElementById("menu4")
  1765. var x2014 = document.getElementById("menu2014")
  1766. var x2018 = document.getElementById("menu2018")
  1767. //default map - must edit
  1768. {var color4 = Multi4;
  1769. // reset color slider & text
  1770. cssliderValue.textContent = '10 points';
  1771. csslider.value = '100'
  1772. colorpct510.textContent = '10'
  1773. colorpct520.textContent = '20'
  1774. colorpct530.textContent = '30'
  1775. colorpct540.textContent = '40'
  1776. colorpct550.textContent = '50'
  1777. colorpct560.textContent = '60'
  1778. colorpct570.textContent = '70'
  1779. colorpct580.textContent = '80'
  1780. colorpct590.textContent = '90'
  1781. colorpct600.textContent = '99'
  1782. colorpct600a.textContent = '100'
  1783. //set labels - must edit - copy and paste from default
  1784. candidateC.textContent = RedCandidate4
  1785. colorvalue200b.style = background + red0
  1786. colorvalue210.style = background + red10
  1787. colorvalue220.style = background + red20
  1788. colorvalue230.style = background + red30
  1789. colorvalue240.style = background + red40
  1790. colorvalue250.style = background + red50
  1791. colorvalue260.style = background + red60
  1792. colorvalue270.style = background + red70
  1793. colorvalue280.style = background + red80
  1794. colorvalue290.style = background + red90
  1795. colorvalue300.style = background + red100
  1796. colorvalue300a.style = background + red100a
  1797. candidateD.textContent = BlueCandidate4
  1798. colorvalue300b.style = background + blue0
  1799. colorvalue310.style = background + blue10
  1800. colorvalue320.style = background + blue20
  1801. colorvalue330.style = background + blue30
  1802. colorvalue340.style = background + blue40
  1803. colorvalue350.style = background + blue50
  1804. colorvalue360.style = background + blue60
  1805. colorvalue370.style = background + blue70
  1806. colorvalue380.style = background + blue80
  1807. colorvalue390.style = background + blue90
  1808. colorvalue400.style = background + blue100
  1809. colorvalue400a.style = background + blue100a
  1810. candidateE.textContent = YellowCandidate4
  1811. colorvalue400b.style = background + yellow0
  1812. colorvalue410.style = background + yellow10
  1813. colorvalue420.style = background + yellow20
  1814. colorvalue430.style = background + yellow30
  1815. colorvalue440.style = background + yellow40
  1816. colorvalue450.style = background + yellow50
  1817. colorvalue460.style = background + yellow60
  1818. colorvalue470.style = background + yellow70
  1819. colorvalue480.style = background + yellow80
  1820. colorvalue490.style = background + yellow90
  1821. colorvalue500.style = background + yellow100
  1822. colorvalue500a.style = background + yellow100a
  1823. candidateF.textContent = OrangeCandidate4
  1824. colorvalue500b.style = background + orange0
  1825. colorvalue510.style = background + orange10
  1826. colorvalue520.style = background + orange20
  1827. colorvalue530.style = background + orange30
  1828. colorvalue540.style = background + orange40
  1829. colorvalue550.style = background + orange50
  1830. colorvalue560.style = background + orange60
  1831. colorvalue570.style = background + orange70
  1832. colorvalue580.style = background + orange80
  1833. colorvalue590.style = background + orange90
  1834. colorvalue600.style = background + orange100
  1835. colorvalue600a.style = background + orange100a
  1836. map.setPaintProperty(layer1, 'fill-color', color4)
  1837. csslider.addEventListener('input', function(y) {
  1838. // Adjust the colorscale. layer here is arbitrary - this could
  1839. // be another layer name found in your style or a custom layer
  1840. // added on the fly using `addSource`.
  1841. var colorscale = (y.target.value) / 100;
  1842.  
  1843. // Value indicator
  1844. cssliderValue.textContent = y.target.value/10 + ' points';
  1845. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  1846. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  1847. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  1848. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  1849. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  1850. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  1851. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  1852. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  1853. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  1854. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  1855. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  1856. var color4 = ["interpolate",
  1857. ["exponential", 0.1],
  1858. ["number",
  1859. ["get", Wincode4]
  1860. ],
  1861. 0, red0,
  1862. 0.0000001, red10,
  1863. 0.1*colorscale, red20,
  1864. 0.2*colorscale, red30,
  1865. 0.3*colorscale, red40,
  1866. 0.4*colorscale, red50,
  1867. 0.5*colorscale, red60,
  1868. 0.6*colorscale, red70,
  1869. 0.7*colorscale, red80,
  1870. 0.8*colorscale, red90,
  1871. 0.9*colorscale, red100,
  1872. 1, red100a,
  1873. 1.00000001, green10,
  1874. 1+(.1*colorscale), green20,
  1875. 1+(.2*colorscale), green30,
  1876. 1+(.3*colorscale), green40,
  1877. 1+(.4*colorscale), green50,
  1878. 1+(.5*colorscale), green60,
  1879. 1+(.6*colorscale), green70,
  1880. 1+(.7*colorscale), green80,
  1881. 1+(.8*colorscale), green90,
  1882. 1+(.9*colorscale), green100,
  1883. 2, green100a,
  1884. 2.00000001, blue10,
  1885. 2+(.1*colorscale), blue20,
  1886. 2+(.2*colorscale), blue30,
  1887. 2+(.3*colorscale), blue40,
  1888. 2+(.4*colorscale), blue50,
  1889. 2+(.5*colorscale), blue60,
  1890. 2+(.6*colorscale), blue70,
  1891. 2+(.7*colorscale), blue80,
  1892. 2+(.8*colorscale), blue90,
  1893. 2+(.9*colorscale), blue100,
  1894. 3, blue100a,
  1895. 3.00000001, yellow10,
  1896. 3+(.1*colorscale), yellow20,
  1897. 3+(.2*colorscale), yellow30,
  1898. 3+(.3*colorscale), yellow40,
  1899. 3+(.4*colorscale), yellow50,
  1900. 3+(.5*colorscale), yellow60,
  1901. 3+(.6*colorscale), yellow70,
  1902. 3+(.7*colorscale), yellow80,
  1903. 3+(.8*colorscale), yellow90,
  1904. 3+(.9*colorscale), yellow100,
  1905. 4, yellow100a,
  1906. 4.00000001, orange10,
  1907. 4+(.1*colorscale), orange20,
  1908. 4+(.2*colorscale), orange30,
  1909. 4+(.3*colorscale), orange40,
  1910. 4+(.4*colorscale), orange50,
  1911. 4+(.5*colorscale), orange60,
  1912. 4+(.6*colorscale), orange70,
  1913. 4+(.7*colorscale), orange80,
  1914. 4+(.8*colorscale), orange90,
  1915. 4+(.9*colorscale), orange100,
  1916. 5, orange100a,
  1917. 5.00000001, purple10,
  1918. 5+(.1*colorscale), purple20,
  1919. 5+(.2*colorscale), purple30,
  1920. 5+(.3*colorscale), purple40,
  1921. 5+(.4*colorscale), purple50,
  1922. 5+(.5*colorscale), purple60,
  1923. 5+(.6*colorscale), purple70,
  1924. 5+(.7*colorscale), purple80,
  1925. 5+(.8*colorscale), purple90,
  1926. 5+(.9*colorscale), purple100,
  1927. 6, purple100a,
  1928. 9, tie,
  1929. 10, novotes,
  1930. ];
  1931. map.setPaintProperty(layer1, 'fill-color', color4);
  1932. ;})
  1933. //Multi mouseover
  1934. map.on('mousemove', function(e) {
  1935. var states = map.queryRenderedFeatures(e.point, {
  1936. layer: [layer1]
  1937. });
  1938. // Must edit states.properties for candidate
  1939. if (states.length > 0) {
  1940. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>' + '</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  1941. cpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTLittl*10000)/100 + '%</strong>'
  1942. dpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTJorda*10000)/100 + '%</strong>'
  1943. epct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBoek*10000)/100 + '%</strong>'
  1944. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBayes*10000)/100 + '%</strong>'
  1945. } else {
  1946. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  1947. cpct.innerHTML = ' <strong>' + RedStatewidePCT4 + '%</strong>'
  1948. dpct.innerHTML = ' <strong>' + BlueStatewidePCT4 + '%</strong>'
  1949. epct.innerHTML = ' <strong>' + YellowStatewidePCT4 + '%</strong>'
  1950. fpct.innerHTML = ' <strong>' + OrangeStatewidePCT4 + '%</strong>'
  1951. }
  1952. });
  1953. }
  1954. var toggleableLayerIds = ['Layer',layer1,layer2,layerCounty];
  1955. toggleableLayerNames = ['Layer','2018','2014','County'];
  1956. for (var i = 0; i < toggleableLayerIds.length; i++) {
  1957. var id = toggleableLayerIds[i];
  1958. var Names = toggleableLayerNames[i];
  1959. var link = document.createElement('a');
  1960. link.href = '#';
  1961. link.className = 'active';
  1962. if(id === 'Layer') {link.className = 'header'}
  1963. if(id === layer2) {link.className = ''}
  1964. if(id === layerCounty) {link.className = 'county'}
  1965. link.shortcut = id;
  1966. link.textContent = Names
  1967. link.onclick = function (e) {
  1968. var clickedLayer = this.shortcut;
  1969. var clickedName = this.textContent
  1970. if(clickedLayer === layer1) {var current = document.getElementsByClassName('active');
  1971. if(current[0].className === 'active') {current[0].className = current[0].className.replace("active","")}; this.className = 'active'; }
  1972.  
  1973. if(clickedLayer === layer2) {var current = document.getElementsByClassName('active');
  1974. if(current[0].className === 'active') {current[0].className = current[0].className.replace("active","")}; this.className = 'active'; }
  1975. e.preventDefault();
  1976. e.stopPropagation();
  1977. if (clickedLayer === "Layer"){}
  1978. if (clickedLayer === layerCounty)
  1979. {var visibility = map.getLayoutProperty(layerCounty, 'visibility');
  1980.  
  1981. if (visibility === 'visible') {
  1982. map.setLayoutProperty(layerCounty, 'visibility', 'none');
  1983. this.className = '';
  1984. } else {
  1985. this.className = 'county';
  1986. map.setLayoutProperty(layerCounty, 'visibility', 'visible')}
  1987. }
  1988. else if (clickedLayer === layer1)
  1989. {map.setLayoutProperty(layer1,'visibility','visible')
  1990. map.setLayoutProperty(layer2,'visibility','none')
  1991. x2018status ++;
  1992. x1.style.display = 'none'
  1993. x2.style.display = 'none'
  1994. x3.style.display = 'none'
  1995. x4.style.display = 'none'
  1996. x2014.style.display = 'none'
  1997. x2018.style.display = 'block'
  1998. var toggleableLayerIds2018 = ['2018','Gov','SPI'];
  1999. toggleableLayerNames2018 = ['2018','Gov','SPI'];
  2000. for (var i = 0; i < toggleableLayerIds2018.length; i++) {
  2001. var id2018 = toggleableLayerIds2018[i];
  2002. var Names2018 = toggleableLayerNames2018[i];
  2003. var link2018 = document.createElement('a');
  2004. link2018.href = '#';
  2005. link2018.className = 'active2018';
  2006. if(id2018 === '2018') {link2018.className = 'header'}
  2007. if(id2018 === 'SPI') {link2018.className = ''}
  2008. link2018.shortcut = id2018;
  2009. link2018.textContent = Names2018
  2010. link2018.onclick = function (f) {
  2011.  
  2012. var clickedLayer2018 = this.shortcut;
  2013. var clickedName2018 = this.textContent
  2014. var current2018 = document.getElementsByClassName('active2018');
  2015. if(current2018[0].className === 'active2018') {current2018[0].className = current2018[0].className.replace("active2018","")}
  2016. this.className = 'active2018';
  2017. f.preventDefault();
  2018. f.stopPropagation();
  2019. {
  2020. if (clickedLayer2018 === "2018"){}
  2021. else if (clickedLayer2018 === 'Gov')
  2022. {x4status ++;
  2023. x1.style.display = 'none'
  2024. x2.style.display = 'none'
  2025. x3.style.display = 'none'
  2026. x4.style.display = 'block'
  2027. var toggleableLayerIds4 = ['Gov','W','R','B','Y','O'];
  2028. toggleableLayerNames4 = ['Gov','Winner','Little (R)','Jordan (D)','Boeck (L)','Bayes (C)'];
  2029. for (var i = 0; i < toggleableLayerIds4.length; i++) {
  2030. var id4 = toggleableLayerIds4[i];
  2031. var Names4 = toggleableLayerNames4[i];
  2032. var link4 = document.createElement('a');
  2033. link4.href = '#';
  2034. link4.className = 'none';
  2035. if(id4 === "Gov") {link4.className = 'header'}
  2036. if(id4 === "W") {link4.className = 'active4'}
  2037. link4.shortcut = id4
  2038. link4.textContent = Names4
  2039. link4.onclick = function (g) {
  2040. var clickedLayer4 = this.shortcut;
  2041. var clickedName4 = this.textContent;
  2042. var current4 = document.getElementsByClassName('active4');
  2043. if(current4[0].className === 'active4') {current4[0].className = current4[0].className.replace("active4","")}
  2044. this.className = 'active4';
  2045. // build a reference to the existing node to be replaced
  2046. g.preventDefault();
  2047. g.stopPropagation();
  2048.  
  2049. if (clickedLayer4 === '2018'){}
  2050. if (clickedLayer4 === 'W')
  2051. {var color4 = Multi4;
  2052. // reset color slider & text
  2053. cssliderValue.textContent = '10 points';
  2054. csslider.value = '100'
  2055. colorpct510.textContent = '10'
  2056. colorpct520.textContent = '20'
  2057. colorpct530.textContent = '30'
  2058. colorpct540.textContent = '40'
  2059. colorpct550.textContent = '50'
  2060. colorpct560.textContent = '60'
  2061. colorpct570.textContent = '70'
  2062. colorpct580.textContent = '80'
  2063. colorpct590.textContent = '90'
  2064. colorpct600.textContent = '99'
  2065. colorpct600a.textContent = '100'
  2066. //set labels - must edit - copy and paste from default
  2067. candidateC.textContent = RedCandidate4
  2068. colorvalue200b.style = background + red0
  2069. colorvalue210.style = background + red10
  2070. colorvalue220.style = background + red20
  2071. colorvalue230.style = background + red30
  2072. colorvalue240.style = background + red40
  2073. colorvalue250.style = background + red50
  2074. colorvalue260.style = background + red60
  2075. colorvalue270.style = background + red70
  2076. colorvalue280.style = background + red80
  2077. colorvalue290.style = background + red90
  2078. colorvalue300.style = background + red100
  2079. colorvalue300a.style = background + red100a
  2080. candidateD.textContent = BlueCandidate4
  2081. colorvalue300b.style = background + blue0
  2082. colorvalue310.style = background + blue10
  2083. colorvalue320.style = background + blue20
  2084. colorvalue330.style = background + blue30
  2085. colorvalue340.style = background + blue40
  2086. colorvalue350.style = background + blue50
  2087. colorvalue360.style = background + blue60
  2088. colorvalue370.style = background + blue70
  2089. colorvalue380.style = background + blue80
  2090. colorvalue390.style = background + blue90
  2091. colorvalue400.style = background + blue100
  2092. colorvalue400a.style = background + blue100a
  2093. candidateE.textContent = YellowCandidate4
  2094. colorvalue400b.style = background + yellow0
  2095. colorvalue410.style = background + yellow10
  2096. colorvalue420.style = background + yellow20
  2097. colorvalue430.style = background + yellow30
  2098. colorvalue440.style = background + yellow40
  2099. colorvalue450.style = background + yellow50
  2100. colorvalue460.style = background + yellow60
  2101. colorvalue470.style = background + yellow70
  2102. colorvalue480.style = background + yellow80
  2103. colorvalue490.style = background + yellow90
  2104. colorvalue500.style = background + yellow100
  2105. colorvalue500a.style = background + yellow100a
  2106. candidateF.textContent = OrangeCandidate4
  2107. colorvalue500b.style = background + orange0
  2108. colorvalue510.style = background + orange10
  2109. colorvalue520.style = background + orange20
  2110. colorvalue530.style = background + orange30
  2111. colorvalue540.style = background + orange40
  2112. colorvalue550.style = background + orange50
  2113. colorvalue560.style = background + orange60
  2114. colorvalue570.style = background + orange70
  2115. colorvalue580.style = background + orange80
  2116. colorvalue590.style = background + orange90
  2117. colorvalue600.style = background + orange100
  2118. colorvalue600a.style = background + orange100a
  2119. map.setPaintProperty(layer1, 'fill-color', color4)
  2120. csslider.addEventListener('input', function(y) {
  2121. // Adjust the colorscale. layer here is arbitrary - this could
  2122. // be another layer name found in your style or a custom layer
  2123. // added on the fly using `addSource`.
  2124. var colorscale = (y.target.value) / 100;
  2125.  
  2126. // Value indicator
  2127. cssliderValue.textContent = y.target.value/10 + ' points';
  2128. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2129. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2130. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2131. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2132. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2133. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2134. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2135. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2136. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2137. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2138. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2139. var color4 = ["interpolate",
  2140. ["exponential", 0.1],
  2141. ["number",
  2142. ["get", Wincode4]
  2143. ],
  2144. 0, red0,
  2145. 0.0000001, red10,
  2146. 0.1*colorscale, red20,
  2147. 0.2*colorscale, red30,
  2148. 0.3*colorscale, red40,
  2149. 0.4*colorscale, red50,
  2150. 0.5*colorscale, red60,
  2151. 0.6*colorscale, red70,
  2152. 0.7*colorscale, red80,
  2153. 0.8*colorscale, red90,
  2154. 0.9*colorscale, red100,
  2155. 1, red100a,
  2156. 1.00000001, green10,
  2157. 1+(.1*colorscale), green20,
  2158. 1+(.2*colorscale), green30,
  2159. 1+(.3*colorscale), green40,
  2160. 1+(.4*colorscale), green50,
  2161. 1+(.5*colorscale), green60,
  2162. 1+(.6*colorscale), green70,
  2163. 1+(.7*colorscale), green80,
  2164. 1+(.8*colorscale), green90,
  2165. 1+(.9*colorscale), green100,
  2166. 2, green100a,
  2167. 2.00000001, blue10,
  2168. 2+(.1*colorscale), blue20,
  2169. 2+(.2*colorscale), blue30,
  2170. 2+(.3*colorscale), blue40,
  2171. 2+(.4*colorscale), blue50,
  2172. 2+(.5*colorscale), blue60,
  2173. 2+(.6*colorscale), blue70,
  2174. 2+(.7*colorscale), blue80,
  2175. 2+(.8*colorscale), blue90,
  2176. 2+(.9*colorscale), blue100,
  2177. 3, blue100a,
  2178. 3.00000001, yellow10,
  2179. 3+(.1*colorscale), yellow20,
  2180. 3+(.2*colorscale), yellow30,
  2181. 3+(.3*colorscale), yellow40,
  2182. 3+(.4*colorscale), yellow50,
  2183. 3+(.5*colorscale), yellow60,
  2184. 3+(.6*colorscale), yellow70,
  2185. 3+(.7*colorscale), yellow80,
  2186. 3+(.8*colorscale), yellow90,
  2187. 3+(.9*colorscale), yellow100,
  2188. 4, yellow100a,
  2189. 4.00000001, orange10,
  2190. 4+(.1*colorscale), orange20,
  2191. 4+(.2*colorscale), orange30,
  2192. 4+(.3*colorscale), orange40,
  2193. 4+(.4*colorscale), orange50,
  2194. 4+(.5*colorscale), orange60,
  2195. 4+(.6*colorscale), orange70,
  2196. 4+(.7*colorscale), orange80,
  2197. 4+(.8*colorscale), orange90,
  2198. 4+(.9*colorscale), orange100,
  2199. 5, orange100a,
  2200. 5.00000001, purple10,
  2201. 5+(.1*colorscale), purple20,
  2202. 5+(.2*colorscale), purple30,
  2203. 5+(.3*colorscale), purple40,
  2204. 5+(.4*colorscale), purple50,
  2205. 5+(.5*colorscale), purple60,
  2206. 5+(.6*colorscale), purple70,
  2207. 5+(.7*colorscale), purple80,
  2208. 5+(.8*colorscale), purple90,
  2209. 5+(.9*colorscale), purple100,
  2210. 6, purple100a,
  2211. 9, tie,
  2212. 10, novotes,
  2213. ];
  2214. map.setPaintProperty(layer1, 'fill-color', color4);
  2215. ;})
  2216. //Multi mouseover
  2217. map.on('mousemove', function(e) {
  2218. var states = map.queryRenderedFeatures(e.point, {
  2219. layer: [layer1]
  2220. });
  2221. // Must edit states.properties for candidate
  2222. if (states.length > 0) {
  2223. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>' + '</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  2224. cpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTLittl*10000)/100 + '%</strong>'
  2225. dpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTJorda*10000)/100 + '%</strong>'
  2226. epct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBoek*10000)/100 + '%</strong>'
  2227. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBayes*10000)/100 + '%</strong>'
  2228. } else {
  2229. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2230. cpct.innerHTML = ' <strong>' + RedStatewidePCT4 + '%</strong>'
  2231. dpct.innerHTML = ' <strong>' + BlueStatewidePCT4 + '%</strong>'
  2232. epct.innerHTML = ' <strong>' + YellowStatewidePCT4 + '%</strong>'
  2233. fpct.innerHTML = ' <strong>' + OrangeStatewidePCT4 + '%</strong>'
  2234. }
  2235. });
  2236. }
  2237. else if (clickedLayer4 === 'R')
  2238. {
  2239. var color4 = ColorRed4
  2240. // reset color slider & text
  2241. cssliderValue.textContent = '10 points';
  2242. csslider.value = '100'
  2243. colorpct510.textContent = '10'
  2244. colorpct520.textContent = '20'
  2245. colorpct530.textContent = '30'
  2246. colorpct540.textContent = '40'
  2247. colorpct550.textContent = '50'
  2248. colorpct560.textContent = '60'
  2249. colorpct570.textContent = '70'
  2250. colorpct580.textContent = '80'
  2251. colorpct590.textContent = '90'
  2252. colorpct600.textContent = '99'
  2253. colorpct600a.textContent = '100'
  2254. //set labels
  2255. candidateC.textContent = ''
  2256. colorvalue200b.style = background + white
  2257. colorvalue210.style = background + white
  2258. colorvalue220.style = background + white
  2259. colorvalue230.style = background + white
  2260. colorvalue240.style = background + white
  2261. colorvalue250.style = background + white
  2262. colorvalue260.style = background + white
  2263. colorvalue270.style = background + white
  2264. colorvalue280.style = background + white
  2265. colorvalue290.style = background + white
  2266. colorvalue300.style = background + white
  2267. colorvalue300a.style = background + white
  2268. candidateD.textContent = ''
  2269. colorvalue300b.style = background + white
  2270. colorvalue310.style = background + white
  2271. colorvalue320.style = background + white
  2272. colorvalue330.style = background + white
  2273. colorvalue340.style = background + white
  2274. colorvalue350.style = background + white
  2275. colorvalue360.style = background + white
  2276. colorvalue370.style = background + white
  2277. colorvalue380.style = background + white
  2278. colorvalue390.style = background + white
  2279. colorvalue400.style = background + white
  2280. colorvalue400a.style = background + white
  2281. candidateE.textContent = ''
  2282. colorvalue400b.style = background + white
  2283. colorvalue410.style = background + white
  2284. colorvalue420.style = background + white
  2285. colorvalue430.style = background + white
  2286. colorvalue440.style = background + white
  2287. colorvalue450.style = background + white
  2288. colorvalue460.style = background + white
  2289. colorvalue470.style = background + white
  2290. colorvalue480.style = background + white
  2291. colorvalue490.style = background + white
  2292. colorvalue500.style = background + white
  2293. colorvalue500a.style = background + white
  2294. candidateF.textContent = RedCandidate4
  2295. colorvalue500b.style = background + red0
  2296. colorvalue510.style = background + red10
  2297. colorvalue520.style = background + red20
  2298. colorvalue530.style = background + red30
  2299. colorvalue540.style = background + red40
  2300. colorvalue550.style = background + red50
  2301. colorvalue560.style = background + red60
  2302. colorvalue570.style = background + red70
  2303. colorvalue580.style = background + red80
  2304. colorvalue590.style = background + red90
  2305. colorvalue600.style = background + red100
  2306. colorvalue600a.style = background + red100a
  2307. map.setPaintProperty(layer1, 'fill-color', color4)
  2308. csslider.addEventListener('input', function(y) {
  2309. // Adjust the colorscale. layer here is arbitrary - this could
  2310. // be another layer name found in your style or a custom layer
  2311. // added on the fly using `addSource`.
  2312. var colorscale = (y.target.value) / 100;
  2313.  
  2314. // Value indicator
  2315. cssliderValue.textContent = y.target.value/10 + ' points';
  2316. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2317. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2318. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2319. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2320. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2321. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2322. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2323. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2324. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2325. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2326. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2327. var color4 = ["interpolate",
  2328. ["exponential", 0.1*colorscale],
  2329. ["number",
  2330. ["get", Red4]
  2331. ],
  2332. 0, red0,
  2333. 0.0001, red10,
  2334. 0.1*colorscale, red20,
  2335. 0.2*colorscale, red30,
  2336. 0.3*colorscale, red40,
  2337. 0.4*colorscale, red50,
  2338. 0.5*colorscale, red60,
  2339. 0.6*colorscale, red70,
  2340. 0.7*colorscale, red80,
  2341. 0.8*colorscale, red90,
  2342. 0.9*colorscale, red100,
  2343. 1*colorscale, red100a
  2344. ]
  2345. map.setPaintProperty(layer1, 'fill-color', color4)
  2346. });
  2347. //red mouseover
  2348. map.on('mousemove', function(h) {
  2349. var states = map.queryRenderedFeatures(h.point, {
  2350. layer: [layer1]
  2351. });
  2352. // Must edit states.properties for candidate
  2353. if (states.length > 0) {
  2354. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>><h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  2355. cpct.innerHTML = ' '
  2356. dpct.innerHTML = ' '
  2357. epct.innerHTML = ' '
  2358. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTLittl*10000)/100 + '% </strong>'
  2359. } else {
  2360. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2361. cpct.innerHTML = ' '
  2362. dpct.innerHTML = ' '
  2363. epct.innerHTML = ' '
  2364. fpct.innerHTML = ' <strong>' + RedStatewidePCT4 + '%</strong>'
  2365. }
  2366. });
  2367. }
  2368. else if (clickedLayer4 === 'B')
  2369. {var color4 = ColorBlue4
  2370. // reset color slider & text
  2371. cssliderValue.textContent = '10 points';
  2372. csslider.value = '100'
  2373. colorpct510.textContent = '10'
  2374. colorpct520.textContent = '20'
  2375. colorpct530.textContent = '30'
  2376. colorpct540.textContent = '40'
  2377. colorpct550.textContent = '50'
  2378. colorpct560.textContent = '60'
  2379. colorpct570.textContent = '70'
  2380. colorpct580.textContent = '80'
  2381. colorpct590.textContent = '90'
  2382. colorpct600.textContent = '99'
  2383. colorpct600a.textContent = '100'
  2384. //set labels
  2385. candidateC.textContent = ''
  2386. colorvalue200b.style = background + white
  2387. colorvalue210.style = background + white
  2388. colorvalue220.style = background + white
  2389. colorvalue230.style = background + white
  2390. colorvalue240.style = background + white
  2391. colorvalue250.style = background + white
  2392. colorvalue260.style = background + white
  2393. colorvalue270.style = background + white
  2394. colorvalue280.style = background + white
  2395. colorvalue290.style = background + white
  2396. colorvalue300.style = background + white
  2397. colorvalue300a.style = background + white
  2398. candidateD.textContent = ''
  2399. colorvalue300b.style = background + white
  2400. colorvalue310.style = background + white
  2401. colorvalue320.style = background + white
  2402. colorvalue330.style = background + white
  2403. colorvalue340.style = background + white
  2404. colorvalue350.style = background + white
  2405. colorvalue360.style = background + white
  2406. colorvalue370.style = background + white
  2407. colorvalue380.style = background + white
  2408. colorvalue390.style = background + white
  2409. colorvalue400.style = background + white
  2410. colorvalue400a.style = background + white
  2411. candidateE.textContent = ''
  2412. colorvalue400b.style = background + white
  2413. colorvalue410.style = background + white
  2414. colorvalue420.style = background + white
  2415. colorvalue430.style = background + white
  2416. colorvalue440.style = background + white
  2417. colorvalue450.style = background + white
  2418. colorvalue460.style = background + white
  2419. colorvalue470.style = background + white
  2420. colorvalue480.style = background + white
  2421. colorvalue490.style = background + white
  2422. colorvalue500.style = background + white
  2423. colorvalue500a.style = background + white
  2424. candidateF.textContent = BlueCandidate4
  2425. colorvalue500b.style = background + blue0
  2426. colorvalue510.style = background + blue10
  2427. colorvalue520.style = background + blue20
  2428. colorvalue530.style = background + blue30
  2429. colorvalue540.style = background + blue40
  2430. colorvalue550.style = background + blue50
  2431. colorvalue560.style = background + blue60
  2432. colorvalue570.style = background + blue70
  2433. colorvalue580.style = background + blue80
  2434. colorvalue590.style = background + blue90
  2435. colorvalue600.style = background + blue100
  2436. colorvalue600a.style = background + blue100a
  2437. map.setPaintProperty(layer1, 'fill-color', color4)
  2438. csslider.addEventListener('input', function(y) {
  2439. // Adjust the colorscale. layer here is arbitrary - this could
  2440. // be another layer name found in your style or a custom layer
  2441. // added on the fly using `addSource`.
  2442. var colorscale = (y.target.value) / 100;
  2443.  
  2444. // Value indicator
  2445. cssliderValue.textContent = y.target.value/10 + ' points';
  2446. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2447. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2448. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2449. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2450. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2451. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2452. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2453. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2454. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2455. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2456. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2457. var color4 = ["interpolate",
  2458. ["exponential", 0.1],
  2459. ["number",
  2460. ["get", Blue4]
  2461. ],
  2462. 0, blue0,
  2463. 0.0001, blue10,
  2464. 0.1*colorscale, blue20,
  2465. 0.2*colorscale, blue30,
  2466. 0.3*colorscale, blue40,
  2467. 0.4*colorscale, blue50,
  2468. 0.5*colorscale, blue60,
  2469. 0.6*colorscale, blue70,
  2470. 0.7*colorscale, blue80,
  2471. 0.8*colorscale, blue90,
  2472. 0.9*colorscale, blue100,
  2473. 1*colorscale, blue100a,
  2474. ]
  2475. map.setPaintProperty(layer1, 'fill-color', color4)
  2476. });
  2477. //Blue Mouseover
  2478. map.on('mousemove', function(i) {
  2479. var states = map.queryRenderedFeatures(i.point, {
  2480. layer: [layer1]
  2481. });
  2482. // Must edit states.properties for candidate
  2483. if (states.length > 0) {
  2484. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  2485. cpct.innerHTML = ' '
  2486. dpct.innerHTML = ' '
  2487. epct.innerHTML = ' '
  2488. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTJorda*10000)/100 + '%</strong>';
  2489. } else {
  2490. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2491. cpct.innerHTML = ' '
  2492. dpct.innerHTML = ' '
  2493. epct.innerHTML = ' '
  2494. fpct.innerHTML = ' <strong>' + BlueStatewidePCT4 + '%</strong>'
  2495. }
  2496. });
  2497. }
  2498. else if (clickedLayer4 ==='Y')
  2499. {var color4 = ColorYellow4
  2500. // reset color slider
  2501. cssliderValue.textContent = '10 points';
  2502. csslider.value = '100'
  2503. colorpct510.textContent = '10'
  2504. colorpct520.textContent = '20'
  2505. colorpct530.textContent = '30'
  2506. colorpct540.textContent = '40'
  2507. colorpct550.textContent = '50'
  2508. colorpct560.textContent = '60'
  2509. colorpct570.textContentx = '70'
  2510. colorpct580.textContent = '80'
  2511. colorpct590.textContent = '90'
  2512. colorpct600.textContent = '99'
  2513. colorpct600a.textContent = '100'
  2514. //set labels
  2515. candidateC.textContent = ''
  2516. colorvalue200b.style = background + white
  2517. colorvalue210.style = background + white
  2518. colorvalue220.style = background + white
  2519. colorvalue230.style = background + white
  2520. colorvalue240.style = background + white
  2521. colorvalue250.style = background + white
  2522. colorvalue260.style = background + white
  2523. colorvalue270.style = background + white
  2524. colorvalue280.style = background + white
  2525. colorvalue290.style = background + white
  2526. colorvalue300.style = background + white
  2527. colorvalue300a.style = background + white
  2528. candidateD.textContent = ''
  2529. colorvalue300b.style = background + white
  2530. colorvalue310.style = background + white
  2531. colorvalue320.style = background + white
  2532. colorvalue330.style = background + white
  2533. colorvalue340.style = background + white
  2534. colorvalue350.style = background + white
  2535. colorvalue360.style = background + white
  2536. colorvalue370.style = background + white
  2537. colorvalue380.style = background + white
  2538. colorvalue390.style = background + white
  2539. colorvalue400.style = background + white
  2540. colorvalue400a.style = background + white
  2541. candidateE.textContent = ''
  2542. colorvalue400b.style = background + white
  2543. colorvalue410.style = background + white
  2544. colorvalue420.style = background + white
  2545. colorvalue430.style = background + white
  2546. colorvalue440.style = background + white
  2547. colorvalue450.style = background + white
  2548. colorvalue460.style = background + white
  2549. colorvalue470.style = background + white
  2550. colorvalue480.style = background + white
  2551. colorvalue490.style = background + white
  2552. colorvalue500.style = background + white
  2553. colorvalue500a.style = background + white
  2554. candidateF.textContent = YellowCandidate4
  2555. colorvalue500b.style = background + yellow0
  2556. colorvalue510.style = background + yellow10
  2557. colorvalue520.style = background + yellow20
  2558. colorvalue530.style = background + yellow30
  2559. colorvalue540.style = background + yellow40
  2560. colorvalue550.style = background + yellow50
  2561. colorvalue560.style = background + yellow60
  2562. colorvalue570.style = background + yellow70
  2563. colorvalue580.style = background + yellow80
  2564. colorvalue590.style = background + yellow90
  2565. colorvalue600.style = background + yellow100
  2566. colorvalue600a.style = background + yellow100a
  2567. map.setPaintProperty(layer1, 'fill-color', color4)
  2568. csslider.addEventListener('input', function(y) {
  2569. // Adjust the colorscale. layer here is arbitrary - this could
  2570. // be another layer name found in your style or a custom layer
  2571. // added on the fly using `addSource`.
  2572. var colorscale = (y.target.value) / 100;
  2573.  
  2574. // Value indicator
  2575. cssliderValue.textContent = y.target.value/10 + ' points';
  2576. cssliderValue.textContent = y.target.value/10 + ' points';
  2577. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2578. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2579. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2580. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2581. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2582. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2583. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2584. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2585. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2586. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2587. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2588. var color4 = ["interpolate",
  2589. ["exponential", 0.1],
  2590. ["number",
  2591. ["get", Yellow4]
  2592. ],
  2593. 0, yellow0,
  2594. 0.0001, yellow10,
  2595. 0.1*colorscale, yellow20,
  2596. 0.2*colorscale, yellow30,
  2597. 0.3*colorscale, yellow40,
  2598. 0.4*colorscale, yellow50,
  2599. 0.5*colorscale, yellow60,
  2600. 0.6*colorscale, yellow70,
  2601. 0.7*colorscale, yellow80,
  2602. 0.8*colorscale, yellow90,
  2603. 0.9*colorscale, yellow100,
  2604. 1.0*colorscale, yellow100a
  2605. ]
  2606. map.setPaintProperty(layer1, 'fill-color', color4)
  2607. });
  2608. //yellow mouseover
  2609. map.on('mousemove', function(k) {
  2610. var states = map.queryRenderedFeatures(k.point, {
  2611. layer: [layer1]
  2612. });
  2613. // Must edit states.properties for candidate
  2614. if (states.length > 0) {
  2615. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  2616. cpct.innerHTML = ' '
  2617. dpct.innerHTML = ' '
  2618. epct.innerHTML = ' '
  2619. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBoek*10000)/100 + '%</strong>'
  2620. } else {
  2621. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2622. cpct.innerHTML = ' '
  2623. dpct.innerHTML = ' '
  2624. epct.innerHTML = ' '
  2625. fpct.innerHTML = ' <strong>' + YellowStatewidePCT4 + '%</strong>'
  2626. }
  2627. });
  2628. }
  2629. else if (clickedLayer4 === 'O')
  2630. {var color4 = ColorOrange4;
  2631. // reset color slider
  2632. cssliderValue.textContent = '10 points';
  2633. csslider.value = '100'
  2634. colorpct510.textContent = '10'
  2635. colorpct520.textContent = '20'
  2636. colorpct530.textContent = '30'
  2637. colorpct540.textContent = '40'
  2638. colorpct550.textContent = '50'
  2639. colorpct560.textContent = '60'
  2640. colorpct570.textContent = '70'
  2641. colorpct580.textContent = '80'
  2642. colorpct590.textContent = '90'
  2643. colorpct600.textContent = '99'
  2644. colorpct600a.textContent = '100'
  2645. //set labels
  2646. candidateC.textContent = ''
  2647. colorvalue200b.style = background + white
  2648. colorvalue210.style = background + white
  2649. colorvalue220.style = background + white
  2650. colorvalue230.style = background + white
  2651. colorvalue240.style = background + white
  2652. colorvalue250.style = background + white
  2653. colorvalue260.style = background + white
  2654. colorvalue270.style = background + white
  2655. colorvalue280.style = background + white
  2656. colorvalue290.style = background + white
  2657. colorvalue300.style = background + white
  2658. colorvalue300a.style = background + white
  2659. candidateD.textContent = ''
  2660. colorvalue300b.style = background + white
  2661. colorvalue310.style = background + white
  2662. colorvalue320.style = background + white
  2663. colorvalue330.style = background + white
  2664. colorvalue340.style = background + white
  2665. colorvalue350.style = background + white
  2666. colorvalue360.style = background + white
  2667. colorvalue370.style = background + white
  2668. colorvalue380.style = background + white
  2669. colorvalue390.style = background + white
  2670. colorvalue400.style = background + white
  2671. colorvalue400a.style = background + white
  2672. candidateE.textContent = ''
  2673. colorvalue400b.style = background + white
  2674. colorvalue410.style = background + white
  2675. colorvalue420.style = background + white
  2676. colorvalue430.style = background + white
  2677. colorvalue440.style = background + white
  2678. colorvalue450.style = background + white
  2679. colorvalue460.style = background + white
  2680. colorvalue470.style = background + white
  2681. colorvalue480.style = background + white
  2682. colorvalue490.style = background + white
  2683. colorvalue500.style = background + white
  2684. colorvalue500a.style = background + white
  2685. candidateF.textContent = OrangeCandidate4
  2686. colorvalue500b.style = background + orange0
  2687. colorvalue510.style = background + orange10
  2688. colorvalue520.style = background + orange20
  2689. colorvalue530.style = background + orange30
  2690. colorvalue540.style = background + orange40
  2691. colorvalue550.style = background + orange50
  2692. colorvalue560.style = background + orange60
  2693. colorvalue570.style = background + orange70
  2694. colorvalue580.style = background + orange80
  2695. colorvalue590.style = background + orange90
  2696. colorvalue600.style = background + orange100
  2697. colorvalue600a.style = background + orange100a
  2698. map.setPaintProperty(layer1, 'fill-color', color4)
  2699. csslider.addEventListener('input', function(y) {
  2700. // Adjust the colorscale. layer here is arbitrary - this could
  2701. // be another layer name found in your style or a custom layer
  2702. // added on the fly using `addSource`.
  2703. var colorscale = (y.target.value) / 100;
  2704.  
  2705. // Value indicator
  2706. cssliderValue.textContent = y.target.value/10 + ' points';
  2707. cssliderValue.textContent = y.target.value/10 + ' points';
  2708. if(y.
  2709.  
  2710. target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2711. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2712. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2713. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2714. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2715. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2716. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2717. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2718. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2719. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2720. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2721. var color4 = ["interpolate",
  2722. ["exponential", 0.1],
  2723. ["number",
  2724. ["get", Orange4]
  2725. ],
  2726. 0, orange0,
  2727. 0.0001, orange10,
  2728. 0.1*colorscale, orange20,
  2729. 0.2*colorscale, orange30,
  2730. 0.3*colorscale, orange40,
  2731. 0.4*colorscale, orange50,
  2732. 0.5*colorscale, orange60,
  2733. 0.6*colorscale, orange70,
  2734. 0.7*colorscale, orange80,
  2735. 0.8*colorscale, orange90,
  2736. 0.9*colorscale, orange100,
  2737. 1.0*colorscale, orange100a
  2738. ]
  2739. map.setPaintProperty(layer1, 'fill-color', color4)
  2740. });
  2741. //orange mouseover
  2742. map.on('mousemove', function(l) {
  2743. var states = map.queryRenderedFeatures(l.point, {
  2744. layer: [layer1]
  2745. });
  2746. // Must edit states.properties for candidate
  2747. if (states.length > 0) {
  2748. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>Total Votes: ' + Math.round(states[0].properties.G_Gtotal) + '</h3>'
  2749. cpct.innerHTML = ' '
  2750. dpct.innerHTML = ' '
  2751. epct.innerHTML = ' '
  2752. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBayes*10000)/100 + '%</strong>'
  2753. } else {
  2754. legendtitle.innerHTML = '<h2>Idaho 2018 Governor GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2755. cpct.innerHTML = ' '
  2756. dpct.innerHTML = ' '
  2757. epct.innerHTML = ' '
  2758. fpct.innerHTML = ' <strong>' + OrangeStatewidePCT4 + '%</strong>'
  2759. }
  2760. });
  2761. }
  2762. }
  2763. var layers4 = document.getElementById('menu4');
  2764. if (x4status > 1){} else {layers4.appendChild(link4)}
  2765. }
  2766. }
  2767. else if (clickedLayer2018 === 'SPI') {x1status ++;
  2768. x1.style.display = 'block';
  2769. x2.style.display = 'none';
  2770. x3.style.display = 'none';
  2771. x4.style.display = 'none';
  2772. var toggleableLayerIds1 = ['SPI','W','R','B'];
  2773. toggleableLayerNames1 = ['SPI','Winner','Ybarra (R)','Wilson (D)'];
  2774. for (var i = 0; i < toggleableLayerIds1.length; i++) {
  2775. var id1 = toggleableLayerIds1[i];
  2776. var Names1 = toggleableLayerNames1[i];
  2777. var link1 = document.createElement('a');
  2778. link1.href = '#';
  2779. link1.className = 'none';
  2780. if(id1 === "SPI") {link1.className = 'header'}
  2781. if(id1 === 'W') {link1.className = 'active1'}
  2782. link1.shortcut = id1;
  2783. link1.textContent = Names1
  2784. link1.onclick = function (g) {
  2785. var clickedLayer1 = this.shortcut;
  2786. var clickedName1 = this.textContent
  2787. var current1 = document.getElementsByClassName('active1');
  2788. if(current1[0].className === 'active1') {current1[0].className = current1[0].className.replace("active1","")}
  2789. this.className = "active1";
  2790. g.preventDefault();
  2791. g.stopPropagation();
  2792. if (clickedLayer1 === 'SPI'){}
  2793. if (clickedLayer1 === "W"){
  2794. var color = Multi
  2795. // reset color slider & text
  2796. cssliderValue.textContent = '10 points';
  2797. csslider.value = '100'
  2798. colorpct510.textContent = '10'
  2799. colorpct520.textContent = '20'
  2800. colorpct530.textContent = '30'
  2801. colorpct540.textContent = '40'
  2802. colorpct550.textContent = '50'
  2803. colorpct560.textContent = '60'
  2804. colorpct570.textContent = '70'
  2805. colorpct580.textContent = '80'
  2806. colorpct590.textContent = '90'
  2807. colorpct600.textContent = '99'
  2808. colorpct600a.textContent = '100'
  2809. //set labels - must edit - copy and paste from default
  2810. candidateC.textContent = ''
  2811. colorvalue200b.style = background + white
  2812. colorvalue210.style = background + white
  2813. colorvalue220.style = background + white
  2814. colorvalue230.style = background + white
  2815. colorvalue240.style = background + white
  2816. colorvalue250.style = background + white
  2817. colorvalue260.style = background + white
  2818. colorvalue270.style = background + white
  2819. colorvalue280.style = background + white
  2820. colorvalue290.style = background + white
  2821. colorvalue300.style = background + white
  2822. colorvalue300a.style = background + white
  2823. candidateD.textContent = ''
  2824. colorvalue300b.style = background + white
  2825. colorvalue310.style = background + white
  2826. colorvalue320.style = background + white
  2827. colorvalue330.style = background + white
  2828. colorvalue340.style = background + white
  2829. colorvalue350.style = background + white
  2830. colorvalue360.style = background + white
  2831. colorvalue370.style = background + white
  2832. colorvalue380.style = background + white
  2833. colorvalue390.style = background + white
  2834. colorvalue400.style = background + white
  2835. colorvalue400a.style = background + white
  2836. candidateE.textContent = RedCandidate
  2837. colorvalue400b.style = background + red0
  2838. colorvalue410.style = background + red10
  2839. colorvalue420.style = background + red20
  2840. colorvalue430.style = background + red30
  2841. colorvalue440.style = background + red40
  2842. colorvalue450.style = background + red50
  2843. colorvalue460.style = background + red60
  2844. colorvalue470.style = background + red70
  2845. colorvalue480.style = background + red80
  2846. colorvalue490.style = background + red90
  2847. colorvalue500.style = background + red100
  2848. colorvalue500a.style = background + red100a
  2849. candidateF.textContent = BlueCandidate
  2850. colorvalue500b.style = background + blue0
  2851. colorvalue510.style = background + blue10
  2852. colorvalue520.style = background + blue20
  2853. colorvalue530.style = background + blue30
  2854. colorvalue540.style = background + blue40
  2855. colorvalue550.style = background + blue50
  2856. colorvalue560.style = background + blue60
  2857. colorvalue570.style = background + blue70
  2858. colorvalue580.style = background + blue80
  2859. colorvalue590.style = background + blue90
  2860. colorvalue600.style = background + blue100
  2861. colorvalue600a.style = background + blue100a
  2862. map.setPaintProperty(layer1, 'fill-color', color);
  2863. csslider.addEventListener('input', function(y) {
  2864. // Adjust the colorscale. layer here is arbitrary - this could
  2865. // be another layer name found in your style or a custom layer
  2866. // added on the fly using `addSource`.
  2867. var colorscale = (y.target.value) / 100;
  2868.  
  2869. // Value indicator
  2870. cssliderValue.textContent = y.target.value/10 + ' points';
  2871. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  2872. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  2873. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  2874. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  2875. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  2876. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  2877. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  2878. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  2879. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  2880. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  2881. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  2882. var color = ["interpolate",
  2883. ["exponential", 0.1],
  2884. ["number",
  2885. ["get", Wincode]
  2886. ],
  2887. 0, red0,
  2888. 0.0000001, red10,
  2889. 0.1*colorscale, red20,
  2890. 0.2*colorscale, red30,
  2891. 0.3*colorscale, red40,
  2892. 0.4*colorscale, red50,
  2893. 0.5*colorscale, red60,
  2894. 0.6*colorscale, red70,
  2895. 0.7*colorscale, red80,
  2896. 0.8*colorscale, red90,
  2897. 0.9*colorscale, red100,
  2898. 1, red100a,
  2899. 1.00000001, green10,
  2900. 1+(.1*colorscale), green20,
  2901. 1+(.2*colorscale), green30,
  2902. 1+(.3*colorscale), green40,
  2903. 1+(.4*colorscale), green50,
  2904. 1+(.5*colorscale), green60,
  2905. 1+(.6*colorscale), green70,
  2906. 1+(.7*colorscale), green80,
  2907. 1+(.8*colorscale), green90,
  2908. 1+(.9*colorscale), green100,
  2909. 2, green100a,
  2910. 2.00000001, blue10,
  2911. 2+(.1*colorscale), blue20,
  2912. 2+(.2*colorscale), blue30,
  2913. 2+(.3*colorscale), blue40,
  2914. 2+(.4*colorscale), blue50,
  2915. 2+(.5*colorscale), blue60,
  2916. 2+(.6*colorscale), blue70,
  2917. 2+(.7*colorscale), blue80,
  2918. 2+(.8*colorscale), blue90,
  2919. 2+(.9*colorscale), blue100,
  2920. 3, blue100a,
  2921. 3.00000001, yellow10,
  2922. 3+(.1*colorscale), yellow20,
  2923. 3+(.2*colorscale), yellow30,
  2924. 3+(.3*colorscale), yellow40,
  2925. 3+(.4*colorscale), yellow50,
  2926. 3+(.5*colorscale), yellow60,
  2927. 3+(.6*colorscale), yellow70,
  2928. 3+(.7*colorscale), yellow80,
  2929. 3+(.8*colorscale), yellow90,
  2930. 3+(.9*colorscale), yellow100,
  2931. 4, yellow100a,
  2932. 4.00000001, orange10,
  2933. 4+(.1*colorscale), orange20,
  2934. 4+(.2*colorscale), orange30,
  2935. 4+(.3*colorscale), orange40,
  2936. 4+(.4*colorscale), orange50,
  2937. 4+(.5*colorscale), orange60,
  2938. 4+(.6*colorscale), orange70,
  2939. 4+(.7*colorscale), orange80,
  2940. 4+(.8*colorscale), orange90,
  2941. 4+(.9*colorscale), orange100,
  2942. 5, orange100a,
  2943. 5.00000001, purple10,
  2944. 5+(.1*colorscale), purple20,
  2945. 5+(.2*colorscale), purple30,
  2946. 5+(.3*colorscale), purple40,
  2947. 5+(.4*colorscale), purple50,
  2948. 5+(.5*colorscale), purple60,
  2949. 5+(.6*colorscale), purple70,
  2950. 5+(.7*colorscale), purple80,
  2951. 5+(.8*colorscale), purple90,
  2952. 5+(.9*colorscale), purple100,
  2953. 6, purple100a,
  2954. 9, tie,
  2955. 10, novotes,
  2956. ]
  2957. map.setPaintProperty(layer1, 'fill-color', color);
  2958. });
  2959. //Multi mouseover
  2960. map.on('mousemove', function(e) {
  2961. var states = map.queryRenderedFeatures(e.point, {
  2962. layer: [layer1]
  2963. });
  2964. // Must edit states.properties for candidate
  2965. if (states.length > 0) {
  2966. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>' + '</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_SPETotal) + '</h3>'
  2967. epct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTYbarr*10000)/100 + '%</strong>'
  2968. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTWilso*10000)/100 + '%</strong>'
  2969. } else {
  2970. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  2971. epct.innerHTML = ' <strong>' + RedStatewidePCT + '%</strong>'
  2972. fpct.innerHTML = ' <strong>' + BlueStatewidePCT + '%</strong>'
  2973. }
  2974. });
  2975. }
  2976. else if (clickedLayer1 === "R"){
  2977. var color = ColorRed;
  2978. // reset color slider & text
  2979. cssliderValue.textContent = '10 points';
  2980. csslider.value = '100'
  2981. colorpct510.textContent = '10'
  2982. colorpct520.textContent = '20'
  2983. colorpct530.textContent = '30'
  2984. colorpct540.textContent = '40'
  2985. colorpct550.textContent = '50'
  2986. colorpct560.textContent = '60'
  2987. colorpct570.textContent = '70'
  2988. colorpct580.textContent = '80'
  2989. colorpct590.textContent = '90'
  2990. colorpct600.textContent = '99'
  2991. colorpct600a.textContent = '100'
  2992. //set labels
  2993. candidateC.textContent = ''
  2994. colorvalue200b.style = background + white
  2995. colorvalue210.style = background + white
  2996. colorvalue220.style = background + white
  2997. colorvalue230.style = background + white
  2998. colorvalue240.style = background + white
  2999. colorvalue250.style = background + white
  3000. colorvalue260.style = background + white
  3001. colorvalue270.style = background + white
  3002. colorvalue280.style = background + white
  3003. colorvalue290.style = background + white
  3004. colorvalue300.style = background + white
  3005. colorvalue300a.style = background + white
  3006. candidateD.textContent = ''
  3007. colorvalue300b.style = background + white
  3008. colorvalue310.style = background + white
  3009. colorvalue320.style = background + white
  3010. colorvalue330.style = background + white
  3011. colorvalue340.style = background + white
  3012. colorvalue350.style = background + white
  3013. colorvalue360.style = background + white
  3014. colorvalue370.style = background + white
  3015. colorvalue380.style = background + white
  3016. colorvalue390.style = background + white
  3017. colorvalue400.style = background + white
  3018. colorvalue400a.style = background + white
  3019. candidateE.textContent = ''
  3020. colorvalue400b.style = background + white
  3021. colorvalue410.style = background + white
  3022. colorvalue420.style = background + white
  3023. colorvalue430.style = background + white
  3024. colorvalue440.style = background + white
  3025. colorvalue450.style = background + white
  3026. colorvalue460.style = background + white
  3027. colorvalue470.style = background + white
  3028. colorvalue480.style = background + white
  3029. colorvalue490.style = background + white
  3030. colorvalue500.style = background + white
  3031. colorvalue500a.style = background + white
  3032. candidateF.textContent = RedCandidate
  3033. colorvalue500b.style = background + red0
  3034. colorvalue510.style = background + red10
  3035. colorvalue520.style = background + red20
  3036. colorvalue530.style = background + red30
  3037. colorvalue540.style = background + red40
  3038. colorvalue550.style = background + red50
  3039. colorvalue560.style = background + red60
  3040. colorvalue570.style = background + red70
  3041. colorvalue580.style = background + red80
  3042. colorvalue590.style = background + red90
  3043. colorvalue600.style = background + red100
  3044. colorvalue600a.style = background + red100a
  3045. map.setPaintProperty(layer1, 'fill-color', color)
  3046. csslider.addEventListener('input', function(y) {
  3047. // Adjust the colorscale. layer here is arbitrary - this could
  3048. // be another layer name found in your style or a custom layer
  3049. // added on the fly using `addSource`.
  3050. var colorscale = (y.target.value) / 100;
  3051.  
  3052. // Value indicator
  3053. cssliderValue.textContent = y.target.value/10 + ' points';
  3054. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3055. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3056. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3057. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3058. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3059. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3060. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3061. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3062. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3063. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3064. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3065. var color = ["interpolate",
  3066. ["exponential", 0.1*colorscale],
  3067. ["number",
  3068. ["get", Red]
  3069. ],
  3070. 0, red0,
  3071. 0.0001, red10,
  3072. 0.1*colorscale, red20,
  3073. 0.2*colorscale, red30,
  3074. 0.3*colorscale, red40,
  3075. 0.4*colorscale, red50,
  3076. 0.5*colorscale, red60,
  3077. 0.6*colorscale, red70,
  3078. 0.7*colorscale, red80,
  3079. 0.8*colorscale, red90,
  3080. 0.9*colorscale, red100,
  3081. 1*colorscale, red100a
  3082. ]
  3083. map.setPaintProperty(layer1, 'fill-color', color)
  3084. });
  3085. //red mouseover
  3086. map.on('mousemove', function(h) {
  3087. var states = map.queryRenderedFeatures(h.point, {
  3088. layer: [layer1]
  3089. });
  3090. // Must edit states.properties for candidate
  3091. if (states.length > 0) {
  3092. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_SPETotal) + '</h3>'
  3093. epct.innerHTML = ' '
  3094. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTYbarr*10000)/100 + '% </strong>'
  3095. } else {
  3096. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  3097. epct.innerHTML = ' '
  3098. fpct.innerHTML = ' <strong>' + RedStatewidePCT + '%</strong>'
  3099. }
  3100. });
  3101. }
  3102. else if (clickedLayer1 === "B"){
  3103. var color = ColorBlue;
  3104. // reset color slider & text
  3105. cssliderValue.textContent = '10 points';
  3106. csslider.value = '100'
  3107. colorpct510.textContent = '10'
  3108. colorpct520.textContent = '20'
  3109. colorpct530.textContent = '30'
  3110. colorpct540.textContent = '40'
  3111. colorpct550.textContent = '50'
  3112. colorpct560.textContent = '60'
  3113. colorpct570.textContent = '70'
  3114. colorpct580.textContent = '80'
  3115. colorpct590.textContent = '90'
  3116. colorpct600.textContent = '99'
  3117. colorpct600a.textContent = '100'
  3118. //set labels
  3119. candidateC.textContent = ''
  3120. colorvalue200b.style = background + white
  3121. colorvalue210.style = background + white
  3122. colorvalue220.style = background + white
  3123. colorvalue230.style = background + white
  3124. colorvalue240.style = background + white
  3125. colorvalue250.style = background + white
  3126. colorvalue260.style = background + white
  3127. colorvalue270.style = background + white
  3128. colorvalue280.style = background + white
  3129. colorvalue290.style = background + white
  3130. colorvalue300.style = background + white
  3131. colorvalue300a.style = background + white
  3132. candidateD.textContent = ''
  3133. colorvalue300b.style = background + white
  3134. colorvalue310.style = background + white
  3135. colorvalue320.style = background + white
  3136. colorvalue330.style = background + white
  3137. colorvalue340.style = background + white
  3138. colorvalue350.style = background + white
  3139. colorvalue360.style = background + white
  3140. colorvalue370.style = background + white
  3141. colorvalue380.style = background + white
  3142. colorvalue390.style = background + white
  3143. colorvalue400.style = background + white
  3144. colorvalue400a.style = background + white
  3145. candidateE.textContent = ''
  3146. colorvalue400b.style = background + white
  3147. colorvalue410.style = background + white
  3148. colorvalue420.style = background + white
  3149. colorvalue430.style = background + white
  3150. colorvalue440.style = background + white
  3151. colorvalue450.style = background + white
  3152. colorvalue460.style = background + white
  3153. colorvalue470.style = background + white
  3154. colorvalue480.style = background + white
  3155. colorvalue490.style = background + white
  3156. colorvalue500.style = background + white
  3157. colorvalue500a.style = background + white
  3158. candidateF.textContent = BlueCandidate
  3159. colorvalue500b.style = background + blue0
  3160. colorvalue510.style = background + blue10
  3161. colorvalue520.style = background + blue20
  3162. colorvalue530.style = background + blue30
  3163. colorvalue540.style = background + blue40
  3164. colorvalue550.style = background + blue50
  3165. colorvalue560.style = background + blue60
  3166. colorvalue570.style = background + blue70
  3167. colorvalue580.style = background + blue80
  3168. colorvalue590.style = background + blue90
  3169. colorvalue600.style = background + blue100
  3170. colorvalue600a.style = background + blue100a
  3171. map.setPaintProperty(layer1, 'fill-color', color)
  3172. csslider.addEventListener('input', function(y) {
  3173. // Adjust the colorscale. layer here is arbitrary - this could
  3174. // be another layer name found in your style or a custom layer
  3175. // added on the fly using `addSource`.
  3176. var colorscale = (y.target.value) / 100;
  3177.  
  3178. // Value indicator
  3179. cssliderValue.textContent = y.target.value/10 + ' points';
  3180. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3181. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3182. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3183. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3184. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3185. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3186. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3187. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3188. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3189. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3190. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3191. var color = ["interpolate",
  3192. ["exponential", 0.1],
  3193. ["number",
  3194. ["get", Blue]
  3195. ],
  3196. 0, blue0,
  3197. 0.0001, blue10,
  3198. 0.1*colorscale, blue20,
  3199. 0.2*colorscale, blue30,
  3200. 0.3*colorscale, blue40,
  3201. 0.4*colorscale, b1lue50,
  3202. 0.5*colorscale, blue60,
  3203. 0.6*colorscale, blue70,
  3204. 0.7*colorscale, blue80,
  3205. 0.8*colorscale, blue90,
  3206. 0.9*colorscale, blue100,
  3207. 1*colorscale, blue100a,
  3208. ]
  3209. map.setPaintProperty(layer1, 'fill-color', color)
  3210. });
  3211. //Blue Mouseover
  3212. map.on('mousemove', function(i) {
  3213. var states = map.queryRenderedFeatures(i.point, {
  3214. layer: [layer1]
  3215. });
  3216. // Must edit states.properties for candidate
  3217. if (states.length > 0) {
  3218. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>'+ states[0].properties.G_NAME18 + '</h3><h3>' +states[0].properties.G_County + ' County</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_SPETotal) + '</h3>'
  3219. epct.innerHTML = ' '
  3220. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTWilso*10000)/100 + '%</strong>';
  3221. } else {
  3222. legendtitle.innerHTML = '<h2>Idaho 2018 SPI GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes + '</h3>'
  3223. epct.innerHTML = ' '
  3224. fpct.innerHTML = ' <strong>' + BlueStatewidePCT + '%</strong>'
  3225. }
  3226. })
  3227. }
  3228. }
  3229. var layers1 = document.getElementById('menu1');
  3230. if (x1status >1){} else {layers1.appendChild(link1)}}
  3231. }
  3232. }
  3233. }
  3234. var layers2018 = document.getElementById('menu2018');
  3235. if (x2018status> 1) {} else {layers2018.appendChild(link2018)}
  3236. }
  3237. }
  3238. else if (clickedLayer === layer2)
  3239. {map.setLayoutProperty(layer1,'visibility','none')
  3240. map.setLayoutProperty(layer2,'visibility','visible')
  3241. x2014status ++;
  3242. x1.style.display = 'none'
  3243. x2.style.display = 'none'
  3244. x3.style.display = 'none'
  3245. x4.style.display = 'none'
  3246. x2014.style.display = 'block'
  3247. x2018.style.display = 'none'
  3248. var toggleableLayerIds2014= ['2014','Gov','SPI'];
  3249. toggleableLayerNames2014 = ['2014','Gov','SPI'];
  3250. for (var i = 0; i < toggleableLayerIds2014.length; i++) {
  3251. var id2014 = toggleableLayerIds2014[i];
  3252. var Names2014 = toggleableLayerNames2014[i];
  3253. var link2014 = document.createElement('a');
  3254. link2014.href = '#';
  3255. link2014.className = 'active2014';
  3256. if(id2014 === '2014') {link2014.className = 'header'}
  3257. if(id2014 === 'SPI') {link2014.className = ''}
  3258. link2014.shortcut = id2014;
  3259. link2014.textContent = Names2014
  3260. link2014.onclick = function (l) {
  3261.  
  3262. var clickedLayer2014 = this.shortcut;
  3263. var clickedName2014 = this.textContent
  3264. var current2014 = document.getElementsByClassName('active2014');
  3265. if(current2014[0].className === 'active2014') {current2014[0].className = current2014[0].className.replace('active2014','')}
  3266. this.className = 'active2014';
  3267. l.preventDefault();
  3268. l.stopPropagation();
  3269. if (clickedLayer2014 === "2014"){}
  3270. else if (clickedLayer2014 === 'Gov')
  3271. {x3status ++;
  3272. x1.style.display = 'none'
  3273. x2.style.display = 'none'
  3274. x3.style.display = 'block'
  3275. x4.style.display = 'none'
  3276. var toggleableLayerIds3 = ['Gov','W','R','B'];
  3277. toggleableLayerNames3 = ['Gov','Winner','Otter (R)','Balukoff (D)'];
  3278. for (var i = 0; i < toggleableLayerIds3.length; i++) {
  3279. var id3 = toggleableLayerIds3[i];
  3280. var Names3 = toggleableLayerNames3[i];
  3281. var link3 = document.createElement('a');
  3282. link3.href = '#';
  3283. link3.className = 'none';
  3284. if(id3 === "Gov") {link3.className = 'header'}
  3285. if(id3 === 'W') {link3.className = 'active3'}
  3286. link3.shortcut = id3
  3287. link3.textContent = Names3
  3288. link3.onclick = function (g) {
  3289. var clickedLayer3 = this.shortcut;
  3290. var clickedName3 = this.textContent
  3291. var current3 = document.getElementsByClassName('active3');
  3292. if(current3[0].className === 'active3') {current3[0].className = current3[0].className.replace("active3","")}
  3293. this.className = 'active3';
  3294. g.preventDefault();
  3295. g.stopPropagation();
  3296. {if (clickedLayer3 === 'Gov'){}
  3297. else if (clickedLayer3 === "W")
  3298. {var color3 = Multi3;
  3299. // reset color slider & text
  3300. cssliderValue.textContent = '10 points';
  3301. csslider.value = '100'
  3302. colorpct510.textContent = '10'
  3303. colorpct520.textContent = '20'
  3304. colorpct530.textContent = '30'
  3305. colorpct540.textContent = '40'
  3306. colorpct550.textContent = '50'
  3307. colorpct560.textContent = '60'
  3308. colorpct570.textContent = '70'
  3309. colorpct580.textContent = '80'
  3310. colorpct590.textContent = '90'
  3311. colorpct600.textContent = '99'
  3312. colorpct600a.textContent = '100'
  3313. //set labels - must edit - copy and paste from default
  3314. candidateC.textContent = ''
  3315. colorvalue200b.style = background + white
  3316. colorvalue210.style = background + white
  3317. colorvalue220.style = background + white
  3318. colorvalue230.style = background + white
  3319. colorvalue240.style = background + white
  3320. colorvalue250.style = background + white
  3321. colorvalue260.style = background + white
  3322. colorvalue270.style = background + white
  3323. colorvalue280.style = background + white
  3324. colorvalue290.style = background + white
  3325. colorvalue300.style = background + white
  3326. colorvalue300a.style = background + white
  3327. candidateD.textContent = ''
  3328. colorvalue300b.style = background + white
  3329. colorvalue310.style = background + white
  3330. colorvalue320.style = background + white
  3331. colorvalue330.style = background + white
  3332. colorvalue340.style = background + white
  3333. colorvalue350.style = background + white
  3334. colorvalue360.style = background + white
  3335. colorvalue370.style = background + white
  3336. colorvalue380.style = background + white
  3337. colorvalue390.style = background + white
  3338. colorvalue400.style = background + white
  3339. colorvalue400a.style = background + white
  3340. candidateE.textContent = RedCandidate3
  3341. colorvalue400b.style = background + red0
  3342. colorvalue410.style = background + red10
  3343. colorvalue420.style = background + red20
  3344. colorvalue430.style = background + red30
  3345. colorvalue440.style = background + red40
  3346. colorvalue450.style = background + red50
  3347. colorvalue460.style = background + red60
  3348. colorvalue470.style = background + red70
  3349. colorvalue480.style = background + red80
  3350. colorvalue490.style = background + red90
  3351. colorvalue500.style = background + red100
  3352. colorvalue500a.style = background + red100a
  3353. candidateF.textContent = BlueCandidate3
  3354. colorvalue500b.style = background + blue0
  3355. colorvalue510.style = background + blue10
  3356. colorvalue520.style = background + blue20
  3357. colorvalue530.style = background + blue30
  3358. colorvalue540.style = background + blue40
  3359. colorvalue550.style = background + blue50
  3360. colorvalue560.style = background + blue60
  3361. colorvalue570.style = background + blue70
  3362. colorvalue580.style = background + blue80
  3363. colorvalue590.style = background + blue90
  3364. colorvalue600.style = background + blue100
  3365. colorvalue600a.style = background + blue100a
  3366. map.setPaintProperty(layer2, 'fill-color', color3);
  3367. csslider.addEventListener('input', function(y) {
  3368. // Adjust the colorscale. layer here is arbitrary - this could
  3369. // be another layer name found in your style or a custom layer
  3370. // added on the fly using `addSource`.
  3371. var colorscale = (y.target.value) / 100;
  3372.  
  3373. // Value indicator
  3374. cssliderValue.textContent = y.target.value/10 + ' points';
  3375. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3376. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3377. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3378. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3379. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3380. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3381. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3382. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3383. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3384. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3385. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3386. var color3 = ["interpolate",
  3387. ["exponential", 0.1],
  3388. ["number",
  3389. ["get", Wincode3]
  3390. ],
  3391. 0, red0,
  3392. 0.0000001, red10,
  3393. 0.1*colorscale, red20,
  3394. 0.2*colorscale, red30,
  3395. 0.3*colorscale, red40,
  3396. 0.4*colorscale, red50,
  3397. 0.5*colorscale, red60,
  3398. 0.6*colorscale, red70,
  3399. 0.7*colorscale, red80,
  3400. 0.8*colorscale, red90,
  3401. 0.9*colorscale, red100,
  3402. 1, red100a,
  3403. 1.00000001, green10,
  3404. 1+(.1*colorscale), green20,
  3405. 1+(.2*colorscale), green30,
  3406. 1+(.3*colorscale), green40,
  3407. 1+(.4*colorscale), green50,
  3408. 1+(.5*colorscale), green60,
  3409. 1+(.6*colorscale), green70,
  3410. 1+(.7*colorscale), green80,
  3411. 1+(.8*colorscale), green90,
  3412. 1+(.9*colorscale), green100,
  3413. 2, green100a,
  3414. 2.00000001, blue10,
  3415. 2+(.1*colorscale), blue20,
  3416. 2+(.2*colorscale), blue30,
  3417. 2+(.3*colorscale), blue40,
  3418. 2+(.4*colorscale), blue50,
  3419. 2+(.5*colorscale), blue60,
  3420. 2+(.6*colorscale), blue70,
  3421. 2+(.7*colorscale), blue80,
  3422. 2+(.8*colorscale), blue90,
  3423. 2+(.9*colorscale), blue100,
  3424. 3, blue100a,
  3425. 3.00000001, yellow10,
  3426. 3+(.1*colorscale), yellow20,
  3427. 3+(.2*colorscale), yellow30,
  3428. 3+(.3*colorscale), yellow40,
  3429. 3+(.4*colorscale), yellow50,
  3430. 3+(.5*colorscale), yellow60,
  3431. 3+(.6*colorscale), yellow70,
  3432. 3+(.7*colorscale), yellow80,
  3433. 3+(.8*colorscale), yellow90,
  3434. 3+(.9*colorscale), yellow100,
  3435. 4, yellow100a,
  3436. 4.00000001, orange10,
  3437. 4+(.1*colorscale), orange20,
  3438. 4+(.2*colorscale), orange30,
  3439. 4+(.3*colorscale), orange40,
  3440. 4+(.4*colorscale), orange50,
  3441. 4+(.5*colorscale), orange60,
  3442. 4+(.6*colorscale), orange70,
  3443. 4+(.7*colorscale), orange80,
  3444. 4+(.8*colorscale), orange90,
  3445. 4+(.9*colorscale), orange100,
  3446. 5, orange100a,
  3447. 5.00000001, purple10,
  3448. 5+(.1*colorscale), purple20,
  3449. 5+(.2*colorscale), purple30,
  3450. 5+(.3*colorscale), purple40,
  3451. 5+(.4*colorscale), purple50,
  3452. 5+(.5*colorscale), purple60,
  3453. 5+(.6*colorscale), purple70,
  3454. 5+(.7*colorscale), purple80,
  3455. 5+(.8*colorscale), purple90,
  3456. 5+(.9*colorscale), purple100,
  3457. 6, purple100a,
  3458. 9, tie,
  3459. 10, novotes,
  3460. ]
  3461. map.setPaintProperty(layer2, 'fill-color', color3);
  3462. });
  3463. //Multi mouseover
  3464. map.on('mousemove', function(m) {
  3465. var states = map.queryRenderedFeatures(m.point, {
  3466. layer: [layer2]
  3467. });
  3468. // Must edit states.properties for candidate
  3469. if (states.length > 0) {
  3470. legendtitle.innerHTML = + '<h2>Idaho 2014 Gov GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>' + '</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_GovTotal) + '</h3>'
  3471. epct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTOtter*10000)/100 + '%</strong>'
  3472. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBaluk*10000)/100 + '%</strong>'
  3473. } else {
  3474. legendtitle.innerHTML = '<h2>Idaho 2014 Gov GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  3475. epct.innerHTML = ' <strong>' + RedStatewidePCT3 + '%</strong>'
  3476. fpct.innerHTML = ' <strong>' + BlueStatewidePCT3 + '%</strong>'
  3477. }
  3478. });
  3479. }
  3480. else if (clickedLayer3 === "R")
  3481. {var color3 = ColorRed3;
  3482. // reset color slider & text
  3483. cssliderValue.textContent = '10 points';
  3484. csslider.value = '100'
  3485. colorpct510.textContent = '10'
  3486. colorpct520.textContent = '20'
  3487. colorpct530.textContent = '30'
  3488. colorpct540.textContent = '40'
  3489. colorpct550.textContent = '50'
  3490. colorpct560.textContent = '60'
  3491. colorpct570.textContent = '70'
  3492. colorpct580.textContent = '80'
  3493. colorpct590.textContent = '90'
  3494. colorpct600.textContent = '99'
  3495. colorpct600a.textContent = '100'
  3496. //set labels
  3497. candidateC.textContent = ''
  3498. colorvalue200b.style = background + white
  3499. colorvalue210.style = background + white
  3500. colorvalue220.style = background + white
  3501. colorvalue230.style = background + white
  3502. colorvalue240.style = background + white
  3503. colorvalue250.style = background + white
  3504. colorvalue260.style = background + white
  3505. colorvalue270.style = background + white
  3506. colorvalue280.style = background + white
  3507. colorvalue290.style = background + white
  3508. colorvalue300.style = background + white
  3509. colorvalue300a.style = background + white
  3510. candidateD.textContent = ''
  3511. colorvalue300b.style = background + white
  3512. colorvalue310.style = background + white
  3513. colorvalue320.style = background + white
  3514. colorvalue330.style = background + white
  3515. colorvalue340.style = background + white
  3516. colorvalue350.style = background + white
  3517. colorvalue360.style = background + white
  3518. colorvalue370.style = background + white
  3519. colorvalue380.style = background + white
  3520. colorvalue390.style = background + white
  3521. colorvalue400.style = background + white
  3522. colorvalue400a.style = background + white
  3523. candidateE.textContent = ''
  3524. colorvalue400b.style = background + white
  3525. colorvalue410.style = background + white
  3526. colorvalue420.style = background + white
  3527. colorvalue430.style = background + white
  3528. colorvalue440.style = background + white
  3529. colorvalue450.style = background + white
  3530. colorvalue460.style = background + white
  3531. colorvalue470.style = background + white
  3532. colorvalue480.style = background + white
  3533. colorvalue490.style = background + white
  3534. colorvalue500.style = background + white
  3535. colorvalue500a.style = background + white
  3536. candidateF.textContent = RedCandidate3
  3537. colorvalue500b.style = background + red0
  3538. colorvalue510.style = background + red10
  3539. colorvalue520.style = background + red20
  3540. colorvalue530.style = background + red30
  3541. colorvalue540.style = background + red40
  3542. colorvalue550.style = background + red50
  3543. colorvalue560.style = background + red60
  3544. colorvalue570.style = background + red70
  3545. colorvalue580.style = background + red80
  3546. colorvalue590.style = background + red90
  3547. colorvalue600.style = background + red100
  3548. colorvalue600a.style = background + red100a
  3549. map.setPaintProperty(layer2, 'fill-color', color3)
  3550. csslider.addEventListener('input', function(y) {
  3551. // Adjust the colorscale. layer here is arbitrary - this could
  3552. // be another layer name found in your style or a custom layer
  3553. // added on the fly using `addSource`.
  3554. var colorscale = (y.target.value) / 100;
  3555.  
  3556. // Value indicator
  3557. cssliderValue.textContent = y.target.value/10 + ' points';
  3558. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3559. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3560. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3561. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3562. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3563. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3564. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3565. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3566. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3567. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3568. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3569. var color3 = ["interpolate",
  3570. ["exponential", 0.1*colorscale],
  3571. ["number",
  3572. ["get", Red3]
  3573. ],
  3574. 0, red0,
  3575. 0.0001, red10,
  3576. 0.1*colorscale, red20,
  3577. 0.2*colorscale, red30,
  3578. 0.3*colorscale, red40,
  3579. 0.4*colorscale, red50,
  3580. 0.5*colorscale, red60,
  3581. 0.6*colorscale, red70,
  3582. 0.7*colorscale, red80,
  3583. 0.8*colorscale, red90,
  3584. 0.9*colorscale, red100,
  3585. 1*colorscale, red100a
  3586. ]
  3587. map.setPaintProperty(layer2, 'fill-color', color3)
  3588. });
  3589. //red mouseover
  3590. map.on('mousemove', function(h) {
  3591. var states = map.queryRenderedFeatures(h.point, {
  3592. layer: [layer2]
  3593. });
  3594. // Must edit states.properties for candidate
  3595. if (states.length > 0) {
  3596. legendtitle.innerHTML = '<h2>Idaho 2014 Gov GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_GovTotal) + '</h3>'
  3597. epct.innerHTML = ' '
  3598. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTOtter*10000)/100 + '% </strong>'
  3599. } else {
  3600. legendtitle.innerHTML = '<h2>Idaho 2014 Gov GE Results by Precinct</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  3601. epct.innerHTML = ' '
  3602. fpct.innerHTML = ' <strong>' + RedStatewidePCT3 + '%</strong>'
  3603. }
  3604. });
  3605. }
  3606. else if (clickedLayer3 === "B") {var color3 = ColorBlue3;
  3607. // reset color slider & text
  3608. cssliderValue.textContent = '10 points';
  3609. csslider.value = '100'
  3610. colorpct510.textContent = '10'
  3611. colorpct520.textContent = '20'
  3612. colorpct530.textContent = '30'
  3613. colorpct540.textContent = '40'
  3614. colorpct550.textContent = '50'
  3615. colorpct560.textContent = '60'
  3616. colorpct570.textContent = '70'
  3617. colorpct580.textContent = '80'
  3618. colorpct590.textContent = '90'
  3619. colorpct600.textContent = '99'
  3620. colorpct600a.textContent = '100'
  3621. //set labels
  3622. candidateC.textContent = ''
  3623. colorvalue200b.style = background + white
  3624. colorvalue210.style = background + white
  3625. colorvalue220.style = background + white
  3626. colorvalue230.style = background + white
  3627. colorvalue240.style = background + white
  3628. colorvalue250.style = background + white
  3629. colorvalue260.style = background + white
  3630. colorvalue270.style = background + white
  3631. colorvalue280.style = background + white
  3632. colorvalue290.style = background + white
  3633. colorvalue300.style = background + white
  3634. colorvalue300a.style = background + white
  3635. candidateD.textContent = ''
  3636. colorvalue300b.style = background + white
  3637. colorvalue310.style = background + white
  3638. colorvalue320.style = background + white
  3639. colorvalue330.style = background + white
  3640. colorvalue340.style = background + white
  3641. colorvalue350.style = background + white
  3642. colorvalue360.style = background + white
  3643. colorvalue370.style = background + white
  3644. colorvalue380.style = background + white
  3645. colorvalue390.style = background + white
  3646. colorvalue400.style = background + white
  3647. colorvalue400a.style = background + white
  3648. candidateE.textContent = ''
  3649. colorvalue400b.style = background + white
  3650. colorvalue410.style = background + white
  3651. colorvalue420.style = background + white
  3652. colorvalue430.style = background + white
  3653. colorvalue440.style = background + white
  3654. colorvalue450.style = background + white
  3655. colorvalue460.style = background + white
  3656. colorvalue470.style = background + white
  3657. colorvalue480.style = background + white
  3658. colorvalue490.style = background + white
  3659. colorvalue500.style = background + white
  3660. colorvalue500a.style = background + white
  3661. candidateF.textContent = BlueCandidate3
  3662. colorvalue500b.style = background + blue0
  3663. colorvalue510.style = background + blue10
  3664. colorvalue520.style = background + blue20
  3665. colorvalue530.style = background + blue30
  3666. colorvalue540.style = background + blue40
  3667. colorvalue550.style = background + blue50
  3668. colorvalue560.style = background + blue60
  3669. colorvalue570.style = background + blue70
  3670. colorvalue580.style = background + blue80
  3671. colorvalue590.style = background + blue90
  3672. colorvalue600.style = background + blue100
  3673. colorvalue600a.style = background + blue100a
  3674. map.setPaintProperty(layer2, 'fill-color', color3)
  3675. csslider.addEventListener('input', function(y) {
  3676. // Adjust the colorscale. layer here is arbitrary - this could
  3677. // be another layer name found in your style or a custom layer
  3678. // added on the fly using `addSource`.
  3679. var colorscale = (y.target.value) / 100;
  3680.  
  3681. // Value indicator
  3682. cssliderValue.textContent = y.target.value/10 + ' points';
  3683. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3684. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3685. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3686. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3687. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3688. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3689. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3690. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3691. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3692. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3693. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3694. var color3 = ["interpolate",
  3695. ["exponential", 0.1],
  3696. ["number",
  3697. ["get", Blue3]
  3698. ],
  3699. 0, blue0,
  3700. 0.0001, blue10,
  3701. 0.1*colorscale, blue20,
  3702. 0.2*colorscale, blue30,
  3703. 0.3*colorscale, blue40,
  3704. 0.4*colorscale, blue50,
  3705. 0.5*colorscale, blue60,
  3706. 0.6*colorscale, blue70,
  3707. 0.7*colorscale, blue80,
  3708. 0.8*colorscale, blue90,
  3709. 0.9*colorscale, blue100,
  3710. 1*colorscale, blue100a,
  3711. ]
  3712. map.setPaintProperty(layer2, 'fill-color', color3)
  3713. });
  3714. //Blue Mouseover
  3715. map.on('mousemove', function(i) {
  3716. var states = map.queryRenderedFeatures(i.point, {
  3717. layer: [layer2]
  3718. });
  3719. // Must edit states.properties for candidate
  3720. if (states.length > 0) {
  3721. legendtitle.innerHTML = '<h2>Idaho 2014 Gov GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>Total Votes: ' + Math.round(states[0].properties.G_GovTotal) + '</h3>'
  3722. epct.innerHTML = ' '
  3723. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTBaluk*10000)/100 + '%</strong>';
  3724. } else {
  3725. legendtitle.innerHTML = '<h2>Idaho 2014 Gov GE Results by Precinct</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  3726. epct.innerHTML = ' '
  3727. fpct.innerHTML = ' <strong>' + BlueStatewidePCT3 + '%</strong>'
  3728. }
  3729. })
  3730. }
  3731. }
  3732. }
  3733. var layers3 = document.getElementById('menu3');
  3734. if (x3status >1){} else {layers3.appendChild(link3)}
  3735. }
  3736. }
  3737. else if (clickedLayer2014 === 'SPI')
  3738. {x2status ++;
  3739. x1.style.display = 'none'
  3740. x2.style.display = 'block'
  3741. x3.style.display = 'none'
  3742. x4.style.display = 'none'
  3743. var toggleableLayerIds2 = ['SPI','W','R','B'];
  3744. toggleableLayerNames2 = ['SPI','Winner','Ybarra (R)','Jones (D)'];
  3745. for (var i = 0; i < toggleableLayerIds2.length; i++) {
  3746. var id2 = toggleableLayerIds2[i];
  3747. var Names2 = toggleableLayerNames2[i];
  3748. var link2 = document.createElement('a');
  3749. link2.href = '#';
  3750. link2.className = 'none';
  3751. if(id2 === "SPI") {link2.className = 'header'}
  3752. if(id2 === 'W') {link2.className = 'active2'}
  3753. link2.shortcut = id2
  3754. link2.textContent = Names2
  3755. link2.onclick = function (g) {
  3756. var clickedLayer2 = this.shortcut;
  3757. var clickedName2 = this.textContent
  3758. var current2 = document.getElementsByClassName('active2');
  3759. if(current2[0].className === 'active2') {current2[0].className = current2[0].className.replace("active2","")}
  3760. this.className = 'active2';
  3761. // build a reference to the existing node to be replaced
  3762. g.preventDefault();
  3763. g.stopPropagation();
  3764.  
  3765. {if (clickedLayer2 === 'SPI') {}
  3766. else if (clickedLayer2 === "W")
  3767. {var color2 = Multi2;
  3768. // reset color slider & text
  3769. cssliderValue.textContent = '10 points';
  3770. csslider.value = '100'
  3771. colorpct510.textContent = '10'
  3772. colorpct520.textContent = '20'
  3773. colorpct530.textContent = '30'
  3774. colorpct540.textContent = '40'
  3775. colorpct550.textContent = '50'
  3776. colorpct560.textContent = '60'
  3777. colorpct570.textContent = '70'
  3778. colorpct580.textContent = '80'
  3779. colorpct590.textContent = '90'
  3780. colorpct600.textContent = '99'
  3781. colorpct600a.textContent = '100'
  3782. //set labels - must edit - copy and paste from default
  3783. candidateC.textContent = ''
  3784. colorvalue200b.style = background + white
  3785. colorvalue210.style = background + white
  3786. colorvalue220.style = background + white
  3787. colorvalue230.style = background + white
  3788. colorvalue240.style = background + white
  3789. colorvalue250.style = background + white
  3790. colorvalue260.style = background + white
  3791. colorvalue270.style = background + white
  3792. colorvalue280.style = background + white
  3793. colorvalue290.style = background + white
  3794. colorvalue300.style = background + white
  3795. colorvalue300a.style = background + white
  3796. candidateD.textContent = ''
  3797. colorvalue300b.style = background + white
  3798. colorvalue310.style = background + white
  3799. colorvalue320.style = background + white
  3800. colorvalue330.style = background + white
  3801. colorvalue340.style = background + white
  3802. colorvalue350.style = background + white
  3803. colorvalue360.style = background + white
  3804. colorvalue370.style = background + white
  3805. colorvalue380.style = background + white
  3806. colorvalue390.style = background + white
  3807. colorvalue400.style = background + white
  3808. colorvalue400a.style = background + white
  3809. candidateE.textContent = RedCandidate2
  3810. colorvalue400b.style = background + red0
  3811. colorvalue410.style = background + red10
  3812. colorvalue420.style = background + red20
  3813. colorvalue430.style = background + red30
  3814. colorvalue440.style = background + red40
  3815. colorvalue450.style = background + red50
  3816. colorvalue460.style = background + red60
  3817. colorvalue470.style = background + red70
  3818. colorvalue480.style = background + red80
  3819. colorvalue490.style = background + red90
  3820. colorvalue500.style = background + red100
  3821. colorvalue500a.style = background + red100a
  3822. candidateF.textContent = BlueCandidate2
  3823. colorvalue500b.style = background + blue0
  3824. colorvalue510.style = background + blue10
  3825. colorvalue520.style = background + blue20
  3826. colorvalue530.style = background + blue30
  3827. colorvalue540.style = background + blue40
  3828. colorvalue550.style = background + blue50
  3829. colorvalue560.style = background + blue60
  3830. colorvalue570.style = background + blue70
  3831. colorvalue580.style = background + blue80
  3832. colorvalue590.style = background + blue90
  3833. colorvalue600.style = background + blue100
  3834. colorvalue600a.style = background + blue100a
  3835. map.setPaintProperty(layer2, 'fill-color', color2);
  3836. csslider.addEventListener('input', function(y) {
  3837. // Adjust the colorscale. layer here is arbitrary - this could
  3838. // be another layer name found in your style or a custom layer
  3839. // added on the fly using `addSource`.
  3840. var colorscale = (y.target.value) / 100;
  3841.  
  3842. // Value indicator
  3843. cssliderValue.textContent = y.target.value/10 + ' points';
  3844. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  3845. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  3846. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  3847. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  3848. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  3849. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  3850. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  3851. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  3852. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  3853. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  3854. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  3855. var color2 = ["interpolate",
  3856. ["exponential", 0.1],
  3857. ["number",
  3858. ["get", Wincode2]
  3859. ],
  3860. 0, red0,
  3861. 0.0000001, red10,
  3862. 0.1*colorscale, red20,
  3863. 0.2*colorscale, red30,
  3864. 0.3*colorscale, red40,
  3865. 0.4*colorscale, red50,
  3866. 0.5*colorscale, red60,
  3867. 0.6*colorscale, red70,
  3868. 0.7*colorscale, red80,
  3869. 0.8*colorscale, red90,
  3870. 0.9*colorscale, red100,
  3871. 1, red100a,
  3872. 1.00000001, green10,
  3873. 1+(.1*colorscale), green20,
  3874. 1+(.2*colorscale), green30,
  3875. 1+(.3*colorscale), green40,
  3876. 1+(.4*colorscale), green50,
  3877. 1+(.5*colorscale), green60,
  3878. 1+(.6*colorscale), green70,
  3879. 1+(.7*colorscale), green80,
  3880. 1+(.8*colorscale), green90,
  3881. 1+(.9*colorscale), green100,
  3882. 2, green100a,
  3883. 2.00000001, blue10,
  3884. 2+(.1*colorscale), blue20,
  3885. 2+(.2*colorscale), blue30,
  3886. 2+(.3*colorscale), blue40,
  3887. 2+(.4*colorscale), blue50,
  3888. 2+(.5*colorscale), blue60,
  3889. 2+(.6*colorscale), blue70,
  3890. 2+(.7*colorscale), blue80,
  3891. 2+(.8*colorscale), blue90,
  3892. 2+(.9*colorscale), blue100,
  3893. 3, blue100a,
  3894. 3.00000001, yellow10,
  3895. 3+(.1*colorscale), yellow20,
  3896. 3+(.2*colorscale), yellow30,
  3897. 3+(.3*colorscale), yellow40,
  3898. 3+(.4*colorscale), yellow50,
  3899. 3+(.5*colorscale), yellow60,
  3900. 3+(.6*colorscale), yellow70,
  3901. 3+(.7*colorscale), yellow80,
  3902. 3+(.8*colorscale), yellow90,
  3903. 3+(.9*colorscale), yellow100,
  3904. 4, yellow100a,
  3905. 4.00000001, orange10,
  3906. 4+(.1*colorscale), orange20,
  3907. 4+(.2*colorscale), orange30,
  3908. 4+(.3*colorscale), orange40,
  3909. 4+(.4*colorscale), orange50,
  3910. 4+(.5*colorscale), orange60,
  3911. 4+(.6*colorscale), orange70,
  3912. 4+(.7*colorscale), orange80,
  3913. 4+(.8*colorscale), orange90,
  3914. 4+(.9*colorscale), orange100,
  3915. 5, orange100a,
  3916. 5.00000001, purple10,
  3917. 5+(.1*colorscale), purple20,
  3918. 5+(.2*colorscale), purple30,
  3919. 5+(.3*colorscale), purple40,
  3920. 5+(.4*colorscale), purple50,
  3921. 5+(.5*colorscale), purple60,
  3922. 5+(.6*colorscale), purple70,
  3923. 5+(.7*colorscale), purple80,
  3924. 5+(.8*colorscale), purple90,
  3925. 5+(.9*colorscale), purple100,
  3926. 6, purple100a,
  3927. 9, tie,
  3928. 10, novotes,
  3929. ]
  3930. map.setPaintProperty(layer2, 'fill-color', color2);
  3931. });
  3932. //Multi mouseover
  3933. map.on('mousemove', function(m) {
  3934. var states = map.queryRenderedFeatures(m.point, {
  3935. layer: [layer2]
  3936. });
  3937. // Must edit states.properties for candidate
  3938. if (states.length > 0) {
  3939. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>' + '</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_SupEdTot) + '</h3>'
  3940. epct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTWasde*10000)/100 + '%</strong>'
  3941. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTJones*10000)/100 + '%</strong>'
  3942. } else {
  3943. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct/County</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  3944. epct.innerHTML = ' <strong>' + RedStatewidePCT2 + '%</strong>'
  3945. fpct.innerHTML = ' <strong>' + BlueStatewidePCT2 + '%</strong>'
  3946. }
  3947. });
  3948. }
  3949. else if (clickedLayer2 === "R")
  3950. {var color2 = ColorRed2;
  3951. // reset color slider & text
  3952. cssliderValue.textContent = '10 points';
  3953. csslider.value = '100'
  3954. colorpct510.textContent = '10'
  3955. colorpct520.textContent = '20'
  3956. colorpct530.textContent = '30'
  3957. colorpct540.textContent = '40'
  3958. colorpct550.textContent = '50'
  3959. colorpct560.textContent = '60'
  3960. colorpct570.textContent = '70'
  3961. colorpct580.textContent = '80'
  3962. colorpct590.textContent = '90'
  3963. colorpct600.textContent = '99'
  3964. colorpct600a.textContent = '100'
  3965. //set labels
  3966. candidateC.textContent = ''
  3967. colorvalue200b.style = background + white
  3968. colorvalue210.style = background + white
  3969. colorvalue220.style = background + white
  3970. colorvalue230.style = background + white
  3971. colorvalue240.style = background + white
  3972. colorvalue250.style = background + white
  3973. colorvalue260.style = background + white
  3974. colorvalue270.style = background + white
  3975. colorvalue280.style = background + white
  3976. colorvalue290.style = background + white
  3977. colorvalue300.style = background + white
  3978. colorvalue300a.style = background + white
  3979. candidateD.textContent = ''
  3980. colorvalue300b.style = background + white
  3981. colorvalue310.style = background + white
  3982. colorvalue320.style = background + white
  3983. colorvalue330.style = background + white
  3984. colorvalue340.style = background + white
  3985. colorvalue350.style = background + white
  3986. colorvalue360.style = background + white
  3987. colorvalue370.style = background + white
  3988. colorvalue380.style = background + white
  3989. colorvalue390.style = background + white
  3990. colorvalue400.style = background + white
  3991. colorvalue400a.style = background + white
  3992. candidateE.textContent = ''
  3993. colorvalue400b.style = background + white
  3994. colorvalue410.style = background + white
  3995. colorvalue420.style = background + white
  3996. colorvalue430.style = background + white
  3997. colorvalue440.style = background + white
  3998. colorvalue450.style = background + white
  3999. colorvalue460.style = background + white
  4000. colorvalue470.style = background + white
  4001. colorvalue480.style = background + white
  4002. colorvalue490.style = background + white
  4003. colorvalue500.style = background + white
  4004. colorvalue500a.style = background + white
  4005. candidateF.textContent = RedCandidate2
  4006. colorvalue500b.style = background + red0
  4007. colorvalue510.style = background + red10
  4008. colorvalue520.style = background + red20
  4009. colorvalue530.style = background + red30
  4010. colorvalue540.style = background + red40
  4011. colorvalue550.style = background + red50
  4012. colorvalue560.style = background + red60
  4013. colorvalue570.style = background + red70
  4014. colorvalue580.style = background + red80
  4015. colorvalue590.style = background + red90
  4016. colorvalue600.style = background + red100
  4017. colorvalue600a.style = background + red100a
  4018. map.setPaintProperty(layer2, 'fill-color', color2)
  4019. csslider.addEventListener('input', function(y) {
  4020. // Adjust the colorscale. layer here is arbitrary - this could
  4021. // be another layer name found in your style or a custom layer
  4022. // added on the fly using `addSource`.
  4023. var colorscale = (y.target.value) / 100;
  4024.  
  4025. // Value indicator
  4026. cssliderValue.textContent = y.target.value/10 + ' points';
  4027. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  4028. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  4029. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  4030. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  4031. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  4032. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  4033. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  4034. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  4035. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  4036. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  4037. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  4038. var color2 = ["interpolate",
  4039. ["exponential", 0.1*colorscale],
  4040. ["number",
  4041. ["get", Red2]
  4042. ],
  4043. 0, red0,
  4044. 0.0001, red10,
  4045. 0.1*colorscale, red20,
  4046. 0.2*colorscale, red30,
  4047. 0.3*colorscale, red40,
  4048. 0.4*colorscale, red50,
  4049. 0.5*colorscale, red60,
  4050. 0.6*colorscale, red70,
  4051. 0.7*colorscale, red80,
  4052. 0.8*colorscale, red90,
  4053. 0.9*colorscale, red100,
  4054. 1*colorscale, red100a
  4055. ]
  4056. map.setPaintProperty(layer2, 'fill-color', color2)
  4057. });
  4058. //red mouseover
  4059. map.on('mousemove', function(h) {
  4060. var states = map.queryRenderedFeatures(h.point, {
  4061. layer: [layer2]
  4062. });
  4063. // Must edit states.properties for candidate
  4064. if (states.length > 0) {
  4065. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3><h3>Total Votes: ' + Math.round(states[0].properties.G_SupEdTot) + '</h3>'
  4066. epct.innerHTML = ' '
  4067. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTWasde*10000)/100 + '% </strong>'
  4068. } else {
  4069. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  4070. epct.innerHTML = ' '
  4071. fpct.innerHTML = ' <strong>' + RedStatewidePCT2 + '%</strong>'
  4072. }
  4073. });
  4074. }
  4075. else if (clickedLayer2 === "B") {var color2 = ColorBlue2;
  4076. // reset color slider & text
  4077. cssliderValue.textContent = '10 points';
  4078. csslider.value = '100'
  4079. colorpct510.textContent = '10'
  4080. colorpct520.textContent = '20'
  4081. colorpct530.textContent = '30'
  4082. colorpct540.textContent = '40'
  4083. colorpct550.textContent = '50'
  4084. colorpct560.textContent = '60'
  4085. colorpct570.textContent = '70'
  4086. colorpct580.textContent = '80'
  4087. colorpct590.textContent = '90'
  4088. colorpct600.textContent = '99'
  4089. colorpct600a.textContent = '100'
  4090. //set labels
  4091. candidateC.textContent = ''
  4092. colorvalue200b.style = background + white
  4093. colorvalue210.style = background + white
  4094. colorvalue220.style = background + white
  4095. colorvalue230.style = background + white
  4096. colorvalue240.style = background + white
  4097. colorvalue250.style = background + white
  4098. colorvalue260.style = background + white
  4099. colorvalue270.style = background + white
  4100. colorvalue280.style = background + white
  4101. colorvalue290.style = background + white
  4102. colorvalue300.style = background + white
  4103. colorvalue300a.style = background + white
  4104. candidateD.textContent = ''
  4105. colorvalue300b.style = background + white
  4106. colorvalue310.style = background + white
  4107. colorvalue320.style = background + white
  4108. colorvalue330.style = background + white
  4109. colorvalue340.style = background + white
  4110. colorvalue350.style = background + white
  4111. colorvalue360.style = background + white
  4112. colorvalue370.style = background + white
  4113. colorvalue380.style = background + white
  4114. colorvalue390.style = background + white
  4115. colorvalue400.style = background + white
  4116. colorvalue400a.style = background + white
  4117. candidateE.textContent = ''
  4118. colorvalue400b.style = background + white
  4119. colorvalue410.style = background + white
  4120. colorvalue420.style = background + white
  4121. colorvalue430.style = background + white
  4122. colorvalue440.style = background + white
  4123. colorvalue450.style = background + white
  4124. colorvalue460.style = background + white
  4125. colorvalue470.style = background + white
  4126. colorvalue480.style = background + white
  4127. colorvalue490.style = background + white
  4128. colorvalue500.style = background + white
  4129. colorvalue500a.style = background + white
  4130. candidateF.textContent = BlueCandidate2
  4131. colorvalue500b.style = background + blue0
  4132. colorvalue510.style = background + blue10
  4133. colorvalue520.style = background + blue20
  4134. colorvalue530.style = background + blue30
  4135. colorvalue540.style = background + blue40
  4136. colorvalue550.style = background + blue50
  4137. colorvalue560.style = background + blue60
  4138. colorvalue570.style = background + blue70
  4139. colorvalue580.style = background + blue80
  4140. colorvalue590.style = background + blue90
  4141. colorvalue600.style = background + blue100
  4142. colorvalue600a.style = background + blue100a
  4143. map.setPaintProperty(layer2, 'fill-color', color2)
  4144. csslider.addEventListener('input', function(y) {
  4145. // Adjust the colorscale. layer here is arbitrary - this could
  4146. // be another layer name found in your style or a custom layer
  4147. // added on the fly using `addSource`.
  4148. var colorscale = (y.target.value) / 100;
  4149.  
  4150. // Value indicator
  4151. cssliderValue.textContent = y.target.value/10 + ' points';
  4152. if(y.target.value>10) {colorpct510.textContent = Math.round(10*y.target.value/100)} else colorpct510.textContent = Math.round(10*y.target.value/10)/10
  4153. if(y.target.value>10) {colorpct520.textContent = Math.round(20*y.target.value/100)} else colorpct520.textContent = Math.round(20*y.target.value/10)/10
  4154. if(y.target.value>10) {colorpct530.textContent = Math.round(30*y.target.value/100)} else colorpct530.textContent = Math.round(30*y.target.value/10)/10
  4155. if(y.target.value>10) {colorpct540.textContent = Math.round(40*y.target.value/100)} else colorpct540.textContent = Math.round(40*y.target.value/10)/10
  4156. if(y.target.value>10) {colorpct550.textContent = Math.round(50*y.target.value/100)} else colorpct550.textContent = Math.round(50*y.target.value/10)/10
  4157. if(y.target.value>10) {colorpct560.textContent = Math.round(60*y.target.value/100)} else colorpct560.textContent = Math.round(60*y.target.value/10)/10
  4158. if(y.target.value>10) {colorpct570.textContent = Math.round(70*y.target.value/100)} else colorpct570.textContent = Math.round(70*y.target.value/10)/10
  4159. if(y.target.value>10) {colorpct580.textContent = Math.round(80*y.target.value/100)} else colorpct580.textContent = Math.round(80*y.target.value/10)/10
  4160. if(y.target.value>10) {colorpct590.textContent = Math.round(90*y.target.value/100)} else colorpct590.textContent = Math.round(90*y.target.value/10)/10
  4161. if(y.target.value>10) {colorpct600.textContent = Math.round(100*y.target.value/100)} else colorpct600.textContent = Math.round(100*y.target.value/10)/10
  4162. if(y.target.value>10) {colorpct600a.textContent = Math.round(100*y.target.value/100) + '%+'} else colorpct600a.textContent = Math.round(100*y.target.value/10)/10 + '%+'
  4163. var color2 = ["interpolate",
  4164. ["exponential", 0.1],
  4165. ["number",
  4166. ["get", Blue2]
  4167. ],
  4168. 0, blue0,
  4169. 0.0001, blue10,
  4170. 0.1*colorscale, blue20,
  4171. 0.2*colorscale, blue30,
  4172. 0.3*colorscale, blue40,
  4173. 0.4*colorscale, blue50,
  4174. 0.5*colorscale, blue60,
  4175. 0.6*colorscale, blue70,
  4176. 0.7*colorscale, blue80,
  4177. 0.8*colorscale, blue90,
  4178. 0.9*colorscale, blue100,
  4179. 1*colorscale, blue100a,
  4180. ]
  4181. map.setPaintProperty(layer2, 'fill-color', color2)
  4182. });
  4183. //Blue Mouseover
  4184. map.on('mousemove', function(i) {
  4185. var states = map.queryRenderedFeatures(i.point, {
  4186. layer: [layer2]
  4187. });
  4188. // Must edit states.properties for candidate
  4189. if (states.length > 0) {
  4190. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct</h2><h3>'+ states[0].properties.PRECINCT14 + '</h3><h3>' +states[0].properties.G_County + ' County</h3>Total Votes: ' + Math.round(states[0].properties.G_SupEdTot) + '</h3>'
  4191. epct.innerHTML = ' '
  4192. fpct.innerHTML = ' <strong>' + Math.round(states[0].properties.G_PCTJones*10000)/100 + '%</strong>';
  4193. } else {
  4194. legendtitle.innerHTML = '<h2>Idaho 2014 SPI GE Results by Precinct</h2><h3>Statewide Overall Result</h3><h3>Statewide Votes: ' + StatewideVotes2 + '</h3>'
  4195. epct.innerHTML = ' '
  4196. fpct.innerHTML = ' <strong>' + BlueStatewidePCT2 + '%</strong>'
  4197. }
  4198. })
  4199. }
  4200. }
  4201.  
  4202. }
  4203. var layers2 = document.getElementById('menu2');
  4204. if (x2status >1){} else {layers2.appendChild(link2)}
  4205. }
  4206. }
  4207. }
  4208.  
  4209.  
  4210. var layers2014 = document.getElementById('menu2014');
  4211. if (x2014status> 1) {} else {layers2014.appendChild(link2014) }
  4212. } }
  4213. }
  4214. var layers = document.getElementById('menu');
  4215. layers.appendChild(link);}
  4216. })
  4217.  
  4218. // listen for Change
  4219. slider.addEventListener('input', function(z) {
  4220. // Adjust the layers opacity. layer here is arbitrary - this could
  4221. // be another layer name found in your style or a custom layer
  4222. // added on the fly using `addSource`.
  4223. map.setPaintProperty(layer1,'fill-opacity', parseInt(z.target.value, 10) / 100);
  4224. map.setPaintProperty(layer2,'fill-opacity', parseInt(z.target.value, 10) / 100)
  4225.  
  4226. // Value indicator
  4227. sliderValue.textContent = z.target.value + '%';
  4228. })
  4229. //county layer - must edit or delete
  4230. map.on('load',
  4231. function () {map.addLayer({
  4232. id: layerCounty,
  4233. type: 'line',
  4234. source: {
  4235. type: 'vector',
  4236. // Mapbox tileset Map ID - must edit for different tilesets
  4237. url: 'mapbox://cinyc.7whn2ikm'
  4238. },
  4239. 'source-layer': layerCounty,
  4240. paint: {
  4241. 'line-color': "#000000",
  4242. 'line-width': 1
  4243. },},)})
  4244. map.on('mouseenter', layer1, function () {
  4245. map.getCanvas().style.cursor = 'pointer';
  4246. });
  4247.  
  4248. // Change it back to a pointer when it leaves.
  4249. map.on('mouseleave', layer1, function () {
  4250. map.getCanvas().style.cursor = '';
  4251. });
  4252.  
  4253. map.addControl(new MapboxGeocoder({
  4254. accessToken: mapboxgl.accessToken,
  4255.  
  4256. // limit results to US
  4257. country: 'us',
  4258.  
  4259. // apply a client side filter to further limit results to those strictly within
  4260. // Idaho
  4261. filter: function (item) {
  4262. // returns true if item contains Idaho region
  4263. return item.context.map(function (i) {
  4264. // id is in the form {index}.{id} per https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
  4265. // this example attempts to find the `region` named `Idaho`
  4266. return (i.id.split('.').shift() === 'region' && i.text === 'Idaho');
  4267. }).reduce(function (acc, cur) {
  4268. return acc || cur;
  4269. });
  4270. }
  4271. }));
  4272. map.addControl(new mapboxgl.FullscreenControl());
  4273. map.addControl(new mapboxgl.NavigationControl());
  4274. // the rest of the code will go in here
  4275. </script></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!