Getting started

Prerequisites

This package requires to install this peer dependencies as prerequisite.

# >= 4.0.0
npm install maplibre-gl
 
# >= 16.8.0
npm install react react-dom

Install

After you can install the library with this npm package.

npm install maplibre-react-components

Styling

Like the Vanilla MapLibre library, you will need to add one MapLibre compatible stylesheet.

import "maplibre-gl/dist/maplibre-gl.css";

If you want to use the RGradientMarker component, you will need to add an additional stylesheet.

import "maplibre-react-components/style.css";

Optional : If you want to add one modern stylesheet, you can install maplibre-theme. And use his modern style.

npm install maplibre-theme

- import "maplibre-gl/dist/maplibre-gl.css";
+ import "maplibre-theme/icons.default.css";
+ import "maplibre-theme/modern.css";

Compatibility

One of the objectives of this library was to offer as little abstraction as possible with MapLibre. If you use TypeScript you will quickly realize that in many cases you are manipulating the latter's native types. However this also has a cost, this library is not compatible with mapbox-gl.

However, you can use the library with a fork of mapLibre by adding these lines in your package.json.

{
  "dependencies": {
    "maplibre-gl": "npm:<your-maplibre-fork>"
  }
}