react-map-gl | React friendly API wrapper around MapboxGL JS | Map library

by visgl TypeScript Version: 7.2.0-beta.1 License: Non-SPDX

X-Ray Key Features Code Snippets(1)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | react-map-gl Summary

react-map-gl is a TypeScript library typically used in Geo, Map, React, WebGL applications. react-map-gl has no vulnerabilities and it has medium support. However react-map-gl has 20 bugs and it has a Non-SPDX License. You can download it from GitHub.

React friendly API wrapper around MapboxGL JS

Support

Quality

Security

License

Reuse

Support

react-map-gl has a medium active ecosystem.

It has 7145 star(s) with 1330 fork(s). There are 1978 watchers for this library.

There were 1 major release(s) in the last 12 months.

There are 40 open issues and 925 have been closed. On average issues are closed in 103 days. There are 10 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of react-map-gl is 7.2.0-beta.1

Quality

react-map-gl has 20 bugs (0 blocker, 0 critical, 20 major, 0 minor) and 0 code smells.

Security

react-map-gl has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

react-map-gl code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

react-map-gl has a Non-SPDX License.

Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

Reuse

react-map-gl releases are available to install and integrate.

Installation instructions, examples and code snippets are available.

It has 964 lines of code, 0 functions and 169 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed react-map-gl and discovered the below as its top functions. This is intended to give you an instant insight into react-map-gl implemented functionality, and help decide if they suit your requirements.

Initialize the root layout
Read release notes from a release
Add local - plugin settings to the project
Get the git tag .
reducer to map view state

Get all kandi verified functions for this library.

react-map-gl Key Features

No Key Features are available at this moment for react-map-gl.

react-map-gl Examples and Code Snippets

component shows blank screen

JavaScript

Lines of Code : 49

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import mapboxgl from 'mapbox-gl'; 


mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-map-g

Community Discussions

Trending Discussions on react-map-gl

NavigationControl with Deck.gl

component shows blank screen

Error in mapBox when I am deploying react app in Heroku

React ref.current is still null in componentDidUpdate

Image of react-map-gl fails in Next.js application

Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

How to use vanilla JS with React component (zoom to bounds on load react mapbox gl)

Valid Mapbox Token is required but I don't work

react-map-gl Marker is moving when zooming the map

Mapbox GL style line color based on property text value

QUESTION

NavigationControl with Deck.gl

Asked 2022-Mar-28 at 12:37

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.

...

ANSWER

Answered 2022-Mar-28 at 12:37

As docs suggest here, try adding the react-map-gl context provider to your DeckGL component

Source https://stackoverflow.com/questions/71646944

QUESTION

component shows blank screen

Asked 2022-Mar-21 at 05:46

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 code

...

ANSWER

Answered 2022-Jan-02 at 19:36

After the comment from J-007, I added these lines below the previous import lines:

Source https://stackoverflow.com/questions/70545302

QUESTION

Error in mapBox when I am deploying react app in Heroku

Asked 2022-Feb-28 at 09:31

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

I want help to identify this error in production.

The same code is running well in localhost

here is my code

...

ANSWER

Answered 2022-Feb-28 at 09:31

I solved this problem which is come in production.😊

from ref https://docs.mapbox.com/mapbox-gl-js/guides/install/#:~:text=OR-,defaults%2C%20not%20ie%2011,-This%20can%20be

just changed my package.json browserslist.production field.

this

Source https://stackoverflow.com/questions/71274893

QUESTION

React ref.current is still null in componentDidUpdate

Asked 2022-Feb-25 at 14:07

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 managed to make the behavior work. Only problem: it's highly inconsistent.

I'm calling a method called setCamera in componentDidUpdate. But it only works on the initial load. If I reload the page, I've got an error from Gatsby. If I close the error it will work again. Up until the next reload.

The error is that this.mapRef.current is null. I tried to put a conditional to verify that the value isn't null before trying to access it, however this cause the animation to just never work. No matter how many times I reload, it will never be performed. Whereas without the conditional it could at least work half the time before crashing. So this already is a mystery in itself and if someone has an idea for why such behavior can happen, I'm all ears.

