Onclick показать всплывающие окна с данными geoJSON реагировать-mapbox-gl - PullRequest
Новая
       9

Onclick показать всплывающие окна с данными geoJSON реагировать-mapbox-gl

0 голосов
/ 28 августа 2018

Я использую react-mapbox-gl и набираю некоторые geoJSON с данными о погоде для городов. Теперь у меня есть карта с кругами, и мне нужно показывать всплывающее окно со свойствами geoJSON, когда я нажимаю на каждый круг. Поэтому я не знаю, как реализовать эту функцию. 

...
    getAllWeather () {
        console.log(cities);
        var geojson = {
            "type":"FeatureCollection",
            "features": []
    };
        cities.forEach((elem) => {
            fetch("http://api.openweathermap.org/data/2.5/weather?id="+elem.id+"&APPID="*MY_ID*")
            .then(result => result.json())
            .then (value => {
                geojson.features.push({
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [elem.coord.lon, elem.coord.lat],
                        },
                        "properties": {
                            "title": elem.ua_name,
                            "description": "TEMP: " + value.main.temp
                        }
                });
            });
        });
        console.log(geojson);
        return geojson;
    }
    componentWillMount() {
        this.setState({weatherData:this.getAllWeather()});
    }
    componentDidMount() {
        const { center, zoom, minZoom } = this.state;

        Map = ReactMapboxGl({
            center: center,
            zoom,
            minZoom
          });
        }

  render() {
    const {center, zoom, minZoom, weatherData } = this.state;
    console.log(weatherData);
    return (
        <Map
        style= *MY-STYLE*
        containerStyle={{height: "100vh", width: "100vw", }}
        zoom={zoom}
        minZoom={minZoom}
        center={center}>
          <GeoJSONLayer data = {weatherData} circleLayout = {circleLayout} circlePaint = {circlePaint} circleOnClick= {this.onClickCircle}>
          </GeoJSONLayer>
      </Map>
    );
  }
...