Javascript Adicionar Markers Mapbox com React

[eduardomrigo01]

Boa noite, estou fazendo o TCC e está impossível inserir os Markers (aqueles pings) no mapa, segue a parte do código:

 

import * as React from "react";
import { useRef, useEffect, useState, useContext } from "react";
import { Link, Redirect } from "react-router-dom";

import NoInternet from "../../no internet/no-internet";

import "./jogo.css";
import back from "../../../assets/icons/blackback.svg";

import mapboxgl from "mapbox-gl";
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_PRIVATE_TOKEN;

export default function Jogo() {
  //pensando em congelar a latitude e longitude da região ABCD e diminuir o zoom do mapa
  const [coords, setCoords] = useState({
    lat: -23.6858501,
    long: -46.564429999999994,
  });
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setCoords({
          lat: pos.coords.latitude,
          long: pos.coords.longitude,
        });
      },
      (err) => {
        //será executada quando ocorrer um erro na solicitação da posição
        alert("É necessário que o uso da localização seja autorizado!");
      }z
    );
  }, []);

  const [online] = useState(navigator.onLine);
  return <>{!online ? <NoInternet /> : <ComponenteMapa coords={coords} />}</>;
}

/* MAPA FOI COMPONENTIZADO PARA MELHOR MANUTENÇÃO DAS INFORMAÇÕES */
function Mapa({ coords }) {
  const marker = new mapboxgl.Marker({
    color: "#ff1500",
    draggable: false,
  }).setLngLat([-23.6858501, -46.56443]);

  const mapContainer = useRef(null);
  const map = useRef(null);
  const [zoom] = useState(10);
  const [latitude] = useState(coords.lat);
  const [longitude] = useState(coords.long);

  useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: process.env.REACT_APP_MAPBOX_STYLE_URL,
      center: [longitude, latitude],
      zoom: zoom,
    });
  });
  return (
    <div>
      <div ref={mapContainer} className="map-container"></div>
    </div>
  );
}

function ComponenteMapa({ coords }) {
  return (
    <>
      <Link to="/home">
        <img src={back} alt="" className="sair-aba-jogo" />
      </Link>
      <Mapa coords={coords} />
    </>
  );
}

 

O mapa funciona normal na tela, mas o marker não aparece..

[Rui Guilherme]

Acredito que seja uma boa você dar uma revisada na documentação do mapbox-gl...

 

https://docs.mapbox.com/help/getting-started/add-markers/

 

Porém não achei na documentação se é necessario alguma tratativa diferente no React.

 

Provavelmente você está usando NextJS ou isso é algum bug no React mesmo e o mapbox-gl não está conseguindo lidar com a falta do document e window, se for o caso você precisa tentar colocar o Marker dentro do useEffect também;

 

Só um detalhe sobre o useEffect, pra evitar laços infinitos que podem quebrar ou deixar sua aplicação lenta, é uma boa fazer isso:

useEffect(() => {
  // resto do código
}, [map]);
// é uma boa passar o map aq também, para evitar problemas no state entre o servidor e o cliente 

 

Eu já fiz alguns códigos que levam mapas com react, mas no caso eu usei o Leaflet, talvez resolva seu problema e te ofereça mais opções.

https://github.com/PaulLeCam/react-leaflet

 

React-leaflet é citado oficialmente no leafletjs https://leafletjs.com/plugins.html

[eduardomrigo01]

@Rui Guilherme Muito obrigado Rui, darei mais uma olhada na documentação, e irei analisar isso do useEffect, valeeeu