Still, I wasn't discouraged and tried to put the call to setCamera in a setTimeout and yes, it works! Even putting a very low timeout like 1 makes the code work 95% of the time. But I'm unsatisfied with it, because I understand that putting that kind of timers isn't what I'm supposed to do and to make things worse, it doesn't fix the issue consistently.

My understanding of the problem is that MapRef is still not set in componentDidUpdate for some reason. It's being set sometimes later. I don't know if React supports threading or if some kind of async witchcraft is deceiving me behind the scenes, but what I'm wondering is when am I guaranteed for my ref to be properly set? Where or how should I write this code?

Thank you in advance to anyone who can help me on that. 🙂

Here's my sample code:

...

ANSWER

Answered 2022-Feb-25 at 14:07

I've found a solution!

My issue was that setCamera was dependent on two conditions and these two conditions could happen in any order.

Fetch is successful and we have data to display.
The map is loaded and we have a ref to it.

Instead of initializing mapRef, in the constructor or in render, I've made a function…

Source https://stackoverflow.com/questions/71224100

QUESTION

Image of react-map-gl fails in Next.js application

Asked 2022-Feb-17 at 12:03

I am struggling getting Image from react-map-gl to work with my Next.js application.

To narrow it down, I have tried to port over the example from the official documentation (https://urbica.github.io/react-map-gl/#/Components/Image):

...

ANSWER

Answered 2022-Feb-16 at 13:00

Import Image from 'react-map-gl' without {}

Source https://stackoverflow.com/questions/71141224

QUESTION

Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

Asked 2022-Feb-13 at 06:31

Currently I'm using "react": "17.0.2" and I have installed "react-markdown": "^7.0.1" via npm i react-markdown I'm using this package to display my rich text that I'm fetching from my Strapi CMS. I have used the following code to display the content:

...

ANSWER

Answered 2021-Sep-01 at 10:23

Node is currently treating your .js file as CommonJS. You need to tell Node to treat it as an ES module.

Try adding "type": "module" in your package.json file.

You can place it anywhere at the top level. E.g.:

Source https://stackoverflow.com/questions/69008215

QUESTION

How to use vanilla JS with React component (zoom to bounds on load react mapbox gl)

Asked 2022-Feb-12 at 11:52

I am looking to be able to zoom to bounds when my component mounts.

I know this vanilla JS code can achieve the zoom to bounds, but not sure how to massage this into the React code below (I think a need a REF?):

...

ANSWER

Answered 2021-Dec-10 at 16:03

Got it working like this:

Source https://stackoverflow.com/questions/70304280

QUESTION

Valid Mapbox Token is required but I don't work

Asked 2022-Feb-08 at 11:03

I try to set up an react app with an integrated map of mapbox. When I start the app, it says that the access token isn't valid. But I used the public token on the website.

...

ANSWER

Answered 2022-Feb-08 at 11:03

You have to provide the REACT_APP_MAPBOX_TOKEN without the quotation marks: REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q

For people not to abuse your Mapbox Token, you should consider generating a new one.

Source https://stackoverflow.com/questions/71032467

QUESTION

react-map-gl Marker is moving when zooming the map

Asked 2022-Feb-06 at 18:22

I've built a React app with a map component which renders a map. I tried to add a marker, but the marker keeps moving when I zoom. What is causing this to happen?

...

ANSWER

Answered 2022-Feb-06 at 18:22

The problem was this missing line in my index.html:

Source https://stackoverflow.com/questions/71008574

QUESTION

Mapbox GL style line color based on property text value

Asked 2022-Jan-19 at 22:09

I'm trying to style a single GeoJSON source with different line colors based on a feature property using react-map-gl, and I can't find a way to get set the color of lines in a smart way.

Most of all, I would love to apply a function on the dataset to return the color of my own choosing based on a feature property value, but so far I haven't fount anything about it. If you know about it, please point in my direction:)

If I have the following GeoJSON:

...

ANSWER

Answered 2022-Jan-19 at 22:09

I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.

You only want feature-state if you're intending to manipulate the feature attributes dynamically, which I don't think you are.

You probably just want regular data-driven styling:

Source https://stackoverflow.com/questions/70763649

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-map-gl

Using react-map-gl requires react >= 16.3.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: