Last active
November 21, 2022 22:28
-
-
Save mehak-sachdeva/6e101db9fc8b9000bdf14d8162f9e891 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Leaflet Layers Control Example</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" /> | |
| <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <style> | |
| #map { | |
| width: 1420px; | |
| height: 760px; | |
| align: center; | |
| } | |
| .info { | |
| padding: 16px 10px; | |
| font: 14px/16px Arial, Helvetica, sans-serif; | |
| background: white; | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
| border-radius: 5px; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: 'white'; | |
| } | |
| .legend { | |
| text-align: left; | |
| line-height: 18px; | |
| color: #555; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| button { | |
| position:absolute; | |
| top:410px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script> | |
| <script type="text/javascript"> | |
| var prim_res="https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson"; | |
| var map = L.map('map').setView([39.0119, -98.4842], 5); | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attributions">CARTO</a>' | |
| }).addTo(map); | |
| var info = L.control(); | |
| info.onAdd = function(map) { | |
| this._div = L.DomUtil.create('div', 'info'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function(props) { | |
| this._div.innerHTML = '<h4>US Voter Registration Data Availability 2016</h4>' + '<br />' + (props ? | |
| '<b>Name of State: ' + props.NAME + '</b><br /></br />' + | |
| '<b>Number of voting precincts: ' + props.precincts_number + '</b><br /></br />' + | |
| '<b>Price of voter registration files: $' + props.price + '</b><br /><br />' + | |
| '<b>Party preference available? ' +props.preference + '</b><br />' | |
| : 'Hover over a state'); | |
| }; | |
| info.addTo(map); | |
| // get color depending on Bernie Sanders vote fractions value | |
| function getColor(b, h) { | |
| return b <=37000 & b>25000 ? '#49006a' : | |
| b <=25000 & b>20000 ? '#7a0177' : | |
| b <=20000 & b>15000 ? '#ae017e' : | |
| b <= 15000 & b>5200 ? '#dd3497': | |
| b <=5200 & b>1200 ? '#f768a1': | |
| b <=1200 & b>500 ? '#fa9fb5': | |
| b <= 500 & b>0 ? '#fcc5c0': | |
| '#fde0dd' ; | |
| } | |
| function style(feature) { | |
| return { | |
| weight: 0.6, | |
| opacity: 1, | |
| color: 'white', | |
| dashArray: '2', | |
| fillOpacity: 0.6, | |
| fillColor: getColor(feature.properties.price) | |
| }; | |
| } | |
| function highlightFeature(e) { | |
| console.log('highlightFeature was entered'); | |
| var layer = e.target; | |
| layer.setStyle({ | |
| weight: 2, | |
| color: 'grey', | |
| dashArray: '', | |
| fillOpacity: 0.7 | |
| }); | |
| if (!L.Browser.ie && !L.Browser.opera) { | |
| layer.bringToFront(); | |
| } | |
| info.update(layer.feature.properties); | |
| } | |
| var geojson; | |
| function resetHighlight(e) { | |
| geojson.resetStyle(e.target); | |
| info.update(); | |
| } | |
| function zoomToFeature(e) { | |
| console.log('zoomToFeature was triggered'); | |
| map.fitBounds(e.target.getBounds()); | |
| console.log(e); | |
| } | |
| function onEachFeature(feature, layer) { | |
| console.log('onEachFeature was entered'); | |
| layer.on({ | |
| mouseover: highlightFeature, | |
| mouseout: resetHighlight, | |
| click: zoomToFeature | |
| }); | |
| } | |
| $.getJSON ("https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson", function(data) { | |
| console.log('geojson retrieved'); | |
| geojson = L.geoJson(data, { | |
| style: style, | |
| onEachFeature: onEachFeature | |
| }).addTo(map); | |
| }); | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| grades = [37000.0,25000,20000,15000.0,5200.0,1200.0,500.0,0.0], | |
| labels = ['<strong>Price estimate for voter files</strong>'], | |
| from, to; | |
| var x=30000; | |
| for (var i = 0; i < grades.length; i++) { | |
| from = grades[i]; | |
| to = grades[i + 1]; | |
| labels.push( | |
| '<i style="background:' + getColor(from,to-1) + '"></i> ' + | |
| from + (to ? '–' + to : '+')); | |
| x-=0.14; | |
| } | |
| div.innerHTML = labels.join('<br>'); | |
| return div; | |
| }; | |
| legend.addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment