watergis / mapbox-gl-legend Goto Github PK

View Code? Open in Web Editor NEW

111.0 3.0 17.0 43.72 MB

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

Home Page: https://watergis.github.io/mapbox-gl-legend/

License: MIT License

CSS 12.98% JavaScript 7.39% TypeScript 79.63%

mapbox-gl-js legend demo

mapbox-gl-legend's Introduction

mapbox-gl-legend

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!

for Maplibre GL JS users

Please consider to use maplibre-gl-legend for Maplibre GL JS.

Installation:

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

Use CDN

<link href='https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'></script>
<script src="https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.js"></script>
<script>
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', 
        'contour-line': 'Countour',
        'contour-label': 'Contour Label',
        'hillshade': 'Hillshade'
    };
    map.addControl(new MapboxLegendControl(targets, {
        showDefault: false, 
        showCheckbox: false, 
        onlyRendered: true,
        reverseOrder: true
    }), 'top-right');
})
</script>

Furthermore, you may download specific version's scripts and css locally from release page.

Demo:

Try codesandbox.

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');

// if you want to use basemap from Mapbox in v2
map.addControl(new MapboxLegendControl({}, {accesstoken: 'your mapbox accesstoken'}));

// if you want to customize the title of the legend
map.addControl(new MapboxLegendControl(targets, {title: 'Some Custom Title'}), 'top-right');

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.
title
- specify the title of the legend.
- default value is Legend if you don't specify the option.

How to release

npm version patch # it increase patch version 0.0.X
npm version minor # it increase minor version 0.x.0
npm version major # it increase major version x.0.0
git push origin master --tag
# release CI will create draft release in Github pages, then publish it if it is ready.
# publish CI will deploy npmjs and Github Packages.

Contribution

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

mapbox-gl-legend's People

Contributors

Stargazers

Watchers

Forkers

geoyogesh delinfoline liang0 nelnawawy-ventiv sitocopu samialavi kaedejima luko12 gis-dong han-tun oyelowo flyingliang matrixsociety voole dobatovkin caslu3400gis jacobgeogeek

mapbox-gl-legend's Issues

Minor incompatibilities with maplibre-gl-js

Thanks for your plugin, it works great! Lately I migrated some sites from mapbox-gl to maplibre-gl and your plugin mostly works well. I only have two issues:

Layer legends only show up after checking "Only rendered" checkbox, both with activated and deactivated parameter onlyRendered.
404 not found error show up in console trying to load undefined.json and [email protected]. Are these files necessary for the plugin to work correctly?

This happens both on Chrome and Firefox using latest maplibre 2.4.0.

Errors when loading sprites

The plugin seems to working correctly but is giving these errors when loading sprites. When I comment out lines 261, 262 in the file dist/index.js the errors stop.

Using mapbox-gl-legend and mapbox-gl-export together causes error

Describe the bug
When using mapbox-gl-legend and mapbox-gl-export together (using mapbox-gl-js 2.6.0), no buttons appear and I get the following error message:
Uncaught TypeError: watergis.Size is undefined

To Reproduce
Just use mapbox-gl-legend and mapbox-gl-export together and look at the console output.

I used the following code, you can try it on https://codepen.io/pen/:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js"></script>
<link href='https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.css' rel='stylesheet' />
<script src="https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.js"></script>
<link href='https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.css' rel='stylesheet' />
<script src="https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoidWJpbGFicyIsImEiOiJjaXc3dGQzb2wwMDEwMnlwNXlsejAyOXF6In0.2C7DfhUhiVWgE_ek5N5GzQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});


  map.addControl(new watergis.MapboxExportControl({
      PageSize: watergis.Size.A3,
      PageOrientation: watergis.PageOrientation.Portrait,
      Format: watergis.Format.PNG,
      DPI: watergis.DPI[96],
      Crosshair: true,
      PrintableArea: true,
  }), 'top-right');
  
  
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', 
        'contour-line': 'Countour',
        'contour-label': 'Contour Label',
        'hillshade': 'Hillshade'
    };
    map.addControl(new watergis.MapboxLegendControl(targets, {
        showDefault: false, 
        showCheckbox: false, 
        onlyRendered: true,
        reverseOrder: true
    }), 'top-right');
})
</script>
 
</body>
</html>

Expected behavior
Works together without causing error.

Desktop (please complete the following information):
Tested using Chrome and Firefox

Configure the title of the legend

Is your feature request related to a problem? Please describe.
After looking at the Options values, no options exist to override the Title of the Legend.

Describe the solution you'd like
It will interest the user to Change the Title to something else. If the user does not specify a Title, legend control must use the Legend as a default title.

make the legend show by default and add the minimized button

My humble suggestion is to make the legend show by default and make the minimized button view a configurable state, rather than the default. That's not something you need to do before we include the plugin though.

I got valuable suggestion through pull request to mapbox-gl-js-docs.

dist files for directly using in HTML document

Please publish compiled dist files for using them as script tag in HTML.

Using import with the 1.2.0 library causes a build error

Describe the bug
If the library is imported with import, upgrading from 1.1.7 to 1.2.0 causes an error at build time, about not being able to find mapboxgl.

To Reproduce
Steps to reproduce the behavior:

Go to the demo sandbox
Change the mapbox-gl-legend version in package.json to 1.2.0

As soon as it starts to rebuild, there's an error, shown below.

Expected behavior
No error!

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser Chrome
Version 95

Additional context
Caused by changes for CDN support?

Cross-Browser Compatibility

Does this library work the same way on all browsers? I am currently using:

angular v11.2.10
typescript v4.1.5
mapbox-gl v1.13.1
mapbox-gl-legend v1.1.5

The legend works great on Chrome v93.0.4577.63 and Edge v92.0.902.84 but is acting weird on Firefox v91.0.2. I have attached the screenshots below. From what I have observed on Firefox

When it is first loaded, the size of the SVG circles keep on increasing
On closing and then opening the legend, the SVG circles go back to the original size
Continuously checking and unchecking the 'Only rendered' checkbox, the size of the SVG circles keep on increasing

Chrome:

Firefox:

Legend is too long in screen of smartphone

https://rural.water-gis.com/#9/-2.0032/30.0291

In case of smartphone, legend is so long, it goes out of screen. Maybe it needs some scroll bar.

Module and Materialize

Hello,

I would like to put a module on webmapping project but I have a problem with Materialize. The checkboxes are not displayed. When I turn Materialize off, checkboxes are now displayed .... Anyone have any idea?

And it seems raster layers and WMS layers are not supported....

PS : I try with the 'Export' module too, and I have the same problem. It seems there all forms components (checkboxes, selection...) are not supported.

Thks :-)

With webpack 5 and source-map-loader, source map parsing fails

Describe the bug
When using source-map-loader in webpack 5 to include source maps from node modules, I'm getting this warning when building my code:

WARNING in ./node_modules/@watergis/mapbox-gl-legend/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\ ... \node_modules\@watergis\mapbox-gl-legend\lib\index.ts' file:
Error: ENOENT: no such file or directory, open 'C:\ ... \node_modules\\@watergis\mapbox-gl-legend\lib\index.ts'

I'm not sure why it's looking for index.ts when loading the source maps, but I think I didn't see this with webpack 4, and haven't seen issues with other modules.

To Reproduce
The webpack.config.js file for this project includes this rule:

    module: {
      rules: [
       {
          test: /\.js$/,
          enforce: 'pre',
          use: ['source-map-loader'],
        }

It's including source-map-loader v3.0.0.

Expected behavior
The source map should be included in dev builds, as it is with other npm modules.