React friendly API wrapper around MapboxGL JS.
Questions tagged [react-map-gl]
291 questions
1
vote
0 answers
React-map-gl transition error which crashes the map
I am having an issue with my map where a certain trackpad gesture crashes the map. The error that is shown upon this is attached below.
Transition error
As seen in the image, it requires a position prop which I could not find in any documentation of…
Huvinesh Rajendran
- 11
- 1
1
vote
0 answers
react-map-gl circle 10KM radius
According to the documentation this is how you add a point to React-Map-GL however I am needing to make the radius KM based not pixel based.
I am wondering how this could be done?
import * as React from 'react';
import Map, {Source, Layer} from…
RussellHarrower
- 6,470
- 21
- 102
- 204
1
vote
0 answers
React-map-gl geocoder marker showing else where on the webpage than the map
I'm currently working on this application for school assignment that uses react-map-gl to achieve our map feature. I tried to create a text entry box for location information as the example here :…
Yu3ko
- 11
- 1
1
vote
1 answer
NavigationControl with Deck.gl
I'm trying to build nft marketplace over mapbox, like ovr.ai to improve my react.js. I'm working on a fork, but I'm trying to add new features like navigation control, search place etc.
I have a problem with NavigationControl.
import DeckGL from…
Tugce Aksoz
- 51
- 2
- 15
1
vote
2 answers
React-Map-GL: How to make hovered marker appear on top?
I have a map with different markers and as much as I am aware the markers are rendered in the order they appear which means marker 3 is on top of marker 1 and 2.
I am using React Map Gl with mapblibre-gl and React(typescript)
I'm fine with that, but…
carlo711
- 645
- 1
- 6
- 11
1
vote
1 answer
OnClick for mapbox Layer
I am using react-map-gl to add a map to my React app. I want to add an onClick event to my Layer component, but it looks like react-map-gl does not support it. (docs here: https://visgl.github.io/react-map-gl/docs/api-reference/layer )
I've recently…
Robert Salca
- 33
- 1
- 3
1
vote
2 answers
Error: An API access token is required to use Mapbox GL
I am using react-gl library to use the map-api using mapbox. I have created an account mapbox as well still it is showing the error depicted in the picture.
Here is my code for app.js
import * as React from 'react';
import Map from…
Tanvesh
- 127
- 1
- 10
1
vote
0 answers
DeckGL and MapLibre Not Working Correctly
We are wanting to migrate away from Leaflet for one of our projects due to the amount of data we will need to render. I am trying to make DeckGL and MapLibre work with React JS but haven't had any luck so far. The kicker is that the client will be…
Matt Platt
- 21
- 2
1
vote
1 answer
Map not showing in mapbox
I'm using mapbox api for my application where user can add markers based on his current location. The map was loading just fine while it was running on localhost but after hosting it in netlify, all other components are loading but not the map. Even…
buzz
- 896
- 2
- 10
- 22
1
vote
1 answer
How to assign a value to particular cell in table layout in react js?
I am trying to create a table view in react js, which has data from Jan to Dec which I will be getting from JSON, I tried to fetch and assign them to the table. The values are assigned but they get repeated, I cannot find the logic to fix them.
I…
selva surya
- 31
- 1
- 7
1
vote
2 answers
I was following lama dev youtube channel's video for using mapbox in reactjs.
But when I run the reactjs script, my map component is empty.
video:
https://youtu.be/9oEQvI7K-rA
source code:
https://github.com/safak/youtube/tree/mern-travel-app
my…
DesignThala
- 9
- 4
1
vote
1 answer
Hide mapbox layer shapes that are too small
I have some geoJSON polygons that I render via layers on top of my map. Depending on the shape itself and the zoom level, sometimes the rendered shapes are too small and it doesn't make sense to even show them.
Is there a way to hide shapes that…
RCKT
- 141
- 2
- 12
1
vote
2 answers
Does anyone know why my react map gl is not working
I wanted to know if react typescript was good so I was trying it out.
I am running into problems I've never had.
here is my code
function Map() {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: 37.7577,
…
Magnus Jackson
- 47
- 3
1
vote
2 answers
React-Map-GL: How to rise map marker to top when hover?
I am using react-map-gl and I am rendering markers within the map. I also have some hover animations going on, animations are only css so far, except when you click a marker (Not of importance for this question though).
So, this is how it looks…
JoakimB
- 157
- 1
- 11
1
vote
1 answer
react-map-gl showUserHeading not in GeolocateControl
I'm trying to display the users position and the heading indicator in React-mapbox-gl.
import * as React from "react";
import ReactMapGL, { GeolocateControl } from "react-map-gl";
const geolocateControlStyle = {
right: 10,
top: 10
};
function…
Christian Moen
- 1,253
- 2
- 17
- 31