как реализовать basi c mapbox gl в реакции

Question

Привет! Я использовал пример кода в mapbox, но он ничего не показывает (ширина = 0), пожалуйста, объясните мне, как реализовать карту в реакции js. вот мой индекс. js файл:

mapboxgl.accessToken =
  "My token";

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 2
    };
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });

    map.on("move", () => {
      this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });
  }

Answer 1

Вы должны указать ширину и высоту для вашего mapbox contianer. Вот как это работает:

import React from "react";
import "./styles.css";
import mapboxgl from "mapbox-gl";

mapboxgl.accessToken =
  "<token>";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 2
    };
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });

    map.on("move", () => {
      this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });
  }

  render() {
    return (
      <div
        id="map"
        style={{
          width: "100vw",
          height: "100vh"
        }}
      />
    );
  }
}