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

    1.0.10 • Public • Published

    Mapbox GL JS Style Switcher

    Adds a style switcher to mapbox-gl

    Installation:

    npm i mapbox-gl-style-switcher --save

    Demo:

    Usage:

    import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
    import { Map as MapboxMap } from "mapbox-gl";
    
    import "mapbox-gl-style-switcher/styles.css";
    
    const map = new MapboxMap();
    map.addControl(new MapboxStyleSwitcherControl());

    Options:

    If you want to supply your own list of styles, pass them in the constructor.

    import { MapboxStyleDefinition, MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
    
    const styles: MapboxStyleDefinition[] = [
        {
            title: "Dark",
            uri:"mapbox://styles/mapbox/dark-v9"
        },
        {
            title: "Light",
            uri:"mapbox://styles/mapbox/light-v9"
        }
    ];
    
    // Pass options (optional)
    const options: MapboxStyleSwitcherOptions = {
        defaultStyle: "Dark",
        eventListeners: {
     // return true if you want to stop execution
     //           onOpen: (event: MouseEvent) => boolean;
     //           onSelect: (event: MouseEvent) => boolean;
     //           onChange: (event: MouseEvent, style: string) => boolean;
        }
    };
    
    map.addControl(new MapboxStyleSwitcherControl(styles, options));

    If you want to specify a default style, pass them in the constructor as second argument.

    map.addControl(new MapboxStyleSwitcherControl(styles, 'Dark'));

    Screenshots

    Closed

    Open

    Install

    npm i mapbox-gl-style-switcher

    DownloadsWeekly Downloads

    1,125

    Version

    1.0.10

    License

    GPL-3.0

    Unpacked Size

    50.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • eliz_kilic