Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Resaltado de sintaxis

chicago ward map with props callback

Creado El diff nunca expira
2 eliminaciones
53 líneas
3 adiciones
51 líneas
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
Diferencias guardadas