Ir ao conteúdo
  • Cadastre-se

Javascript Adicionar Markers Mapbox com React


Posts recomendados

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..

Link para o comentário
Compartilhar em outros sites

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

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!