React friendly API wrapper around MapboxGL JS.
Questions tagged [react-map-gl]
291 questions
1
vote
0 answers
Side-By-Side Two Maps using the react-map-gl and maplibre-gl without Token
I have the code ready in ReactJS. The code is specifically for generating two maps side by side in a single screen using the react-map-gl and maplibre-gl libraries. Both maps are moving individually. I need to synchronize both maps. Both maps should…

Rana Hamza
- 11
- 2
1
vote
1 answer
Popup component not showing up in react app
I use a popup component from react-map-gl. When the marker is clicked on, the selectedEvent in made true and a popup is supposed to display.
import React, { useState } from 'react';
import ReactMapGL, {Marker, Popup} from 'react-map-gl';
import…

sriracha76
- 21
- 2
1
vote
0 answers
Drawing semi-transparented nested polygons on a map (satellite image)
We are developing a web application which draws polygons on a map (a satellite image). We use the react-map-gl library to draw the polygons. The polygons are semi-transparent (you can see objects on the satellite image through the polygons). We use…

Darya
- 11
- 1
1
vote
0 answers
How to load an IFC or GLTF model using React-map-gl, Deck.gl, and Loaders.gl?
I'm trying to dynamically load a user-loaded gltf model and have that model be placed on top of a map. The second part would be doing the same thing but with IFC model. I'm working with react-map-gl to create a map and I've been able to place a 3D…

Hillzkred
- 11
- 2
1
vote
1 answer
Cluster points by property fields
Is there any way of clustering points by field from properties object?
I am using react-map-gl library.
https://visgl.github.io/react-map-gl/examples/clusters
Example feature object:
{
type: "Feature",
geometry: {
type: "Point",
…

zimnykisiel
- 23
- 6
1
vote
1 answer
react-map-gl MAP component not sending over access_token
I'm trying to get a map to display using this documentation:
https://github.com/visgl/react-map-gl/blob/7.0-release/examples/get-started/basic/app.js
https://visgl.github.io/react-map-gl/docs/get-started/get-started
import * as React from…

sriracha76
- 21
- 2
1
vote
2 answers
Fit bounds with padding deck.gl mapbox
I'm trying to use fiBounds with the WebMercatorViewport object but getting an error about the padding property.
my code:
const initialViewState: IViewport | WebMercatorViewport = useMemo(() => {
if (locationsFitBounds) {
const minLat: number =…

Ar26
- 949
- 1
- 12
- 29
1
vote
1 answer
how to get whatsapp location data into react native application
hello everyone i am working on a react native application i want to know how can i get the whatsapp location data into my app like if someone send me location on whatsapp when i'll click on that location it will show me open with list of application…

Mureed Abbas
- 11
- 1
1
vote
1 answer
react-map-gl center of the map doesn`t change
I'm using node(16.17.0) and react(17.0.1).
And the issue is react-map-gl(7.0.19)
The latitude and longitude change well, but the map can't move to the center to location.
useEffect(()=>{
setViewState({
latitude:center?.lat,
…

Alex Choi
- 144
- 7
1
vote
1 answer
How to trigger a function on zoom in DeckGL
Currently my setViewState function is triggered on drag end using deckGL's built in events. I also want to trigger this when you zoom in or out. It doesnt look like there is any built in onZoomEnd event I can use. Are there any ways to achieve…

yuhsudb
- 11
- 1
1
vote
1 answer
DeckGL with React – JSX wrapper component for Map
I'm using DeckGL with React + Typescript and I'm looking to find a way to create a wrapper component for the Map component from react-map-gl to handle its own functionalities.
Currently I have an implementation working, but the Map component has to…

karl
- 61
- 5
1
vote
2 answers
How to show/hide layers in Mapbox on the client
I'm working on a web app with Nextjs, Mapbox and react-map-gl. On the client side I would add some controls to show/hide specific POIs, for example restaurants, museums and landmarks.
I tried various ways and found multiple examples that were not…

2Up1Down
- 154
- 3
1
vote
0 answers
How to update a line layer in react-map-gl?
I'm using Mapbox and there is this feature called setData() which is used to update a source and then triggers a re-render of the map (https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource#setdata). This is exactly what I want, but…

fabianthome
- 36
- 4
1
vote
0 answers
React-map-gl cluster array is empty
I'm using the user-supercluster library to portray clusters on my map. I've upgraded React-map-gl to the newest version. The map shows up but I cannot get my clusters or markers to show up. When I console the cluster array it's completely…

User1990
- 85
- 2
- 14