Questions tagged [react-map-gl]

React friendly API wrapper around MapboxGL JS.

291 questions
0
votes
1 answer

react-map-gl Popover not showing on hover in React

I'm using react-map-gl to display a Mapbox map in my Next.js app. I want to show a popover when the user hovers over a line segment in the map. Here's my code: import React from "react"; import Map, {Popup, Source, Layer} from…
Nick K9
  • 3,885
  • 1
  • 29
  • 62
0
votes
1 answer

Make Map ref object available on first modal window render/launch

I have a table where when I click on a row of the table, I get the content/objects of the row which I am passing to the Dialog component that uses react-map-gl to display the item's location based on the xy coordinate. When clicked it shows the map,…
0
votes
1 answer

Why cant my react app detect my mapbox token?

I have added a token in my react app using the .env file. No matter what I do I still get an error (index.js:1 Error: An API access token is required to use Mapbox GL.) This is my code: import mapboxgl from '!mapbox-gl'; import {Marker} from…
user19835570
0
votes
1 answer

react-map-gl add background color outside polygon

I am using react-map-gl and I want to somewhat put a background color outside the polygon that was created. I tried using multiple but it looks like it does not accept multiple instances.
Gelo Chang
  • 127
  • 8
0
votes
1 answer

Why my code is not mapping through the array of object in react using id as the key?

I am able to print the blog array in the console and it includes the object. I want to use the object components by mapping through the id as the key but I am not able to get inside the map function. I was able to use the same map structure in my…
ronny
  • 3
  • 2
0
votes
1 answer

Mapbox: What color-code does queryRenderedFeatures return? How to convert the values to rgba, hex or hsl?

The example on mapbox.com returns nice information on the hovered feature, also the fill-color https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/ The fill-color returned looks like this: "feature": { "type": "Feature", …
tiaco
  • 1
0
votes
2 answers

Geolocate control triggered before added to a map in react-map-gl

import { useState, useRef, useEffect, useCallback } from "react"; import Map, { GeolocateControl, Marker } from "react-map-gl"; import "mapbox-gl/dist/mapbox-gl.css"; const App = () => { const map = useRef(null); const [markers, setMarkers] =…
naveeng2402
  • 67
  • 1
  • 5
0
votes
1 answer

Mapbox-gl-js giving `message: Not found` error with status (null) and thus CORS

I've been running into a problem for a few days now that I just simply can't understand. Every time I use Mapbox-gl-js or wrappers like ReactMapGL, I get a CORS error saying The Same Origin Policy disallows reading the remote resource at…
Luc Angevare
  • 25
  • 4
  • 17
0
votes
1 answer

Clusters, and markers randomly loading onPageLoad *MapBox*

So what I want is for all the clusters and markers to be visible from the start. that is, when entering the page. But that's not the case. Everything that should be on the map loads completely sporadically. Like when i hit hard refresh some times it…
Kruzt
  • 51
  • 1
  • 6
0
votes
0 answers

React-map-GL and Maplibre How to make a toggle button for cluster on. Problem: Map doesn´t update

The problem: The map doesn´t update. Hello! I´m trying to make a button that will toggle on/off map clustering. I followed the example here:https://visgl.github.io/react-map-gl/examples/clusters. I whant to be able to toggle it, like this example on…
nicmano
  • 123
  • 2
  • 12
0
votes
3 answers

Native React Images not displaying after mapping over and being placed in image tag

Hi I have the following code which I just currently want to print the images out and will style later. It should be printing a picture as it comes across them in the list and printing them alongside its facedown side. I have changed the way…
user12957455
0
votes
2 answers

Connect markers with a polyline in Mapbox GL

I'm developing a web application using Mapbox GL, more specifically, its binding for React, react-map-gl. One of the planned functionalities for the app is adding markers and connecting them. However, I'm having trouble connecting markers. I want to…
Educorreia
  • 375
  • 5
  • 21
0
votes
1 answer

react-map-gl load map on the location of the user

Using react 18 and react-map-gl 7.0.11, im not able to load the map on the location of the user. I am able to get this button on the screen using the GeoLocateControl component https://i.stack.imgur.com/fBy1y.png
bigALP
  • 1
0
votes
1 answer

Getting very weird error "SyntaxError: '...' expected

I am trying to pass a prop down to a REACTMAPGL in react, I am calling the method displayMarkers() which returns an array for JSX Elements. The problem revolves mainly around why I am getting the error in this specific project. I created the…
AbedPunk
  • 1
  • 1
0
votes
3 answers

Updating single item in react state hook

I have array useState hook which consists of items with className. I want to update className of a single item from that hook. How do I update single value of a useState hook.Of course I am going to put condition before updating . here is the code…
Rk Shawon
  • 17
  • 4