-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update voter map zooms for mobile (#115)
<!--- Please write your PR name in the present imperative tense. Examples of that tense are: "Fix issue in the dispatcher where…", "Improve our handling of…", etc." For more information on Pull Requests, you can reference here: https://success.vanillaforums.com/kb/articles/228-using-pull-requests-to-contribute --> ## What does this PR do? update zooms ## How was the functionality tested and verified? All steps should be completed in the order presented, and you should not move on to the next step until the previous is completed. - [ ] The title of the `html` page is the same as the chart. - [ ] The `meta_data.json` file is filled in correctly (the description is a complete sentence, and the title is the same as the visual). - [ ] The chart and its associated pages have been minified using the `npm run process-visual` command. - [ ] The visual is styled according to style guidelines (centered title/subtitle, uses our color scheme, etc.). - [ ] This visual was approved by the lead developer. - [ ] The visual was approved by the story's authors and/or stakeholders. <!-- Replace this comment with a screenshot of your visual. --> --------- Co-authored-by: Nik4002 <[email protected]>
- Loading branch information
1 parent
23c9eec
commit 7a6415b
Showing
2 changed files
with
5 additions
and
4 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <html lang=en><title>Chicago Early Voting Locations</title><meta name=viewport content="width=device-width,initial-scale=1"><style>body{font-family:Georgia,'serif'}#chart-div{width:100%;height:400px}</style><link rel=stylesheet href=style/style.css><script src=https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js></script><link href=https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css rel=stylesheet><div class=map-container><div id=map></div><div id=sidebar><div class=header><h1>Early Voting Locations</h1><div class=subheader>Anyone in Chicago can vote at any Early Voting site, no matter where they live in the city. Same Day Registration is available at all Early Voting sites.<p><a target=_blank href=https://chicagoelections.gov/voting/early-voting>Find more information about early voting</a></div><div class=custom-select><select id=ca-zoom><option value=12 selected disabled selected>Zoom to Community Area</select></div></div><div id=details><div id=details-text><i>Hover or click a voting location on the map to see more details.</i></div></div></div></div><script>const STYLE="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",chiLocation=[-87.9,41.85],bounds=[[-88.489213,41.5],[-87,42.3]],isMobile=window.innerWidth<768,communities=[["albany_park","Albany Park"],["archer_heights","Archer Heights"],["armour_square","Armour Square"],["ashburn","Ashburn"],["auburn_gresham","Auburn Gresham"],["austin","Austin"],["avalon_park","Avalon Park"],["avondale","Avondale"],["belmont_cragin","Belmont Cragin"],["beverly","Beverly"],["bridgeport","Bridgeport"],["brighton_park","Brighton Park"],["burnside","Burnside"],["calumet_heights","Calumet Heights"],["chatham","Chatham"],["chicago_lawn","Chicago Lawn"],["clearing","Clearing"],["douglas","Douglas"],["dunning","Dunning"],["east_garfield_park","East Garfield Park"],["east_side","East Side"],["edgewater","Edgewater"],["edison_park","Edison Park"],["englewood","Englewood"],["forest_glen","Forest Glen"],["fuller_park","Fuller Park"],["gage_park","Gage Park"],["garfield_ridge","Garfield Ridge"],["grand_boulevard","Grand Boulevard"],["greater_grand_crossing","Greater Grand Crossing"],["hegewisch","Hegewisch"],["hermosa","Hermosa"],["humboldt_park","Humboldt Park"],["hyde_park","Hyde Park"],["irving_park","Irving Park"],["jefferson_park","Jefferson Park"],["kenwood","Kenwood"],["lake_view","Lake View"],["lincoln_park","Lincoln Park"],["lincoln_square","Lincoln Square"],["logan_square","Logan Square"],["loop","Loop"],["lower_west_side","Lower West Side"],["mckinley_park","Mckinley Park"],["montclare","Montclare"],["morgan_park","Morgan Park"],["mount_greenwood","Mount Greenwood"],["near_north_side","Near North Side"],["near_south_side","Near South Side"],["near_west_side","Near West Side"],["new_city","New City"],["north_center","North Center"],["north_lawndale","North Lawndale"],["north_park","North Park"],["norwood_park","Norwood Park"],["oakland","Oakland"],["ohare","Ohare"],["portage_park","Portage Park"],["pullman","Pullman"],["riverdale","Riverdale"],["rogers_park","Rogers Park"],["roseland","Roseland"],["south_chicago","South Chicago"],["south_deering","South Deering"],["south_lawndale","South Lawndale"],["south_shore","South Shore"],["uptown","Uptown"],["washington_heights","Washington Heights"],["washington_park","Washington Park"],["west_elsdon","West Elsdon"],["west_englewood","West Englewood"],["west_garfield_park","West Garfield Park"],["west_lawn","West Lawn"],["west_pullman","West Pullman"],["west_ridge","West Ridge"],["west_town","West Town"],["woodlawn","Woodlawn"]],HOURS={normal:{dates:"October 21 through November 5",hours:["Weekdays: 9 a.m. - 6 p.m.","Saturday: 9 a.m- 5 p.m.","Sunday: 10 a.m - 4 p.m.","Election Day: 6 a.m - 7 p.m. (November 5)"]},elections:{dates:"October 28 through November 4",hours:["Weekdays: 9 a.m. – 7 p.m.","Saturday: 9 a.m. – 5 p.m.","Sunday: 10 a.m. – 4 p.m.","<b>NOT open on Election Day</b>"]},supersite:{dates:"October 28 through November 4",hours:["Weekdays: 9 a.m. – 7 p.m.","Saturday: 9 a.m. – 5 p.m.","Sunday: 10 a.m. – 4 p.m.","<b>OPEN on Election Day</b>"]},school:{dates:"October 30 through November 1",hours:["10 a.m. to 5 p.m."]}};for(const e of communities){let a=document.querySelector("#ca-zoom"),o=document.createElement("option");o.value=e[0],o.text=e[1],a.appendChild(o)}let zoomer=document.querySelector("#ca-zoom");zoomer.addEventListener("change",(e=>{fetch(map.getSource("votingLocations")._data).then((e=>e.json())).then((a=>{zoomToCA(a,e.target.value)}))}));var map=new maplibregl.Map({container:"map",style:STYLE,center:chiLocation,maxZoom:17,minZoom:9.5,zoom:9.5,maxBounds:bounds,pitchWithRotate:!1,dragRotate:!1,touchZoomRotate:!1});function convertToCapitalCase(e){return e.toLowerCase().replace(/_/g," ").replace(/\b\w/g,(e=>e.toUpperCase()))}function showDetails(e){var a=e.features[0].properties.name,o=HOURS[e.features[0].properties.type].dates,t=HOURS[e.features[0].properties.type].hours,r=e.features[0].properties.street,n=e.features[0].properties.language,s=`<h3>${a}</h3>\n <h4>${r}</h4>\n <p>Vote ${o}:</p>\n <ul>${t.map((e=>`<li>${e}</li>`)).join("")}</ul>\n <p>Language assistance available in ${n}.</p>`;details=document.getElementById("details-text"),details.classList.remove("fade-in"),details.offsetHeight,details.classList.add("fade-in"),details.innerHTML=s}function zoomToCA(e,a){selection=e.features.filter((e=>e.properties.name==convertToCapitalCase(a)))[0],map.flyTo({center:[selection.properties.center_lon,selection.properties.center_lat],zoom:12})}map.addControl(new maplibregl.NavigationControl({showCompass:!1})),map.on("load",(async()=>{const e=await map.loadImage("style/democracy.png");map.addImage("vote",e.data);const a=await map.loadImage("style/school.png");map.addImage("school",a.data);const o=await map.loadImage("style/bank.png");map.addImage("bank",o.data),map.addSource("votingLocations",{type:"geojson",data:"data/voting_locations.geojson"}),map.addLayer({id:"votingLocations",type:"symbol",source:"votingLocations",layout:{"icon-image":["case",["==",["get","type"],"normal"],"vote",["==",["get","type"],"supersite"],"bank",["==",["get","type"],"elections"],"bank",["==",["get","type"],"school"],"school","vote"],"icon-allow-overlap":!0,"icon-size":["interpolate",["exponential",1.5],["zoom"],9,.03,11,.06]},filter:["!=","type","bounds"]}),map.addLayer({id:"boundary",type:"line",source:"votingLocations",paint:{"line-color":"black","line-width":.5},filter:["==","type","bounds"]}),map.on("mouseenter","votingLocations",(e=>{map.getCanvas().style.cursor="pointer",showDetails(e)})),map.on("click","votingLocations",(e=>{showDetails(e)})),map.on("mouseleave","votingLocations",(()=>{map.getCanvas().style.cursor=""}))}))</script> | ||
| <html lang=en><title>Chicago Early Voting Locations</title><meta name=viewport content="width=device-width,initial-scale=1"><style>body{font-family:Georgia,'serif'}#chart-div{width:100%;height:400px}</style><link rel=stylesheet href=style/style.css><script src=https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js></script><link href=https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css rel=stylesheet><div class=map-container><div id=map></div><div id=sidebar><div class=header><h1>Early Voting Locations</h1><div class=subheader>Anyone in Chicago can vote at any Early Voting site, no matter where they live in the city. Same Day Registration is available at all Early Voting sites.<p><a target=_blank href=https://chicagoelections.gov/voting/early-voting>Find more information about early voting</a></div><div class=custom-select><select id=ca-zoom><option value=12 selected disabled selected>Zoom to Community Area</select></div></div><div id=details><div id=details-text><i>Hover or click a voting location on the map to see more details.</i></div></div></div></div><script>const STYLE="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",chiLocation=[-87.9,41.85],hpLocation=[-87.7,41.9],bounds=[[-88.489213,41.5],[-87,42.3]],isMobile=window.innerWidth<768,communities=[["albany_park","Albany Park"],["archer_heights","Archer Heights"],["armour_square","Armour Square"],["ashburn","Ashburn"],["auburn_gresham","Auburn Gresham"],["austin","Austin"],["avalon_park","Avalon Park"],["avondale","Avondale"],["belmont_cragin","Belmont Cragin"],["beverly","Beverly"],["bridgeport","Bridgeport"],["brighton_park","Brighton Park"],["burnside","Burnside"],["calumet_heights","Calumet Heights"],["chatham","Chatham"],["chicago_lawn","Chicago Lawn"],["clearing","Clearing"],["douglas","Douglas"],["dunning","Dunning"],["east_garfield_park","East Garfield Park"],["east_side","East Side"],["edgewater","Edgewater"],["edison_park","Edison Park"],["englewood","Englewood"],["forest_glen","Forest Glen"],["fuller_park","Fuller Park"],["gage_park","Gage Park"],["garfield_ridge","Garfield Ridge"],["grand_boulevard","Grand Boulevard"],["greater_grand_crossing","Greater Grand Crossing"],["hegewisch","Hegewisch"],["hermosa","Hermosa"],["humboldt_park","Humboldt Park"],["hyde_park","Hyde Park"],["irving_park","Irving Park"],["jefferson_park","Jefferson Park"],["kenwood","Kenwood"],["lake_view","Lake View"],["lincoln_park","Lincoln Park"],["lincoln_square","Lincoln Square"],["logan_square","Logan Square"],["loop","Loop"],["lower_west_side","Lower West Side"],["mckinley_park","Mckinley Park"],["montclare","Montclare"],["morgan_park","Morgan Park"],["mount_greenwood","Mount Greenwood"],["near_north_side","Near North Side"],["near_south_side","Near South Side"],["near_west_side","Near West Side"],["new_city","New City"],["north_center","North Center"],["north_lawndale","North Lawndale"],["north_park","North Park"],["norwood_park","Norwood Park"],["oakland","Oakland"],["ohare","Ohare"],["portage_park","Portage Park"],["pullman","Pullman"],["riverdale","Riverdale"],["rogers_park","Rogers Park"],["roseland","Roseland"],["south_chicago","South Chicago"],["south_deering","South Deering"],["south_lawndale","South Lawndale"],["south_shore","South Shore"],["uptown","Uptown"],["washington_heights","Washington Heights"],["washington_park","Washington Park"],["west_elsdon","West Elsdon"],["west_englewood","West Englewood"],["west_garfield_park","West Garfield Park"],["west_lawn","West Lawn"],["west_pullman","West Pullman"],["west_ridge","West Ridge"],["west_town","West Town"],["woodlawn","Woodlawn"]],HOURS={normal:{dates:"October 21 through November 5",hours:["Weekdays: 9 a.m. - 6 p.m.","Saturday: 9 a.m- 5 p.m.","Sunday: 10 a.m - 4 p.m.","Election Day: 6 a.m - 7 p.m. (November 5)"]},elections:{dates:"October 28 through November 4",hours:["Weekdays: 9 a.m. – 7 p.m.","Saturday: 9 a.m. – 5 p.m.","Sunday: 10 a.m. – 4 p.m.","<b>NOT open on Election Day</b>"]},supersite:{dates:"October 28 through November 4",hours:["Weekdays: 9 a.m. – 7 p.m.","Saturday: 9 a.m. – 5 p.m.","Sunday: 10 a.m. – 4 p.m.","<b>OPEN on Election Day</b>"]},school:{dates:"October 30 through November 1",hours:["10 a.m. to 5 p.m."]}};for(const e of communities){let a=document.querySelector("#ca-zoom"),o=document.createElement("option");o.value=e[0],o.text=e[1],a.appendChild(o)}let zoomer=document.querySelector("#ca-zoom");zoomer.addEventListener("change",(e=>{fetch(map.getSource("votingLocations")._data).then((e=>e.json())).then((a=>{zoomToCA(a,e.target.value)}))}));var map=new maplibregl.Map({container:"map",style:STYLE,center:isMobile?hpLocation:chiLocation,maxZoom:17,minZoom:9.5,zoom:9.5,maxBounds:bounds,pitchWithRotate:!1,dragRotate:!1,touchZoomRotate:!1});function convertToCapitalCase(e){return e.toLowerCase().replace(/_/g," ").replace(/\b\w/g,(e=>e.toUpperCase()))}function showDetails(e){var a=e.features[0].properties.name,o=HOURS[e.features[0].properties.type].dates,t=HOURS[e.features[0].properties.type].hours,r=e.features[0].properties.street,n=e.features[0].properties.language,s=`<h3>${a}</h3>\n <h4>${r}</h4>\n <p>Vote ${o}:</p>\n <ul>${t.map((e=>`<li>${e}</li>`)).join("")}</ul>\n <p>Language assistance available in ${n}.</p>`;details=document.getElementById("details-text"),details.classList.remove("fade-in"),details.offsetHeight,details.classList.add("fade-in"),details.innerHTML=s}function zoomToCA(e,a){selection=e.features.filter((e=>e.properties.name==convertToCapitalCase(a)))[0],map.flyTo({center:[selection.properties.center_lon-(isMobile?0:.02),selection.properties.center_lat+(isMobile?.02:0)],zoom:12})}map.addControl(new maplibregl.NavigationControl({showCompass:!1})),map.on("load",(async()=>{const e=await map.loadImage("style/democracy.png");map.addImage("vote",e.data);const a=await map.loadImage("style/school.png");map.addImage("school",a.data);const o=await map.loadImage("style/bank.png");map.addImage("bank",o.data),map.addSource("votingLocations",{type:"geojson",data:"data/voting_locations.geojson"}),map.addLayer({id:"votingLocations",type:"symbol",source:"votingLocations",layout:{"icon-image":["case",["==",["get","type"],"normal"],"vote",["==",["get","type"],"supersite"],"bank",["==",["get","type"],"elections"],"bank",["==",["get","type"],"school"],"school","vote"],"icon-allow-overlap":!0,"icon-size":["interpolate",["exponential",1.5],["zoom"],9,.03,11,.06]},filter:["!=","type","bounds"]}),map.addLayer({id:"boundary",type:"line",source:"votingLocations",paint:{"line-color":"black","line-width":.5},filter:["==","type","bounds"]}),map.on("mouseenter","votingLocations",(e=>{map.getCanvas().style.cursor="pointer",showDetails(e)})),map.on("click","votingLocations",(e=>{showDetails(e)})),map.on("mouseleave","votingLocations",(()=>{map.getCanvas().style.cursor=""}))}))</script> |