Nurturing Palpable Magnificence

    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

    Install

    npm i mapbox-gl-infobox

    DownloadsWeekly Downloads

    11

    Version

    1.0.9

    License

    GPL-3.0

    Unpacked Size

    225 kB

    Total Files

    11

    Last publish

    Collaborators

    • eliz_kilic