Questions tagged [react-map-gl]

React friendly API wrapper around MapboxGL JS.

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", …
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…
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…
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…
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
1
vote
1 answer

Plot polygon using react map gl

I am getting started with react map gl. I am failing on plotting basic polygon on map. I have searched multiple examples but i couldn't get proper solution. Till now this is my code:
Desmnd2
  • 63
  • 5