Package Exports

@watergis/mapbox-gl-legend

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 (@watergis/mapbox-gl-legend) 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-legend

GitHub

This module adds legend control which is able to create legend panel from mapbox style to mapbox-gl.

This module is using source code of orangemug/legend-symbol. I just adopted this library to normal Mapbox GL Plugin. Thanks so much to develop this library!

Installation:

npm i @watergis/mapbox-gl-legend --save

Demo:

See demo.

Test:

npm run build
npm start

open http://localhost:8080.

Usage:

import MapboxLegendControl from "@watergis/mapbox-gl-legend";
import '@watergis/mapbox-gl-legend/css/styles.css';
import { Map as MapboxMap } from "mapbox-gl";

const map = new MapboxMap();
//please add legend control after loading mapbox stylefiles, otherwise it causes errors...
map.on('load', function() {
const targets = {
        'pipeline': 'Pipeline',
        'meter': 'Water Meter',
        'flow meter': 'Flow Meter', 
        'valve': 'Valve', 
        'firehydrant': 'Fire Hydrant', 
        'washout': 'Washout',
        'tank': 'Tank', 
        'wtp': 'WTP', 
        'intake': 'Intake', 
        'parcels': 'Parcels', 
        'village': 'Village', 
        'dma': 'DMA'
};
map.addControl(new MapboxLegendControl(targets), 'top-right');
});

Specify your layers which you want to add the legend by the control.

Contribution

This Mapbox GL Legend Control is still under experimental, so most welcome any feedbacks and pull request to this repository.