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 mapboxgl from 'mapbox-gl';

const map = new mapboxgl.Map();
//please add legend control after loading mapbox stylefiles, otherwise it causes errors...
map.on('load', function() {
const targets = {
  'pipeline': 'Pipeline',
  'pipeline_annotation': 'Pipeline Label', 
  'meter': 'Water Meter',
  'flow meter': 'Flow Meter', 
  'valve': 'Valve', 
  'firehydrant': 'Fire Hydrant', 
  'washout': 'Washout',
  'tank': 'Tank', 
  'tank_annotation': 'Tank Label', 
  'wtp': 'WTP', 
  'wtp_annotation': 'WTP Label', 
  'intake': 'Intake', 
  'intake_annotation': 'Intake Label', 
  'parcels': 'Parcels', 
  'parcels_annotation': 'Parcels Label', 
  'village': 'Village', 
  'village_annotation': 'Village Label', 
  'dma': 'DMA',
  'dma_annotation': 'DMA Label', 
};

// add legend control without checkbox, and it will be hide as default
map.addControl(new MapboxLegendControl(targets, {showDefault: false, showCheckbox: false, onlyRendered: false }), 'top-right');

// add legend control with checkbox, and it will be shown as default
map.addControl(new MapboxLegendControl(targets, {showDefault: true}), 'bottom-right');

// add legend control with all layers, and it reverse layer order
map.addControl(new MapboxLegendControl({}, {reverseOrder: false}), 'bottom-left');
});

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

Options

showDefault
- true: Legend will be shown as default
- false: Legend will be hide as default
- default value is true if you don't specify the option.
showCheckbox
- true: the checkbox for switching visibility will be added as default
- false: the checkbox will not be added as default
- default value is true if you don't specify the option.
reverseOrder
- true: layers will be ordered from top.
- false: layers will be ordered from bottom.
- default value is true if you don't spefify the option.
onlyRendered
- true: only rendered layers will be shown on legend as default.
- false: all layers' legend will be shown as default.
- default value will be true.

Contribution

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