react-mapbox-gl | A React binding of mapbox-gl-js | Map library

 by   alex3165 TypeScript Version: v5.0.0 License: MIT

kandi X-RAY | react-mapbox-gl Summary

kandi X-RAY | react-mapbox-gl Summary

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

A React binding of mapbox-gl-js

            kandi-support Support

              react-mapbox-gl has a medium active ecosystem.
              It has 1817 star(s) with 519 fork(s). There are 23 watchers for this library.
              It had no major release in the last 12 months.
              There are 204 open issues and 472 have been closed. On average issues are closed in 90 days. There are 56 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-mapbox-gl is v5.0.0

            kandi-Quality Quality

              react-mapbox-gl has 0 bugs and 0 code smells.

            kandi-Security Security

              react-mapbox-gl has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-mapbox-gl code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-mapbox-gl is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-mapbox-gl releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              It has 234 lines of code, 0 functions and 66 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-mapbox-gl
            Get all kandi verified functions for this library.

            react-mapbox-gl Key Features

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

            react-mapbox-gl Examples and Code Snippets

            No Code Snippets are available at this moment for react-mapbox-gl.

            Community Discussions


            react-map-gl showUserHeading not in GeolocateControl
            Asked 2022-Jan-01 at 21:31

            I'm trying to display the users position and the heading indicator in React-mapbox-gl.



            Answered 2022-Jan-01 at 21:31

            EDIT: v6.1.18 is released, and the GeolocateControl now has the showUserHeading prop. Therefore the solution below is no longer needed.

            I figured out that as of 21.09.2021, react-map-gl hasn't included showUserHeading within their props. I solved this by patching using this tool

            Here's the patch



            Writing my own GeoJSON input component with a mapgox-gl interface
            Asked 2021-Sep-20 at 15:53

            Hej. I want to create a react admin input component MapInput where I'm given a map with drawing controls github. There I'm able to draw my polygon and get GeoJSON as a result, which I can then send to my backend REST API server (json-server).

            My system consists of my react client program, and a json-server with REST API. Example for an area in my REST API:



            Answered 2021-Sep-20 at 15:53

            Your custom input component must display and allow the change of the polygon. This data is in the form state, handled by react-final-form. So you'll need to use react-final-form's useField() hook to grab the input value and change callback:



            How to make a reat-mapbox-gl marker component draggable?
            Asked 2021-Aug-16 at 07:47

            I m using

            My question is how to make a marker component draggable?



            Answered 2021-Aug-16 at 07:47

            React Map GL have a similar example in their docs:


            On that page you'll find a link to "View Code", and in App.js you'll see the logic.

            React-Mapbox-GL works in a similar way, and have the same properties you can pass functions to: onDragStart, onDrag, onDragEnd.

            You'll need to set up your marker in a similar way to them:



            How to get visible map bounds in mapbox js?
            Asked 2021-Jul-05 at 08:28

            I'm working website which uses a lot of markers. And for performance reasons I'm going to render only visible markers after each move. I'm using mapbox js library via react-mapbox-gl react library. Any advice how to get visible coordinates from map? Top left and bottom right visible coordinates is enough.



            Answered 2021-Jul-05 at 08:28

            You can use map.getBounds() or map.getBounds().toArray().



            React Mapbox component flickering when I type in the input box of a different component
            Asked 2021-Apr-22 at 21:06

            I want to have a map and an input form on a single page. The user should be able to type into the input field, hit submit, and have the Mapbox component move to that location.

            I have two issues, and I suspect they are related. When I type in the input box, the map component flickers after each onChange event. Second, when I submit the form, the geolocation is successfully fetched, the props are updated on the Map component and the map marker appears, but the map doesn't perform the neat animation I see when I just go into React Dev tools and manually update the props.

            I know I'm a rank beginner, and there are a thousand things wrong with this I'm sure. I'd love if someone knows the answer to this, but I'd also be happy if someone could just point me in the right direction. I spend the morning looking over the React's "getting started" and "hooks" section, and took some React classes where you built simple apps, but clearly there was something fundamental that didn't sink in. Thanks!

            Here is the NextJS page:



            Answered 2021-Apr-22 at 21:06

            Your sense that the problems are related is right on. One issue is that you're re-initializing the Map component on every render:



            React Mapbox layer not showing
            Asked 2020-Nov-20 at 06:04

            I'm trying to use React Mapbox but I'm facing some problems with using the Layer component.

            I'm trying to follow this demo:

            Or even the "quick start" demo from the main page:

            And my map is showing but the layer is doesn't! Here's my code:



            Answered 2020-Nov-19 at 07:29

            Ok, so after some more research I found that the problem is in the last version of react-mapbox-gl (5.0.0). Installing react-mapbox-gl@4.8.6 finally displayed my Layers and everything works fine. I don't know what is the problem in version 5.0.0. Hope they will fix this soon.



            Using react-mapbox-gl (react) to make 'search this area' of google
            Asked 2020-Jul-21 at 14:11

            I'm a new of MapBox and trying to make the same feature of googleMap 'Search This Area'.

            In my imagine, I need the coordinate of user's view(left-top and right-bottom), then I can calculate if my points is in user's view it will display markers.



            Answered 2020-Jul-21 at 14:11


            Mapbox GL popup text is unselectable
            Asked 2020-May-21 at 08:27

            The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:



            Answered 2020-May-21 at 08:27

            I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:

            • Use the same class they use in the examples for the content: mapboxgl-popup-content
            • Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:

            • Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content

            Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.



            React Mapbox GL - How to draw images on the map using Layer and Feature instead of Markers
            Asked 2020-Jan-10 at 06:50

            I am using React Mapbox GL in my project and as i use Marker for about 10000 data points and performance is not that good. I have read the documentation and it says

            Note: When rendering many objects, avoid using Markers as it will negatively affect performance. Use Layers and Features instead.

            How to use Layers and Feature to display markers?



            Answered 2020-Jan-09 at 12:44

            To render something with layers and features, put one or more Feature components inside of a Layer component. You can give each Feature a position using the coordinates prop.

            Now, what's left over is to style these features. How you do this depends on what your markers previously contained, but for example, if you'd like to draw circles for each of the positions, you can set the Layer's type to circle and under the paint prop, provide values for circle-color and circle-radius (these are described in the mapbox-gl API docs.

            For drawing images for each coordinate, you can use the icon-image layout property on the Layer (you would have to either use a preexisting icon or upload one to Mapbox Studio).

            You can see some sample code in the demos, for example the all-shapes demo styles data with circles.


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


            No vulnerabilities reported

            Install react-mapbox-gl

            Adding the css in your index.html:.


            Please try to reproduce your problem with the boilerplate before posting an issue.
            Find more information at:

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

            Find more libraries

            Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link