Compare text

Find the difference between two text files

Real-time editor
Hide unchanged lines
Disable line wrap
Layout
Diff precision
Syntax highlighting

chicago ward map with props callback

Created Diff never expires
2 removals
53 lines
3 additions
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
Saved diffs