react-maplibre-ui

> This was a fork of react-mapbox-ui

MaplibreUI provides a minimal layer of abstraction for composing maplibre-gl UI's in an idiomatic React way.

As a base, this library provides you with the following components:

- Map
- MapLayer
- MapSource
- MapMarker

Install

``sh
yarn add react-maplibre-ui


or


npm i react-maplibre-ui
`

Usage

See TypeDocs.

Composing your own MaplibreUI components.

`tsx
import { Map, MapMarker } from "react-maplibre-ui";
import "maplibre-gl/dist/maplibre-gl.css";

const accessToken = "your access token";
const centerCoorindates: LngLatLike = [-79.347015, 43.65107]; // Toronto
const cnTower: LngLatLike = [-79.38694839252216, 43.64265954350144];
const geoJson = {};

const App = () => {
return (
// you can use MapboxGL with an accesstoken
// accessToken={accessToken}

// maptiler usage
mapStyle={https://api.maptiler.com/maps/streets/style.json?key=${accessToken}}
style={{
height: "100vh",
width: "100%",
}}
defaultCenter={centerCoorindates}
>
{/ render a standard marker marker /}


{/ render an html marker /}


{/ render a layer /}
id="area-fill"
source="area"
type="fill"
paint={{
"fill-color": "red",
"fill-opacity": 0.5,
}}
>



);
};
``