The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.


MapLibre GL

MapLibre GL is a community-led fork derived from mapbox-gl-js before their switch to a non-OSS license.

Migrating from mapbox-gl

If you depend on mapbox-gl directly, simply replace mapbox-gl with maplibre-gl in package.json:


=1.15.2" } ">
  "dependencies": {
-    "mapbox-gl": "^1.13.0"
+    "maplibre-gl": ">=1.15.2"

if it is important to you that the behaviour is similar to mapbox-gl version 1.x.

And replace mapboxgl with maplibregl in your JavaScript and optionally in your HTML/CSS code:

MapLibre GL JS is distributed via For more informations please see MapLibre GL is on

- + + - var map = new mapboxgl.Map({ + var map = new maplibregl.Map({ -

Want an example? Have a look at the official MapLibre GL JS Documentation.

Use MapLibre GL JS bindings for React ( and Angular ( Find more at awesome-maplibre.


This project's initial plans are outlined in the Roadmap project. The primary goal is consistency and continued bug fixes and maintenance as we advance.

MapLibre GL is developed following Semantic Versioning (2.0.0).

Getting Involved

Join the #maplibre slack channel at OSMUS: get an invite at

Community Leadership

You can find the official status of the backing community and steering committee in the document.

Avoid Fragmentation

If you depend on a free software alternative to mapbox-gl-js, please consider joining our effort! Anyone with a stake in a healthy community-led fork is welcome to help us figure out our next steps. We welcome contributors and leaders! MapLibre GL already represents the combined efforts of a few early fork efforts, and we all benefit from "one project" rather than "our way". If you know of other forks, please reach out to them and direct them here.

Thank you Mapbox πŸ™πŸ½

We'd like to acknowledge the amazing work Mapbox has contributed to open source. The open source community is sad to part ways with them, but we simultaneously feel grateful for everything they already contributed. mapbox-gl-js 1.x is an open source achievment which now lives on as maplibre-gl. We're proud to develop on the shoulders of giants, thank you Mapbox πŸ™‡πŸ½β€β™€οΈ.

Please keep in mind: Unauthorized backports are the biggest threat to the MapLibre project. It is unacceptable to backport code from mapbox-gl-js, which is not covered by the former BSD-3 license. If you are unsure about this issue, please ask!


MapLibre GL is licensed under the 3-Clause BSD license.

  • Shield rotation

    Shield rotation

    Image symbols placed along a line currently rotate with the line, similar to what text along a river or street does. We would like to place multiple images along a line that are always upright. The images are highway shields and highways in the US can have multiple shields. This pull requests is work in progress and facilitates collaboration on the new feature.

    ο»Ώ## Launch Checklist

    • [x] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
    • [x] Briefly describe the changes in this PR.
    • [x] Include before/after visuals or gifs if this PR includes visual changes.
    • [ ] Write tests for all new functionality.
    • [ ] Document any changes to public APIs.
    • [ ] Post benchmark scores.
    • [ ] Manually test the debug page.
    • [ ] Suggest a changelog category: bug/feature/docs/etc. or "skip changelog".
    • [ ] Add an entry inside this element for inclusion in the maplibre-gl-js changelog: <changelog></changelog>.
    opened by wipfli 117
  • Migrate benchmarks

    Migrate benchmarks

    For easier collaboration on migrating the benchmarks, I rebased the work of @xabbu42 on main and create a branch in this repository. Let's continue here.

    opened by wipfli 108
  • Migrate to typescript

    Migrate to typescript

    Launch Checklist

    • [x] confirm your changes do not include backports from Mapbox projects (unless with compliant license)
    • [x] document any changes to public APIs:
      • Removed version from library API.
      • Remove support of IE11
    • [ ] post benchmark scores
    • [x] manually test the debug page
    • [x] apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
    • [x] add an entry inside this element for inclusion in the maplibre-gl-js changelog: <changelog></changelog>

    Motivation and some background:

    The current code run on node 10, the migration to node 14 is difficult since some of the libraries are no longer supported. This is also true regarding documentation of essential libraries such as flow (for typings) and tap (for testing). The goal of this PR is to update the stack to a more widely used technologies and differentiate this library from mapbox-gl to avoid license breach.


    Typescript for type checking Jest for testing rollup for packaging eslint for code checking

    The following boilerplate code would be used to facilitate the above widely used technologies.

    This is a very large task and we'd appreciate any help from anyone :-)

    Task by priority:

    • [x] Convert src file from Flow to Typescript
    • [x] Upgrade CI and references script to esm and node 14
    • [x] Make lint pass on all source files
    • [x] Make build pass on tsc including rollup required changes
    • [x] Remove usage of @mapbox/geojson-types and use @types/geosjon.
    • [x] Remove usage of @mapbox/point-geometry and bring it in to this library (after converting it to typescript as this is only one file).
    • [x] ~~Convert test, debug, benchmark code to typescript~~
    • [x] ~~Make all linters pass (not just for the main library) #272~~
    • [x] ~~Make their tsc pass~~
    • [x] ~~Convert tests to use jest #273~~
    • [x] Make all tests pass
    • [x] ~~Remove tap and related code around it #273~~
    • [x] ~~Update dependencies (referenced in package.json) #270~~
    • [x] ~~Change types only declarations to .d.ts files #271~~
    • [ ] Make sure this PR doesn't break how the docs repo is using this repo
    • [x] Make sure @maplibre/style-spec is working
    • [x] Make sure everything is working as expected and merge back to main - see if there are feature that need to be added to close the gap from when this branch started.

    I have decided to reduce the number of changes introduced in this migration - i.e. keep the tests as they are now, do not convert unit tests to typescript. There will be an option later to do all these changes after things starts to work as expected in other PRs.

    opened by HarelM 105
  • Support custom tiles source

    Support custom tiles source

    This PR should facilitate for feature request describe here: Support custom source #29

    I've added documentation above the function it self, I don't know how to convert this to proper documentation. Any help would be appreciated.

    As a side note, since I'm using a patch version of mapbox-gl-js I will only be able to help testing (for example current rc) only after this is merged... Sorry... I would prefer to have all the breaking changes (mainly name changes etc) as soon as possible since I prefer to work in order to migrate to this library only after the breaking changes had occurred to make sure that everything is working once and I won't need to do it in two steps (first only to migrate to this library and the second to make sure I fix things that were broken assuming I want to upgrade to a later version, which I probably will). This is of-course only my point of view and needs...

    opened by HarelM 71
  • Add support for multiple sprites in one style

    Add support for multiple sprites in one style

    Changed API


    Main classes that were changed (inner impl.)

    Map, Style.

    Updated API


    Now supports sprite value diffing. Namely, in case the sprites change with a call to setStyle, all the old sprites are removed and the new ones are added. So it's not exactly "diff"ing in its most accurate sense, but AFAIK changing sprite with setStyle previously was not possible at all.

    New API

    style.json's sprite property

    This PR adds support for multiple sprite files per one style file while keeping the backwards compatibility intact.

    Previously, a sprite could only be defined as a single URL to fetch both .json and .png files from. Now, one can also pass a JSON-array with {id: "id", url: "url"} objects to have more than one sprite loaded per one style file (i.e. one sprite per one map).

    So both following declarations are now OK:

    sprite: ""


    sprite: [{ id: "sprite1", url: "" }, { id: "sprite2", url: "" }]

    (As previously, the sprite declaration can still be skipped allogether).

    Resrtictions and validation.

    All the id and all the urls must be unique. This is checked both initially on validating the style and using the new puclic API (see below), when validation is not explicitly disabled for them.


    Each sprite's id is used as a namespace for its images' names. So, if you sprite declaration looks like this:

    sprite: [{ id: "sprite1", url: "" }, { id: "sprite2", url: "" }]

    then all the images from both sprites should use sprite1: and sprite2: prefixes when referenced. For example (for the above declaration):

    // for a symbol layer
    "icon-image": "sprite1:airport"

    Images from the sprite with id "default" are not prefixed.

    sprite: [{ id: "default", url: "" }, { id: "sprite2", url: "" }]
    // ...
    "icon-image": "airport"
    // ... but you still need to prefix everything that's not "default"
    "icon-image": "sprite2:toilet"

    That's done for the backwards-compatibility reasons. So that you don't have to majorly change your style file in case you want to start using the multi-sprites feature.

    Public methods


    Returns the currently used sprite always as an array. When no sprite is set for the map, it's [].

    map.addSprite(id, url, options?)

    Adds a sprite to the map style.

    id - The ID of the sprite to add. Must not conflict with existing sprites. url - The URL to load the sprite from options - optional StyleSetterOptions object. The same as for the other similar PI methods (like {validate: false} e.g.)

    Fires an error event if validation fails.


    Removes a sprite with the given ID from the map. Fires an error event in case there's no sprite with the specified ID exist.

    id - The ID of the sprite to add

    If the sprite is declared as a single URL, you must use "default" as the ID.

    map.setSprite(spriteUrl, options?)

    Sets the value of the style's sprite property.

    spriteUrl - Sprite URL to set. options - optional StyleSetterOptions object. The same as for the other similar PI methods (like {validate: false} e.g.)

    Only supports string-form declarations.


    @ambientlight ???

    waiting for code review fixes 
    opened by smellyshovel 64
  • Terrain 3D

    Terrain 3D

    A working prototype, which adds 3d-terrain to maplibre-gl with the following features:

    Already done:

    • [x] create a regular 3d-mesh.
    • [x] render all layers, except symbols, into a framebuffer(s), which textures later used on the terrain-mesh.
    • [x] add the third dimension to all symbols/circle/fill-extrusion layers and the collision index.
    • [x] implentation, based on a coords-framebuffer, to unproject screen to mercator coordinates.
    • [x] Elevate camera over terrain.
    • [x] Correct lngLat coordinates in all mouse-events.
    • [x] hide symbols behind mountains.
    • [x] enable/disable terrain mode

    Still open:

    • [ ] Correct calculation of coveringTiles in transform.js.
    • [x] Test/Improve performance.
    • [x] Write a document how the code works in detail.
    • [ ] document any changes to public APIs

    Nice to have, but not on my agenda:

    • tilt more than 60 degrees & implement a sky.
    • add 3d dimension to showTileBoundaries & showCollisionBoxes.
    • ray/triangle calculation for pixel -> mercator projection. If this this done, the coords-framebuffer can be easily transformed to a depth-framebuffer.
    • 3D Camera animations.

    Need Help:

    • confirm all changes do not include backports from Mapbox projects. I think this is already guaranteed, but it needs a confirmation!
    • correct calculation of transform.coveringTiles, because i do not have any math background in this!
    • testing & writing tests.
    • post benchmark scores

    This code is already a work in progress! There are a some of FIXME-3D in code, also this is my first experience in webgl, so i am looking forward for feedback.

    Also this code is not a copy of mapbox-gl 2.0, i initially looked onto the first 3 commits of mapbox-gl 2.0 at 8.Dec.2020, and than i started my work with a very different approach of implementation. For example:

    • ~~all 3d is done with 3d-coordinates. mapbox uses 2d coordinates and calculates the 3d dimension in the shader.~~
    • unproject from screen to mercator coordinates is done via a coordinate-framebuffer, instead of ray/triangle calculation.
    opened by prozessor13 63
  • Terrain 3D

    Terrain 3D

    @prozessor13 thank you for all the work you did to make 3D happen in MapLibre GL JS.

    This pull request is a continuation of #165 with the goal to merge the terrain3d branch into main.


    flyTo example

    • [x] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
    opened by wipfli 61
  • Update Development Environment - Support Node v14

    Update Development Environment - Support Node v14

    If I'm right, we don't fully support Node v12+ yet because of the way we integrate ECMAScript modules.

    There are two options since Node v12+: : Via library or via flag. As far as I can see, we use the library esm.

    By the way: Mapbox changed the way to use ECMAScript modules (esm) in PR 10367. They do not use esm any more.

    ~~I have no experience with esm. The last version is almost 2 years old. Nevertheless, I suggest updating to this one, because this way our Node scipts are usable under Node v12+. Not everything runs smoothly with this PR. For example, many tests fail. But maybe so we can better work on supporting Node v12+.~~

    I decided to use "type": "module" in main package.json because it is more future-proof. For this reason, I have had to change Node.js require toES6 import/export in many places. In addition, the specification of file extensions is mandatory.

    Launch Checklist

    • [x] confirm your changes do not include backports from Mapbox projects (unless with compliant license)
    • [x] briefly describe the changes in this PR
    • [ ] write tests for all new functionality -> tests have to be correted
    • [ ] document any changes to public APIs
    • [ ] post benchmark scores
    • [ ] manually test the debug page
    • [x] apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
    opened by astridx 45
  • Revert commits to fix `test-render`

    Revert commits to fix `test-render`

    This is related to #326, #365. It shouldn't be merged just yet... It should make a lot more tests pass and allow to find other places that were not reverted, I hope...

    Expand all to allow seeing diff in all files:

    for(i=0; i<document.getElementsByClassName('js-button-text').length; i++){ document.getElementsByClassName('js-button-text')[i].click();}

    Before typescript commit ref: 49bc4ca45aba6b6af98df7e1e91735dcb0d6f20f

    Latest commit: a12092bdcaa09732f34ad537a5d2e83523d8e7b8


    opened by HarelM 42
  • Rename CSS classes from `mapboxgl-*` to `maplibre-*`

    Rename CSS classes from `mapboxgl-*` to `maplibre-*`

    Question to @maplibre/core -- should all CSS classes be renamed to maplibregl-*, or do we want to keep the original mapboxgl-* to be compatible with other code? Would this be a stylistic or a legal requirement? My understanding is that this would be part of the API, and thus could stay as is. Also I suspect this change would be a relatively painful for the endusers.

    opened by nyurik 36
  • Webview app crashes with terrain 3D

    Webview app crashes with terrain 3D

    It seems that the latest memory fix was not enough to make the app stable, I think. Related to #1291 The app crashes after panning around sometime.

    maplibre-gl-js version: 2.2.0-pre.3

    browser: Android Webview inside Cordova app

    I tried to make the following minimal reproduction but was not able to cause it to crash on my device: The following is the app if anyone would like to install it: The code for it is in a branch here:

    It's an angular app wrapped in Cordova webview basically.

    Steps to Trigger Behavior

    1. Open the app
    2. Tilt the map to max
    3. Pan the map until the os kills it

    Link to Demonstration

    Expected Behavior

    App should not crash

    Actual Behavior

    App crashes on a samsung galaxy s20 device (a strong device).

    @prozessor13 let me know if there's anything I can test in order to see what's the limitation of the current code - maybe set a different max cache limit or something...?

    I haven't dug into the logcat device log to see that it actually crashes on out of memory, but I can do that if needed...

    bug PR is more than welcomed Terrain 3D 
    opened by HarelM 33
  • Refact callback-event communication model to be `Promise`-based instead

    Refact callback-event communication model to be `Promise`-based instead

    The beginning of a series of refactoring PRs to get rid of the legacy callback-event-based communication model in favor of a Promise-based approach.

    What's done by this PR:

    1. First and foremost: refactored the src/util/ajax.ts file

      • Reconsidered all its functions. The ones that were not used (like postData) are removed
      • All the separate small utility functions which were used solely by the same ajax.ts file are incorporated into the bigger functions which are used by the code outside of the file. E.g. isSameOrigin was used only once by getVideo, so now it's a part of getVideo. Some other functions splitted into multiple sub-functions are combined into a single one to avoid confusion about what's exported why and what's used where. E.g. arrayBufferToCanvasImageSource now combines in itself 2 small sub-functions that were previously 2 separate ones.
      • All the methods are exported now to be able to test them, but the ones not used in runtime are marked as @private. They are also in the bottom of the file.
      • All the functions are JSDoc-commented.
      • Important. Public functions like makeRequest now don't accept a callback function anymore. Instead, they return an object consisting of 2 fields: response and cancel. response is a promise that resolves with 3 fields: data (holds the actual response), cacheControl and expires. The last two hold the values of respective response's HTTP headers. There are places in consumer-code that rely on these fields. Though still a point to consider: do we really need manual cache control?
      • Everything (almost) is covered with unit tests. Coverage % is now >99. The only not-enough-tested function is getReferer, because I don't know how to test the case when the current url is a data blob.
      • getReferrer is renamed to getReferer (and obviously for all usages as well) to better reflect that it's about the referer HTTP header. Yes, it's spelled with one "r".
      • Both Fetch API and XHR API are left intact. XHR is not removed due to
      • AJAXError is completely removed from the project. There's no need in it since all the fetching-related errors can be represented using existing classes. Now it's done using the most generic Error, but that's a point to reconsider
      • Important. tile_request_cache dep is removed. See below for clarifications
      • TEMP getImage doesn't support max parallel requests. But did it really?.. Needs to be resolved before merging.
    2. package.json

      • introduces a new dependency for mocking the Fetch API
      • Removed the documentation lint script because it fails and doesn't allow to run unit tests. Not sure, why. Need help with this as this needs to be resolved before merging the PR.
    3. index.ts

      • AJAXError is removed. See above
      • clearStorage public method is removed due to manual tile caching control removal. See below
      • addProtocol: updated documentation (see the relevant discussion in Slack) and API (to correspond to the updated ajax model).
    4. map.ts - _setCacheLimits is removed due to removal of tile_request_cache. See clarifications below

    5. Sources, utils, UI, etc. (src/...) - See below

    Removed tile_request_cache


    Seems like this file for manual tile cache control was not used at all. The research shows that it used to exist only for solving some very old target env.-specific bugs (namely safari) that have already been fixed long time ago.

    From now on all the cache-manipulation should be performed by the browser based on request and response headers. We should not do it manually.

    Sources, utils, UI, etc.

    All the other modified files are modified just slightly and just to support the new Promise-based model. There's a thing however.

    Instead of getting completely rid of all the callbacks, I only got rid of them in ajax.ts file. Therefore all the consumer code must still communicate with all the other code using callbacks and events. Oherwise it would be too much of a change for a single PR. So, for example. If loadTile method in geojson_source uses getJSON to load some json and getJSON now returnes an object with a promise, we can not forward it to the next consumer as is.

    What we do instead, is we await the promise (with then not to make the function async - for compatibility with existting code) and only after then we invoke the consumer's callback. Basically, just an adapter pattern (but not splitted into a separate function to avoid overcomplicating things):


    function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
        const request = getArrayBuffer(params.request, (err?: Error | null, data?: ArrayBuffer | null, cacheControl?: string | null, expires?: string | null) => {
            if (err) {
            } else if (data) {
                callback(null, {
                    vectorTile: new vt.VectorTile(new Protobuf(data)),
                    rawData: data,
        return () => {


    function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
        const request = getArrayBuffer(params.request);
        request.response.then((response) => {
            callback(null, {
                vectorTile: new vt.VectorTile(new Protobuf(,
                cacheControl: response.cacheControl,
                expires: response.expires
        }).catch(err => {
            if (err.message === 'aborted') return; // *
        return () => {

    Once again, the idea is to further refact the loadVectorTile function to become an async function and remove its callback.

    The line above marked with * is a one to pay attention to.

    Since now, if a request was canceled, the response promise of it throws an Error("aborted"). This is done for 2 reasons:

    1. It's now impossible to just skip callback invokation as it used to be (because there's no callback anymore)
    2. IMHO, it's more logical then resolving the promise with some synthetic value (like undefined e.g.). At least, it's safer. At least in theory.

    Here's a rough list of other files which could be considered ajax.ts's deps:


    Any further refactoring should start with any of these files ideally.

    Tests (other than ajax.test.ts)

    There's no huge changes to the tests, but still. Anytime you change even a single character in tests, the changes are considered breaking.

    Because of geting rid of type and const for resource type and substtituting them with and enum MapLibreResourceType, for some tests it was necessary to update the values accordingly. E.g. style.test.ts. In some tests that was the only change. So they could be considered safe.

    For some other tests (like the same style.tes.ts) some tests where removed (in this case due to changes to loadSprite (mentioned below)).

    Another interesting tests-related thing to mention. Take a look:


    I don't know why it used to work previously. Is that the case of event loop? When Promises take longer than callbacks. So the changes now don't apply immediately, but rather after the event was thrown. Shouldn't that have been the case with callbacks as well though? Not sure...


    Removed request manager passed as a parameter. Don't see any need it passing it around when it can be created on demand.

    Moreover, don't see any real reason to have it at all. The name is very misleading. It doesn't manage anything, but rather it's just a set of incapsulated methods (which could be separated into a module instead).


    Some changes (like _setCacheLimits and addProtocol) are breaking. Especially addProtocol, because it's public. _setCacheLimits is not, AFAICS. Even though it's exported, it's not documented anywhere. So, this is a v3.0.0 candidate, not v2.x.x.

    The only final version (after all the code comments are resolved!!!) is ajax.ts and its unit tests. All the other modified files should be working as expected, but need further refactoring.

    Tell me please if I forgot something. Will also try to add some code comments through review now.

    opened by smellyshovel 6
  • Revisit support for zoom > 25 on raster layers

    Revisit support for zoom > 25 on raster layers


    This library does not currently support zoom levels greater than 25 on raster layers. This is a valid use case for a number of applications, e.g., when rendering highly detailed survey imagery of land.

    The issue was raised on the Mapbox repo ages ago, where the maintainers said:

    zoom levels above 25 are problematic with the tiling scheme used here. We do not plan to change this.

    The implication there was that the tiling scheme itself is a limitation, but this does not sound like a valid assertion because other libraries (e.g., Leaflet) happily handle zoom levels way higher than 25. According to the leaflet maintainer, Leaflet should have no problem handling zoom levels up to 50.

    The issue at present is that Maplibre cannot accurately determine which tiles intersect with the viewable area, and you get glitchy behaviour at zoom levels above 25 with tiles randomly appearing/disappearing as you pan the area. A very simple proof of concept for one way to work around this issue is here - it applies a fudge factor at higher zoom levels, so that tiles in the vicinity are included in the intersection. This works, and allows rendering up to levels of 26 (high levels would also work, just haven't applied a fudge factor for them). Of course, that is not to imply that this is an ideal solution - just that it is in principle possible to support higher zoom levels and that the tiling scheme itself is not the problem.

    The questions that I would like to raise with this issue:

    • Would the Maplibre team be open to considering revisiting support for high zoom levels?
    • Is there really a fundamental limitation that prevents it (Leaflet would seem to provide a counterfactual), or is there conceivably a way to make it work?
    • Would a workaround of the sort mentioned above (link to diff) be something acceptable to the maintainers, if placed behind a configuration option so that it isn't enabled by default? What would we need to do to make that workaround acceptable to build into the library?
    • It feels like a lot of the current limitations come from having to support 3D modes. Is there something that can be done to make it work for 2D modes at least?
    enhancement PR is more than welcomed 
    opened by solarissmoke 3
  • setTerrain causes hillshading opacity to increase and detail to decrease

    setTerrain causes hillshading opacity to increase and detail to decrease

    maplibre-gl-js version: 2.4.0 or 3.0.0-pre.3

    browser: Vivaldi, Chrome, Firefox

    Steps to Trigger Behavior

    1. render map with hillshading
    2. enable 3D terrain

    Link to Demonstration

    Expected Behavior

    After pressing "Set terrain" button shading opacity should not change and hillshading detail should stay the same.

    Actual Behavior

    After pressing "Set terrain" button the shading opacity rapidly increases and hillshading detail decreases.

    bug need more info Terrain 3D 
    opened by zdila 6
  • Firefox WebGL warning (Alpha-premult and y-flip are deprecated for non-DOM-Element uploads).

    Firefox WebGL warning (Alpha-premult and y-flip are deprecated for non-DOM-Element uploads).

    When running in Firefox we get the following warning: WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.

    Google shows up the following:

    Is this an issue or a performance limitation we should be concerned about (as the Firefox developers say this path isn't optimized and should not be used)?

    opened by jwoodwardtfx 0
  • Top-level export `Map` conflicts with built in Javascript type

    Top-level export `Map` conflicts with built in Javascript type


    It is natural to use a named import in esm. Unfortunately, this conflicts with the built-in javascript Map class, which can result in developer confusion and typescript issues.

    import {Map} from "maplibre-gl";

    Design Options

    1. Rename the main map constructor and type to something like MapLibre, MapView or MapPane.
    2. Leave the type as-is and provide the recommendation to import { Map as MapLibre } from "maplibre-gl.
    3. Don't export the Map constructor and instead expose a factory method like createMap.
    opened by rotu 1
  • inline types into d.ts

    inline types into d.ts

    After this PR, the released maplibre-gl.d.ts should be self-contained, requiring no additional external libraries to resolve types.

    1. Use a json file to store config. Especially adding so many extra command line options, this makes the build process a bit more straightforward.
    2. The previous d.ts has a bunch of imports. This means you needed to install those type packages to properly consume the exported types. This should no longer be the case.:
    import Point from '@mapbox/point-geometry';
    import TinySDF from '@mapbox/tiny-sdf';
    import { VectorTileFeature, VectorTileLayer } from '@mapbox/vector-tile';
    import { mat2, mat4, vec4 } from 'gl-matrix';
    import { PotpackBox } from 'potpack';

    Note that there are some conflicts between declarations of types named Point and Feature. I'm not quite sure how to resolve them. These don't break the build but do produce some warnings that will probably show up in the IDE as well:

    dist/maplibre-gl.d.ts(1106,15): error TS2395: Individual declarations in merged declaration 'Point' must be all exported or all local.
    dist/maplibre-gl.d.ts(1595,13): error TS2300: Duplicate identifier 'Feature'.
    dist/maplibre-gl.d.ts(3149,36): error TS2339: Property 'type' does not exist on type 'GeoJSON'.
    dist/maplibre-gl.d.ts(3214,18): error TS2395: Individual declarations in merged declaration 'Point' must be all exported or all local.
    dist/maplibre-gl.d.ts(3273,18): error TS2300: Duplicate identifier 'Feature'.
    dist/maplibre-gl.d.ts(3295,18): error TS2315: Type 'Feature' is not generic.
    Error: Compiled with errors
    opened by rotu 7
A Mapbox GL react native module for creating custom maps

A Mapbox GL react native module for creating custom maps

React Native Mapbox 1.6k Jan 5, 2023
Travel Map Pin Application Built Using React And MapBox

MERN Ozkan's Travel Pin Application Demo: Tech Stack; FrontEnd React MapBox Local Storage Axios TimeagoJS

null 19 Dec 29, 2022
A React binding of mapbox-gl-js

React-mapbox-gl | Documentation | Demos React wrapper for mapbox-gl-js. Components Proxy components (proxy between React and Mapbox API) ReactMapboxGL

Alexandre Rieux 1.8k Dec 20, 2022
React wrapper for mapbox-gl-geocoder for use with react-map-gl

react-map-gl-geocoder React wrapper for mapbox-gl-geocoder for use with react-map-gl. Demos Simple Example - Ignor

Sam Miyakawa 117 Jan 1, 2023
React Component Library for Mapbox GL JS

Urbica React Mapbox GL JS React Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector til

Urbica 392 Dec 24, 2022
πŸ—Ί Mandelbrot set and Julia set explorer made with React and WebGL

Mandelbrot Maps Mandelbrot Maps is an interactive fractal explorer built using React and WebGL.

Joao Maio 10 Nov 18, 2022
5kB WebGL globe lib.

A lightweight (5kB) WebGL globe lib. The name "COBE" stands for Cosmic Background Explorer. Demo and configurations Use with React: https://codesandbo

Shu Ding 2k Jan 9, 2023
Project Travel Companion App - Build and Deploy an advanced Travel Companion Application using Google Maps

Travel Advisor Introduction Build and Deploy an advanced Travel Companion Applic

Ashish Choudhary 2 Mar 13, 2022
A declarative React interface to Google Maps

React Google Maps A declarative React interface to Google Maps. Check it out: Example usage API docs What's new Important Notes This is an alpha relea

Pieter Vanderwerff 222 Nov 8, 2022
react-maps - A map component for React

Maps for React A map component for React, the declarative UI library. Allow your React sites to use Google Maps easily. Example In the render-function

Matti Nelimarkka 44 Feb 17, 2022
React.js Google Maps integration component

react-google-maps React.js Google Maps integration component Introduction Installation Usage & Configuration Changelog The changelog is automatically

Tom Chen 4.5k Dec 24, 2022
A Google Maps component for React.js

React Gmaps A Google Maps component for React.js Features Lazy Google Maps loading Easy to use Installation $ npm install react-gmaps --save Demo http

Michele Bertoli 314 Nov 13, 2022
Companion code to the "How to Write a Google Maps React Component" Tutorial

Google Map React Component Tutorial A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a tes

Fullstack React 1.6k Jan 2, 2023
ReactJS Maps without external dependencies

Pigeon Maps - ReactJS maps without external dependencies Demo: (using maps from OSM and Stamen) What is it? Are you tired

Marius Andra 3.3k Jan 4, 2023
A React autosuggest for the Google Maps Places API.

React Geosuggest A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too. Demo L

Ubilabs 1k Dec 23, 2022
React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Paul Le Cam 4.4k Jan 5, 2023
New markers on tap + history, using React Native Maps for study purposes.

Mobile challenge New markers on tap + history, using React Native Maps for study purposes. Participants | Rafael Ferreira Techs & Libs React Native St

Rafael Ferreira 0 Dec 16, 2021
Simple loader to use google maps services into your react applications

react-google-maps-loader React Component to use google maps services into your react applications using a render prop. Getting started You can downloa

CΓ©dric Delpoux 54 Sep 7, 2022
React component Maps API 2GIS

React component Maps API 2GIS

2GIS 20 Mar 9, 2022