mapbox-gl-js | thoroughly customizable maps in the browser | Map library

 by   mapbox JavaScript Version: v2.15.0 License: Non-SPDX

kandi X-RAY | mapbox-gl-js Summary

kandi X-RAY | mapbox-gl-js Summary

mapbox-gl-js is a JavaScript library typically used in Geo, Map, React Native, WebGL applications. mapbox-gl-js has no bugs, it has no vulnerabilities and it has medium support. However mapbox-gl-js has a Non-SPDX License. You can install using 'npm i xtal-gl' or download it from GitHub, npm.

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using WebGL. Mapbox GL JS is part of the cross-platform Mapbox GL ecosystem, which also includes compatible native SDKs for applications on Android, iOS, macOS, Qt, and React Native. Mapbox provides building blocks to add location features like maps, search, and navigation into any experience you create. To get started with GL JS or any of our other building blocks, sign up for a Mapbox account. In addition to GL JS, this repository contains code, issues, and test fixtures that are common to both GL JS and the native SDKs. For code and issues specific to the native SDKs, see the mapbox/mapbox-gl-native repository. Caption: (Mapbox GL JS maps, left-to-right, top-to-bottom): Custom styled point clusters, custom style with points, hexbin visualization on a Dark style map with Popups, data-driven circles over a raster layer with satellite imagery, 3D terrain with custom Markers, Mapbox Movement data visualization.

            kandi-support Support

              mapbox-gl-js has a medium active ecosystem.
              It has 9920 star(s) with 2117 fork(s). There are 342 watchers for this library.
              There were 1 major release(s) in the last 12 months.
              There are 1057 open issues and 6275 have been closed. On average issues are closed in 38 days. There are 30 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of mapbox-gl-js is v2.15.0

            kandi-Quality Quality

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

            kandi-Security Security

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

            kandi-License License

              mapbox-gl-js 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

              mapbox-gl-js releases are available to install and integrate.
              Deployable package is available in npm.

            Top functions reviewed by kandi - BETA

            kandi has reviewed mapbox-gl-js and discovered the below as its top functions. This is intended to give you an instant insight into mapbox-gl-js implemented functionality, and help decide if they suit your requirements.
            • Shape text .
            • Creates a new symbol tree with the given name and symbol coordinates .
            • Creates an flat update of tile updates .
            • Gets diagram nodes
            • Perform the symbol layout .
            • Plot statistics for the versions
            • Draws a globe in fog .
            • Creates a new feature .
            • Computes AAB of a tile with a tileId .
            • Get SVG quadrant .
            Get all kandi verified functions for this library.

            mapbox-gl-js Key Features

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

            mapbox-gl-js Examples and Code Snippets

            copy iconCopy
            $ npm install --save mapbox-gl
            $ yarn add mapbox-gl
            copy iconCopy
            if (typeof window.URL.createObjectURL === 'undefined') {
              window.URL.createObjectURL = () => {
                // Do nothing
                // Mock this function for mapbox-gl to work
              setupFiles: [
            Add js lib to react component
            JavaScriptdot img3Lines of Code : 2dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --save mapbox-gl
            how do you import mapbox-gl-draw using webpack?
            JavaScriptdot img4Lines of Code : 9dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                resolve: {
                  modules: ['src', 'node_modules'],
                  extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
                  alias: {
                    // mapbox-gl related packages in webpack should use dist instead of the default src
            Is it possible to have a white basemap using d3.js and leaflet?
            Lines of Code : 11dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            //Mapbox API Token
            mapboxgl.accessToken = '{API TOKEN}'
            //Setup mapbox-gl map
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/{USERNAME}/{STYLE_ID}', //Copied from Mapbox Studio
                center: [Lng, Lat],

            Community Discussions


            How do I use Lantmäteriet's satellite images over Sweden in MapBox GL JS?
            Asked 2022-Apr-11 at 09:55

            I've spent so many hours over many months (on and off) trying to figure out how to get this to work. It never works, yet I highly suspect that the solution is very simple.

            I use MapBox GL JS with the satellite images. These are very poor, at least for Sweden. So, since Lantmäteriet (official governmental body) has much better satellites photos, I want to integrate those into my map system instead (for Sweden). The URL to look at their map is:

            I have very carefully studied these among many more pages:



            The image slices produced by Lantmäteriet's web application are in this format:



            Answered 2022-Apr-11 at 06:12

            I think most likely your problem is projection related.

            You are fetching data in projection EPSG:3006 (SWEREF99). Mapbox only supports fetching tiles in EPSG:3857 (Web Mercator):

            By providing a URL to a WMS server that supports EPSG:3857 (or EPSG:900913) as a source of tiled data. The server URL should contain a "{bbox-epsg-3857}" replacement token to supply the bbox parameter.

            (EPSG:900913 is a very old designation for EPSG:3857)

            You've tried putting {bbox-epsg-3006} in your URL, but that's actually a substitution token that Mapbox GL JS doesn't recognise, so nothing will get substituted, and therefore the server won't know what tile to send back.

            So, either:

            • that server supports EPSG:3857, in which case, request the tiles in that projection and everything should work
            • it doesn't support EPSG:3857, in which case there isn't much you can do. (Maybe there is some third party tile reprojection service, I don't know).

            You can find out what projections a server supports by using the GetCapabilities WMS request:

            It looks like it does support EPSG:3857:



            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:



            Mapbox Feature ID parameter missing
            Asked 2022-Mar-05 at 17:08

            I took this demo from mapbox:



            Answered 2022-Feb-20 at 22:31

            You have to add generateId: true to your addSource method params.



            Increase Accuracy of Mapbox GL Geocoder
            Asked 2022-Jan-09 at 06:11

            Is it possible to increase de accracy / precision of the Geocoder JSON response?

            I could accomplish it using the Map, however, with the Geocoder It wasn't possible.

            Problem Description

            Using Mapbox Geocoder for JS:



            Answered 2022-Jan-09 at 06:11

            Precision of 6 decimal places gives you ~10 centimeter accuracy. Mapbox is using GeoJSON specification which has following recommendation about precision:

            The size of a GeoJSON text in bytes is a major interoperability consideration, and precision of coordinate values has a large impact on the size of texts. A GeoJSON text containing many detailed Polygons can be inflated almost by a factor of two by increasing coordinate precision from 6 to 15 decimal places. For geographic coordinates with units of degrees, 6 decimal places (a default common in, e.g., sprintf) amounts to about 10 centimeters, a precision well within that of current GPS systems. Implementations should consider the cost of using a greater precision than necessary.

            GPS-enabled smartphones are typically accurate to within a 4.9 m (16 ft.) radius under open sky. However, their accuracy worsens near buildings, bridges, and trees.ref

            Here is a demo of distance accuracy when precision of 6 decimal places is used:



            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



            Mapbox clusterProperties calculate 'average' of point property value
            Asked 2021-Dec-08 at 05:42

            I am working on an application using Mapbox GL JS, in which I am showing a heatmap layer, with a data-driven 'heatmap-weight' property (based on a custom numerical attribute in my GeoJSON data - 'detections').

            Because many of the points in my data are very near or even overlapping each other, their values of 'detections' are often counting the same detections and thus making the heatmap coloring heavier than it should, therefore I am trying to cluster them and adding a new 'average' (average) property, inside the 'clusterProperties' object, and use that instead to interpolate heatmap-weight of clustered points.

            I have been digging through mapbox documentation and examples on using expressions and it seems rather straightforward to implement properties (like 'sum' in this example: , but I have not been able to come up with a working expression to calculate the 'average' I need.

            Basically I am trying to get a 'sum' of my 'detections' property, and divide it by the 'point_count' property of a cluster, so I first tried:



            Answered 2021-Nov-25 at 01:56

            The Mapbox documentation is very terse here.

            An object defining custom properties on the generated clusters if clustering is enabled, aggregating values from clustered points. Has the form {"property_name": [operator, map_expression]}. operator is any expression function that accepts at least 2 operands (e.g. "+" or "max") — it accumulates the property value from clusters/points the cluster contains; map_expression produces the value of a single point.

            Example: {"sum": ["+", ["get", "scalerank"]]}.

            Your first problem is that you need to write your expression in the MapReduce paradigm - that's the map_expression they're referring to. The operator is actually the reduce expression: the thing that combines the results of applying map_expression to two different input values.

            The second problem is that it's actually not that easy to write an average function as a map/reduce expression. A sum is easy: just keep adding the next value. But an average function needs to keep track of the total number of things, and the running sum.

            My suggestion would probably be to instead create two separate cluster properties, one for the sum, and one for the count, and compute the average (sum/count) at the time you use the expression, not in the clustering.

            Since point_count is provided for you already, and the example of sum is given for you there, you should have everything you need.



            Mapbox GL JS find closest address to clicked point
            Asked 2021-Dec-08 at 05:41

            I am trying to make a web app where the user can click a point and I can get the closest address to the point. This example from the documentation looks pretty close to what I want to do, except it the queryRenderedFeatures call doesn't seem to return the physical address of any features. What is the best way to get the physical address from a clicked point?

            Here is my code:



            Answered 2021-Dec-06 at 02:47

            The term for finding the nearest address to a point is "reverse geocoding". You could use Mapbox's API for this, but there are many others, too.

            There is no need to use queryRenderedFeatures here.



            How to make granulatity greater (smoother zooming) on leaflet map?
            Asked 2021-Sep-27 at 10:35

            I try to add greater granulatity to leaflet map. I googled it and read some posts here on SO but it doesn't help me. I added zoomSnap (according to leaflet documentation) as a custom option in leafletOptions but it doesn't work. I also tried to add custom js code in onRender section but it also doesn't work. Any ideas how to make it possible? I would like zooming work as in Mapbox, it works really smoothly (e.g.

            Here is my reproducible code. Commented part is raw JS, I tried with this one too but it doesn't work:



            Answered 2021-Sep-27 at 10:35

            Try leafletOptions(zoomSnap = 0.1, zoomDelta = 0.1)

            zoomSnap = x is to force zoom levels to be multiples of x

            zoomDelta = y is to change the zoom level by units of y



            CSP, Refused to load the script, violates the following Content Security Policy directive: "script-src 'self'"
            Asked 2021-Aug-25 at 10:16

            Can someone explain me how can i add CSP meta tag to my header? i tried adding different meta tag to my header but i get more error from CSP



            Answered 2021-Aug-25 at 10:16

            It looks like you already have a published CSP via an HTTP header because a console error saying:

            it violates the following Content Security Policy directive "default-src 'self'"

            while your meta tag contains other default-src sources: default-src 'self' https:*//

            You can check the CSP response HTTP header that you have, the tutorial is here.

            In this case by adding meta tag you'll have 2 CSPs which will work independently each other, therefore CSP in HTTP header will continue to block your scripts.

            Node.js has a Helmet middleware in dependancies, Helmet 4 automatically publishes a default CSP via HTTP header. Check it.
            In this case you have 2 opts:

            • disable Helmet's CSP: app.use( helmet({ contentSecurityPolicy: false, }) ); and use a meta tag.
            • configure CSP header via Helmet (preferred way).

            BTW you have errors in the:



            How to get click handler on animated canvas dot on MapBox map?
            Asked 2021-Aug-06 at 13:52

            I am looking at this demo from MapBox:



            Answered 2021-Aug-01 at 10:21

            Things are actually not as hard as it might seem. As others have suggested you could do it with some trickery - but it is not needed as the required functionality is built into Mapbox itself yet! If you look up the API reference for it's own map object, you'll notice there are a couple of interesting events:

            click, mouseenter, and mouseleave

            Usually those are bound to the actual map and added like:


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


            No vulnerabilities reported

            Install mapbox-gl-js

            You can install using 'npm i xtal-gl' or download it from GitHub, npm.


            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
          • HTTPS


          • CLI

            gh repo clone mapbox/mapbox-gl-js

          • 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