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

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

kandi X-RAY | react-map-gl Summary

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

            kandi-support 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 9 major release(s) in the last 6 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

            kandi-Quality Quality

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

            kandi-Security 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.

            kandi-License 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.

            kandi-Reuse 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
            JavaScriptdot img1Lines of Code : 49dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            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


            NavigationControl with
            Asked 2022-Mar-28 at 12:37

            I'm trying to build nft marketplace over mapbox, like 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.



            Answered 2022-Mar-28 at 12:37

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



            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.


            source code:

            my code



            Answered 2022-Jan-02 at 19:36

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



            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

            I want help to identify this error in production.

            The same code is running well in localhost

            here is my code



            Answered 2022-Feb-28 at 09:31

            I solved this problem which is come in production.😊

            from ref,defaults%2C%20not%20ie%2011,-This%20can%20be

            just changed my package.json browserslist.production field.




            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:



            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.

            1. Fetch is successful and we have data to display.
            2. 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…



            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 (



            Answered 2022-Feb-16 at 13:00

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



            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:



            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.:



            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?):



            Answered 2021-Dec-10 at 16:03

            Got it working like this:



            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.



            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.



            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?



            Answered 2022-Feb-06 at 18:22

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



            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:



            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:


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


            No vulnerabilities reported

            Install react-map-gl

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


            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:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i react-map-gl

          • CLONE
          • HTTPS


          • CLI

            gh repo clone visgl/react-map-gl

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link