Package Exports

mapbox-gl-infobox
mapbox-gl-infobox/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mapbox-gl-infobox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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