Questions tagged [react-map-gl]

React friendly API wrapper around MapboxGL JS.

291 questions
3
votes
1 answer

Deck.GL ScatterplotLayer does not render points

I've been scratching my head over this one for way too long. I've got the simplest React App, which passes some data as a prop to WhateverMap (so-called because I've been trying out many different Map libraries). However, when I try to plot the data…
randomshinichi
  • 420
  • 5
  • 15
3
votes
1 answer

How to render deck.gl Arcs go over Pacific Ocean

I am trying to draw arcs from China to US, but the arcs don't cross over the Pacific Ocean. They go over the Atlantic Ocean and over Europe instead. Is there a way for arcs to draw over the Pacific Ocean?
DanaOira
  • 41
  • 3
3
votes
1 answer

how to Add Connecting Lines to Map Markers using react-map-gl

How to Add Connecting Lines to Map Markers using react-map-gl? For example : I have 3 markers (mark1, mark2 ,mark3) mark1 should ne connected to mark2 & mark3 . mark2 should be connected to mark1 &mark 3.... Can any one please help me out...
abhi
  • 31
  • 6
2
votes
0 answers

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT https://events.mapbox.com/events/v2?access_token= react.js mapbox

I'm making travel-log-app in React using react-map-gl. I have added markers and Popups from mapbox and I want popup to show when i click on marker. But its not working and in console i m getting this error: "Failed to load resource:…
2
votes
0 answers

What is a better way to initialise Mapbox map in ReactJS?

When creating a ReactJS map application based on Mapbox GL JS/MapLibre, I've met two different implementations for map initialisation: 1) hook-based (using useEffect) import React, { useEffect, useRef, useState } from "react"; import…
2
votes
0 answers

How to code split Map component in react-map-gl?

I'm trying to codesplit a react-map-gl Map component into its own chunk using Lazy,Suspense. This is my component. import 'mapbox-gl/dist/mapbox-gl.css' import React, {lazy, Suspense} from 'react' const Map = lazy(() =>…
2
votes
3 answers

How to pass ref to draw control in react-map-gl

Following the Mapbox draw example I can use the draw variable to access all features that are drawn on a map. const draw = new MapboxDraw({ // ... }); map.addControl(draw); // ... function updateArea(e) { const data = draw.getAll(); // Accessing…
Drejc
  • 491
  • 6
  • 21
2
votes
1 answer

React ref.current is still null in componentDidUpdate

I'm trying to zoom-in on a set of coordinates using react-map-gl. To do so, the library encourages us to use React's Refs. When instantiating the component in render, I'm passing down a ref that should hold the underlying MapBox map object. I…
Clément Cardonnel
  • 4,232
  • 3
  • 29
  • 36
2
votes
1 answer

React Module Parse Failed – react-map-gl

I am currently trying to make a typescript app on expo using the react-map-gl package. I currently am trying to load the basic example code snippet they have. I have downloaded the type files for react-map-gl as well. However, when I try to run the…
Brandon
  • 21
  • 1
2
votes
0 answers

Changing color on layer React-Mapbox-gl

I am new to React-mapbox GL. I have tried for a while now to look at the examples but can't figure out how to change the layer's color on enter/hover. I have 2 questions so far. map.on('mouseenter', 'clusters', () => { map.getCanvas().style.cursor =…
Ole Dybedokken
  • 343
  • 2
  • 15
2
votes
2 answers

How can i add custom marker to map using react-map-gl?

i want to add custom marker to my map. Im using react-map-gl library and components Layer and Source. My code is: import pin from "../images/pin.svg"; . . . . const geojson: GeoJSON.Feature = { type: 'Feature' , …
drot
  • 95
  • 1
  • 5
2
votes
1 answer

get coordinates of center of screen React map gl

Hello guys I'm having trouble finding in the library how to get the viewport's center in coordinates. Basically my goal is that each time a user wants to create an alert,the pin marker locates the center of the screen so that the user can drag it…
Lucas Seabra
  • 63
  • 1
  • 1
  • 5
2
votes
3 answers

`react-map-gl` ERROR Module not found error [MAPBOX]

Failed to compile ./node_modules/@math.gl/web-mercator/dist/esm/web-mercator-viewport.js Module not found: Can't resolve 'gl-matrix/mat4' in 'D:\Projects\react-app\frontend\node_modules\@math.gl\web-mercator\dist\esm'+ I get this on the development…
Smit Gajera
  • 1,001
  • 1
  • 8
  • 26
2
votes
0 answers

How to get center coordinates using Mapbox

I am trying to get center coordinates when moving map. Is this possible using this library https://visgl.github.io/react-map-gl/. I have been reading documentation and i came across this getMap() method which says: Returns the Mapbox instance if…
Krneki123
  • 67
  • 5
2
votes
1 answer

onHover effect on ReactMapGL not scaling properly

Currently I'm trying to replicate this hover effect of this website on my map component: http://www.francoisrisoud.com/projects where basically when you hover over a dot, it brings up a full screen image and when you click on it, it'll take you to a…
JJM50
  • 467
  • 1
  • 7
  • 20
1 2
3
19 20