React friendly API wrapper around MapboxGL JS.
Questions tagged [react-map-gl]
291 questions
0
votes
2 answers
Measure width of component without re-loading the page
I am using this hook to measure the size of a div component (https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node):
function useClientRect() {
const [rect, setRect] = React.useState(null);
const ref = React.useCallback(node => {
…
chococroqueta
- 694
- 1
- 6
- 18
0
votes
1 answer
React + Mapbox: Sample implementation of `getRenderedFeatures` in Deck.gl?
I have a project using a React, Mapbox, and Deck.gl stack. I'm trying to query the features on a styled map but am having trouble implementing Deck.gl's getRenderedFeatures function, even after looking at the documentation.
My current React…
mmz
- 1,011
- 1
- 8
- 21
0
votes
1 answer
Mapbox & React: Unable to input values into search box
I'm using a combination of React/Mapbox (DeckGL more specifically) in a project. I want to include Geocoding for querying addresses.
My current output:
Generated with this code:
mmz
- 1,011
- 1
- 8
- 21
0
votes
1 answer
DeckGL & Mapbox: How access ref element on map movement?
I'm trying to console.log the bounds of a Mapbox map in my React app every time I move around the map.
Here's my current attempt:
return (
<>
mmz
- 1,011
- 1
- 8
- 21
0
votes
1 answer
Mapbox token works in Local env, but not in QA env
Current Setup
I load my Mapbox access token into my next.js app as process.env.NEXT_PUBLIC_MAPBOX_TOKEN. The token is stored in my .env.local file as NEXT_PUBLIC_MAPBOX_TOKEN and also in the s3 QA server config.
Problem
The Mapbox token is read when…
Zack Carlson
- 89
- 1
- 6
0
votes
0 answers
(Deck.GL - Trips Layer ) How can I set a right loop number for various route lengths?
I am trying to render a specific path on deck gl map, but every time, I fail to set the loop correctly.
Either loop is short and the trip stops in the middle of the road, or the loop is too long and the trip makes ugly straight line from the last…
Nika Khachiashvili
- 11
- 2
0
votes
1 answer
How to constrain React-mapbox-gl to its container?
I have a map with a maxBounds property setup, the map works fine but we are using a tile set from a third party that only gives the entire map for the UK, so I wonder if it is at all possible to constrain the map to its container div so the blank…
Ricardo Sanchez
- 4,935
- 11
- 56
- 86
0
votes
2 answers
Map method in ReactJS
items.map((itemsvalue, index) => {
return (
<>
{itemsvalue}
);
});
Here items is an array of…
jyoti kumari
- 3
- 1
0
votes
1 answer
How to detect that the mapbox viewport have been moved significantly to "search within this area"?
I am using "react-map-gl", nothing of the sort was available out of the box.
What is the most preferred method for detecting this scenario?
user2167582
- 5,986
- 13
- 64
- 121
0
votes
1 answer
How to import flow types from react-map-gl?
According to the react-map-gl docs and github issues, flow.js types are exposed. I can't find the flow types in the source code.
How do I import flow types and how do I find the existing flow types for reference?
jmancherje
- 6,439
- 8
- 36
- 56
0
votes
0 answers
ENV processing not working in NextJS & Mapbox
quick question. I'm trying to use NextJS with Mapbox and having a weird issue with the env processing with Next.
So I have a .env.local file with a few variables:
DATABASE_URL="file:./dev.db"
WP_API_URL=
MAPBOX_KEY=
Now anytime I call these…
sylargaf
- 346
- 1
- 6
- 19
0
votes
1 answer
Add inertia to react-map-gl map
I'm using Deck.gl to render a Mapbox map. I'm hoping to add inertia when panning with the cursor. However, adding inertia={100}, or any number, doesn't add inertia. I'm following this guide from Deck.gl.
Here is my simplified code:
mmz
- 1,011
- 1
- 8
- 21
0
votes
1 answer
DeckGL: Prevent map movement when dragging elements
I have a DeckGL map, on which I placed a button:
mmz
- 1,011
- 1
- 8
- 21
0
votes
1 answer
Unhandled Rejection (TypeError): zone.filter is not a function
Here i'm trying to get the mark the place using Mapbox gl and I have installed react-map-gl It's throwing the above error Unhandled Rejection (TypeError): zone.filter is not a function.
Here i'm trying to get the mark the place using Mapbox gl and…
Akshar Vijay
- 1
- 3
0
votes
2 answers
TypeError: _data_homezone_json__WEBPACK_IMPORTED_MODULE_3__.data.map is not a function
Here i'm trying to get the mark the place using mapbox gl and I have installed react-map-gl and I have also attache the json file I'm using. Its throwing the above error data.map is not a function could some please help me solve…
Akshar Vijay
- 1
- 3