Я использую пакет https://www.npmjs.com/package/react-map-gl и оттуда пытаюсь реализовать этот пример пользовательских данных, но он либо отображает только кружок на пустой странице или карте, но без кружков. C
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import ReactMapGL from 'react-map-gl';
import React from 'react';
import { connect } from 'react-redux';
import { extraLayer } from 'Components/dataViewElements/Map/test.js';
import { fromJS } from 'immutable';
const MAPBOX_TOKEN =
'pk.TOKEN_HERE';
const mapStyle = fromJS({
version: 8,
sources: {
'mapbox-streets': {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v6',
},
points: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [-122.45, 37.78] },
},
],
},
},
},
layers: [
{
id: 'my-layer',
type: 'circle',
source: 'points',
paint: {
'circle-color': '#f00',
'circle-radius': 4,
},
},
],
});
class MapElement extends React.Component {
state = {
viewport: {
width: '70vw',
height: '70vh',
latitude: -24.4698,
longitude: 135.0251,
zoom: 4,
},
};
_onViewportChange = viewport => this.setState({ viewport });
render() {
const { viewport } = this.state;
console.log(mapStyle);
return (
<ReactMapGL
{...viewport}
mapStyle={mapStyle}
// mapStyle={mapStyle}
mapboxApiAccessToken={MAPBOX_TOKEN}
onViewportChange={this._onViewportChange}
/>
);
}
}
const mapStateToProps = (state, props) => ({});
const mapDispatchToProps = dispatch => ({});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(MapElement);
Был бы очень признателен за любую помощь, пытался решить эту проблему в течение нескольких часов, так что подумайте, следует опубликовать ее здесь.