Mapbox Themes

This package contains various Mapbox themes for use with Brightlayer UI.

Installation

Install with npm

npm install --save @brightlayer-ui/mapbox

or yarn

yarn add @brightlayer-ui/mapbox

Usage

To use the Brightlayer UI themes for Mapbox, you simply need to pass the theme file into the configuration object for mapbox initialization.

Angular

Import the theme into your target typescript file:

// app.component.ts
declare var require;
const defaultTheme = require('@brightlayer-ui/mapbox/default.json');
const darkTheme = require('@brightlayer-ui/mapbox/dark.json');

Bind the theme to the style attribute of the <mgl-map>:

// app.component.html
<mgl-map
    [style]="theme" // bind to your theme variable here
    [zoom]="[10]"
    [center]="coordinates"
>

React

Import the theme into your target file:

// App.js
const defaultTheme = require('@brightlayer-ui/mapbox/default.json');
const darkTheme = require('@brightlayer-ui/mapbox/dark.json');

Apply the theme variable to the style parameter of the mapboxgl configuration:

// App.js
const map = new mapboxgl.Map({
    container: this.mapContainer,
    style: darkTheme, // add the theme variable here
    center: [lng, lat],
    zoom
});

More Information

For more detailed instructions on using Mapbox in your application, read about our Visualization Patterns and see our demos for Angular and React.