[英]Error when trying to map a choropleth using react-leaflet-choropleth: Cannot read property 'map' of undefined
I am attempting to make a choropleth in react
using react-leaflet-choropleth
.我正在尝试使用
react
react-leaflet-choropleth
。
I have leaflet working fine.我的 leaflet 工作正常。
Now when I try to load a geojson (crimes_by_district) using the library I am getting an error when mapping through the features, specifically:现在,当我尝试使用库加载geojson (crimes_by_district)时,在映射功能时遇到错误,特别是:
Cannot read property 'map' of undefined
It seems I'm not accurately referencing the right array to map.看来我没有准确地将正确的数组引用到 map。
I have looked at the issues in the git repo and tried the suggestions with no luck.我查看了 git 存储库中的问题并尝试了这些建议,但没有成功。 I am wondering if perhaps I am referencing the incorrect values from the
geoJson
I am using.我想知道我是否从我正在使用的
geoJson
中引用了不正确的值。
Below is my code:下面是我的代码:
Leaf.js (rendered in App.js) Leaf.js (在 App.js 中渲染)
import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import classes from './leaf.module.css'
import Choropleth from 'react-leaflet-choropleth'
import geojson from "./assets/crimes_by_district.geojson";
const style = {
fillColor: '#F28F3B',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
};
class Leaf extends Component {
render() {
return (
<Map>
<Choropleth
data= {{type: 'FeatureCollection', features: geojson.features}}
valueProperty={(feature) => feature.properties.value}
// visible={(feature) => feature.id !== active.id}
scale={['#b3cde0', '#011f4b']}
steps={7}
mode='e'
style={style}
onEachFeature={
(feature, layer) => layer.bindPopup(feature.properties.label)
}
ref={(el) => this.choropleth = el.leafletElement}
/>
</Map>
);
}
}
export default Leaf;
Create your own choropleth wrapper
using the same choropleth library similar to the extension you include, as react-leaflet-choropleth
seems to be outdated:使用与您包含的扩展类似的相同 choropleth 库创建您自己的
choropleth wrapper
,因为react-leaflet-choropleth
似乎已过时:
function Choropleth() {
const { map } = useLeaflet();
useEffect(() => {
fetch(
"https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/examples/basic/crimes_by_district.geojson"
)
.then((response) => response.json())
.then((geojson) => {
L.choropleth(geojson, {
valueProperty: "incidents", // which property in the features to use
scale: ["white", "red"], // chroma.js scale - include as many as you like
steps: 5, // number of breaks or steps in range
mode: "q", // q for quantile, e for equidistant, k for k-means
style,
onEachFeature: function (feature, layer) {
layer.bindPopup(
"District " +
feature.properties.dist_num +
"<br>" +
feature.properties.incidents.toLocaleString() +
" incidents"
);
}
}).addTo(map);
});
}, []);
return null;
}
and then import it as a Map child:然后将其作为 Map 子项导入:
<Map center={position} zoom={11} style={{ height: "100vh" }}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Choropleth />
</Map>
you can extend it even further by passing various variables you need as props.您可以通过传递所需的各种变量作为道具来进一步扩展它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.