Stack Overflow
Stack Overflow

Questions tagged [react-map-gl]

React friendly API wrapper around MapboxGL JS.

291 questions
1
vote
0 answers

How to alias node_module in NextJS + TypeScript setup?

We have NextJS + TypeScript setup and were looking to integrate Maplibre, which is basically a fork of Mapbox BSD. Also there's this nice wrapper around Mapbox - React Map GL, however it is not designed to work with Maplibre. Workaround is to create…
jayarjo
  • 16,124
  • 24
  • 94
  • 138
1
vote
1 answer

How do I get deck.gl and react-map-gl to display correctly?

Here is a code sandbox example where I am trying to display a map inside of a specific component. But, I am not able to get the deck.gl and react-map-gl divs to live inside their parent. instead, they spill out to the extent of the document…
Ax0n
  • 436
  • 1
  • 4
  • 15
1
vote
1 answer

Why does my mapbox component (in Ionic app) work on browser/localhost but not when I bring it to my Android emulator?

Hi I'm making an ionic app and can't get my mapbox component to work on my android emulator despite working in the browser. I tried to make a really simplified version of my mapbox component here: import React, {useState} from 'react'; import…
filifunk
  • 543
  • 1
  • 6
  • 18
1
vote
0 answers

How to set dynamic coordinates on React map gl viewport

Im using React Map Gl to display maps on my app and right now I would like to add dynamic coordinates to show a place according to what was chosen. I cant see a way of doing that, i can only put the exact coordinates in the viewport const…
Rowan Frank
  • 117
  • 6
1
vote
4 answers

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

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…
water Yi
  • 23
  • 3
1
vote
1 answer

Show popup for only one Marker react map gl

I'm using react-map-gl and states so that when a marker is clicked on the popupOpen is set to true and the popup shows up. This works with maps with only one marker but when I use a map fuction to send coords of multiple markers, clicking on any of…
starbvuks
  • 61
  • 2
  • 8
1
vote
1 answer

React functional array delay to update

Helllo everyone, I have this issue where I am successfully sorting the array state of an object alphabetically using their cities but the problem is that the array that is getting visualized only updates after I search something on the UI. I tried…
lipo
  • 117
  • 1
  • 7
1
vote
0 answers

How to make a div 100% width of the browser window when the side-bar is not collapsed?

I'm new in Reactjs, nevertheless I was trying to make a beautiful desktop platform that contains a map. In order to achieve this I used react-map-gl and react-pro-sidebar libraries. You can look at the libraries here…
Lucas Seabra
  • 63
  • 1
  • 1
  • 5
1
vote
1 answer

How to use maplibre-gl with react-map-gl

I am currently taking my first steps in using maplibre together with react-map-gl. I have read the documentation about how to use a fork of mapbox. I have adapted webpack-config. I use a create-react-app project with rewind. This is my…
astridx
  • 6,581
  • 4
  • 17
  • 35
1
vote
1 answer

Mapbox markers moving in wrong position while zooming/panning

currently, I'm displaying a single copy of the map. while panning at the edge of the graph or zooming out further from the makers changing their positions. I want to have the markers stay in their position even when these operations are done how can…
Syntax Hacker
  • 314
  • 1
  • 5
  • 18
1
vote
1 answer

Mapbox Token doesn't work in React App after build stage

I use Mapbox layers in my React app using 'react-map-gl' library. Having the Token added in the code of App.js like that: const TOKEN = 'Token'; //
Pavel Popov
  • 21
  • 2
1
vote
1 answer

How to use a local GeoJSON file with Mapbox in React

Good day, I am using Mapbox in React to make a map with a polygon layer. The issue is that I have to use a local GeoJSON file for the polygon layer and I cannot use a URL. I have seen some solutions, but none in React. Here is the code with the URL…
CarlaVdB
  • 165
  • 11
1
vote
0 answers

Source and Layer component does not show if data changes

I am trying to build a GPS-Tracker using react-map-gl and want to draw a line with the data retreived from the where-is-iss-API. If the coordinates in the source JSON are initilized staticaly the line is shown. const [geojson, setGeojson]: any =…
gobsej
  • 55
  • 5
1
vote
1 answer

Using Glyphs with Amazon Location Service and Mapbox-GL

I am using the Amazon Location Service with React, react-map-gl and Mapbox-GL. I can successfully load ESRI and HERE maps which suggests my authentication is OK but I seem to have trouble with accessing Glyphs (fonts). I am trying to add a cluster…
Graham Hesketh
  • 317
  • 3
  • 16
1
vote
1 answer

react-map-gl and using useContext and/or useState to change viewport from another component

I seem to be not understand anything lately and having a tough time grasping useContext and/or useState with React/Nextjs and react-map-gl. Basically, I have two components. A searchbox utilizing Formik & a Map from react-map-gl. What I want to do…
sylargaf
  • 346
  • 1
  • 6
  • 19
1 2 3
…
19 20