chicago ward map with props callback
4 removals
| Words removed | 18 |
| Total words | 131 |
| Words removed (%) | 13.74 |
53 lines
3 additions
| Words added | 4 |
| Total words | 117 |
| Words added (%) | 3.42 |
51 lines
function ChicagoWardMap() {
function ChicagoWardMap({ selectWard }) {
const [wardBorders, setWardBorders] = useState(null)
const [wardBorders, setWardBorders] = useState(null)
const [ward, setWard] = useState(null)
useEffect(() => {
useEffect(() => {
// get the geojson
// get the geojson
fetch('https://raw.githubusercontent.com/datamade/chicago-judicial-elections/master/wards/wards_2012.geojson')
fetch('https://raw.githubusercontent.com/datamade/chicago-judicial-elections/master/wards/wards_2012.geojson')
.then((res) => res.json()) // parse the response into json
.then((res) => res.json()) // parse the response into json
.then((geojson) => {
.then((geojson) => {
setWardBorders(geojson) // with the geojson, set the state for wardBorders
setWardBorders(geojson) // with the geojson, set the state for wardBorders
})
})
}, [setWardBorders])
}, [setWardBorders])
const fill = {
const fill = {
fillColor: '#daf0ce',
fillColor: '#daf0ce',
weight: 0.5,
weight: 0.5,
opacity: 0.4,
opacity: 0.4,
color: '#666',
color: '#666',
fillOpacity: 0.5
fillOpacity: 0.5
}
}
function onWardClick(e) {
function onWardClick(e) {
const layer = e.target
const layer = e.target
const layerFeature = layer?.feature?.properties
const layerFeature = layer?.feature?.properties
? layer.feature.properties
? layer.feature.properties
: null
: null
setWard(layerFeature)
selectWard(layerFeature)
}
}
function eventHandlersOnEachFeature(feature, layer) {
function eventHandlersOnEachFeature(feature, layer) {
layer.on({
layer.on({
click: onWardClick
click: onWardClick
})
})
}
}
return (
return (
<>
<>
<BaseMap center={[41.8781, -87.6298]} zoom={10}>
<BaseMap center={[41.8781, -87.6298]} zoom={10}>
{/* this will only show when wardBorders has a value */}
{/* this will only show when wardBorders has a value */}
{wardBorders && <GeoJSON
{wardBorders && <GeoJSON
key='ward-layer'
key='ward-layer'
data={wardBorders}
data={wardBorders}
style={fill}
style={fill}
onEachFeature={eventHandlersOnEachFeature} />}
onEachFeature={eventHandlersOnEachFeature} />}
</BaseMap>
</BaseMap>
{ward && <p>Ward {ward.ward}'s shape_area = {ward.shape_area} and shape_leng = {ward.shape_leng}</p>}
</>
</>
)
)
}
}
export default ChicagoWardMap
export default ChicagoWardMap