mapbox-gl-infobox
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

Mapbox GL JS Infobox

Adds an infobox and/or gradient switch to mapbox-gl

Installation:

npm i mapbox-gl-infobox --save

Usage:

import { MapboxGradientBoxControl, MapboxInfoBoxControl } from "mapbox-gl-infobox";
import { Map as MapboxMap } from "mapbox-gl";

import "mapbox-gl-infobox/styles.css";

const map = new MapboxMap();
map.addControl(new MapboxGradientBoxControl());
map.addControl(new MapboxInfoBoxControl());

Options:

You can also supply your own options.

const layerId = "features";
const minMaxValues = {minValue: 0, maxValue: 100};
const weightGetter = properties => properties ? properties['weight'] : 0;
const gradientOptions: MapboxGradientBoxOptions = {
    layerId,
    minMaxValues,
    weightGetter
};
map.addControl(new MapboxGradientBoxControl(gradientOptions));

const formatter = properties => properties ? `<b>Name:</b> ${properties['name']}` : '';
const infoboxOptions: MapboxInfoBoxOptions = {
    layerId,
    formatter
};
map.addControl(new MapboxInfoBoxControl(infoboxOptions));

Screenshots

Closed

Package Sidebar

Install

npm i mapbox-gl-infobox

Weekly Downloads

34

Version

1.0.9

License

GPL-3.0

Unpacked Size

225 kB

Total Files

11

Last publish

Collaborators

  • eliz_kilic