I hava a this problem "Error: @math.gl/web-mercator: assertion failed. "

Question

import { useState , useEffect} from 'react';
import ReactMapGL,{Marker, Popup} from 'react-map-gl';
import RoomIcon from '@material-ui/icons/Room';
import StarIcon from '@material-ui/icons/Star';
import axios from 'axios';
import "./app.css"
//import Pin from '../../backend/models/Pin';
//import {format} from 'timeago.js'


function App() {
  
  const [Pins, setPins] = useState([])
  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 37,
    longitude: 80,
    zoom: 4
  });

  useEffect(() => {
    const getPins = async () => {
      try{
        const res = await axios.get('/pins');
        console.log(res.data)
        setPins(res.data)
      }catch(err){
        console.log(err)
      }
    }
    getPins();
  }, [])




  return (
    <div className="App">
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken ={process.env.REACT_APP_MAPBOX}
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapStyle="mapbox://styles/wondevel/cksmjceeh28l417lkrdedsoqn"
      >
      
      {/* useState의 Pin을 이용해서 map에 pin을 띄운다. */}
      {Pins.map(p =>(
      <>
      {/* marker */}
      <Marker 
        latitude={p.lat} 
        longitude={p.ling} 
        offsetLeft={-20} 
        offsetTop={-10}>
      {/* pin icon */}
      <RoomIcon style={{ fontSize: viewport.zoom *7, color:"slateblue"}}/> 
      {/*  <RoomIcon style={{ fontSize: viewport.zoom *7}}/>  지도 줌 할떄마다 핀포인트 커지게 하는 부분 */}
      </Marker>
      {/* popup */}
      <Popup
          latitude={p.lat}
          longitude={p.long}
          closeButton={true}
          closeOnClick={false}
          anchor="left" >
          <div className="card">
            <label>Place</label>
            <h4 className="place">{p.title}</h4>
            <label>Review</label>
            <p className="desc">{p.desc}</p>
            <label>Rating</label>
            <div className="starts">
              <StarIcon className="star" />
              <StarIcon className="star" />
              <StarIcon className="star" />
              <StarIcon className="star" />
              <StarIcon className="star" />
            </div>
            <label>Information</label>
            <span className="username"> Create by <b>{p.username}</b></span>
            <span className="date"> 1 hour ago </span>
          </div>
        </Popup>
       </>
        ))}
      </ReactMapGL>
    </div>

  );
}

export default App;

this is my code. but when I run this page the problem occurred. The problem is "Error: @math.gl/web-mercator: assertion failed." I don't know what to do. I try to research the other website but I didn't found any solution. plz, help me, someone.

Error: @math.gl/web-mercator: assertion failed. assert View compiled lngLatToWorld

Answer 1

I guess the problem has occurred because the use effect has not yet fetched the data (latitude and longitude) of pins and the map got rendered before that. I guess a better solution would be to add a loader till the data is fetched in use effect.

Answer 2

This happen to me last week. The problem is i put wrong data for my latitude and longitude in database. i put wrong data at my database (misplaced)

error appeared

Then after i fix my data in database, it appeared.

fixed latitude and longitude in database

it work my map after fixed

Answer 3

i ran into same problem, issue was in the database, in my case, i posted this one request without latitudes and longitudes defined.

Answer 4

I had the same problem and I found that the problem was with my latitude and longitude values.

1. Make sure that you have the lon & lat values available.
2. Make sure that the lon & lat values are not in string format but are rather number format.