{"id":13597869,"url":"https://github.com/watergis/mapbox-gl-legend","last_synced_at":"2025-08-21T18:33:03.485Z","repository":{"id":37423838,"uuid":"286011081","full_name":"watergis/mapbox-gl-legend","owner":"watergis","description":"This module adds legend control which is able to create legend panel from mapbox style to mapbox-gl","archived":false,"fork":false,"pushed_at":"2024-06-08T16:23:24.000Z","size":44772,"stargazers_count":115,"open_issues_count":2,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T05:43:06.307Z","etag":null,"topics":["demo","legend","mapbox-gl-js"],"latest_commit_sha":null,"homepage":"https://watergis.github.io/mapbox-gl-legend/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/watergis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["JinIgarashi"],"open_collective":"watergis","custom":["https://www.paypal.me/jinigarashi"]}},"created_at":"2020-08-08T09:15:46.000Z","updated_at":"2024-10-24T12:56:24.000Z","dependencies_parsed_at":"2024-11-06T06:33:11.491Z","dependency_job_id":"a543b59d-8248-458f-8362-cbbfee1eec5c","html_url":"https://github.com/watergis/mapbox-gl-legend","commit_stats":{"total_commits":68,"total_committers":6,"mean_commits":"11.333333333333334","dds":"0.38235294117647056","last_synced_commit":"c1b6e8deaa88eb2f5c2e11746462a13a52832356"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapbox-gl-legend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapbox-gl-legend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapbox-gl-legend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watergis%2Fmapbox-gl-legend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/watergis","download_url":"https://codeload.github.com/watergis/mapbox-gl-legend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230340130,"owners_count":18211161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","legend","mapbox-gl-js"],"created_at":"2024-08-01T17:00:42.586Z","updated_at":"2024-12-20T03:09:18.178Z","avatar_url":"https://github.com/watergis.png","language":"TypeScript","funding_links":["https://github.com/sponsors/JinIgarashi","https://opencollective.com/watergis","https://www.paypal.me/jinigarashi"],"categories":["Lincense","TypeScript","User Interface Plugins"],"sub_categories":["1. Source Code","JavaScript"],"readme":"# mapbox-gl-legend\n![badge](https://github.com/watergis/mapbox-gl-legend/workflows/build/badge.svg)\n![badge](https://github.com/watergis/mapbox-gl-legend/workflows/deploy%20gh-pages/badge.svg)\n![](https://github.com/watergis/mapbox-gl-legend/workflows/Release%20Draft/badge.svg)\n![](https://github.com/watergis/mapbox-gl-legend/workflows/Node.js%20Package/badge.svg)\n![GitHub](https://img.shields.io/github/license/watergis/mapbox-gl-legend)\n\nThis module adds legend control which is able to create legend panel from mapbox style to mapbox-gl.\n\nThis module is using source code of [orangemug/legend-symbol](https://github.com/orangemug/legend-symbol). I just adopted this library to normal Mapbox GL Plugin. Thanks so much to develop this library!\n\n## for Maplibre GL JS users\n\nPlease consider to use [maplibre-gl-legend](https://github.com/watergis/maplibre-gl-legend) for Maplibre GL JS.\n\n## Installation:\n\n```bash\nnpm i @watergis/mapbox-gl-legend --save\n```\n\n## Use CDN\n\n```html\n\u003clink href='https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.css' rel='stylesheet' /\u003e\n\u003cscript src='https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'\u003e\u003c/script\u003e\n\u003cscript src=\"https://watergis.github.io/mapbox-gl-legend/mapbox-gl-legend.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nmap.on('load', function() {\n    const targets = {\n        'pipeline': 'Pipeline',\n        'pipeline_annotation': 'Pipeline Label', \n        'meter': 'Water Meter',\n        'flow meter': 'Flow Meter', \n        'valve': 'Valve', \n        'firehydrant': 'Fire Hydrant', \n        'washout': 'Washout',\n        'tank': 'Tank', \n        'tank_annotation': 'Tank Label', \n        'wtp': 'WTP', \n        'wtp_annotation': 'WTP Label', \n        'intake': 'Intake', \n        'intake_annotation': 'Intake Label', \n        'parcels': 'Parcels', \n        'parcels_annotation': 'Parcels Label', \n        'village': 'Village', \n        'village_annotation': 'Village Label', \n        'dma': 'DMA',\n        'dma-annotation': 'DMA Label', \n        'contour-line': 'Countour',\n        'contour-label': 'Contour Label',\n        'hillshade': 'Hillshade'\n    };\n    map.addControl(new MapboxLegendControl(targets, {\n        showDefault: false, \n        showCheckbox: false, \n        onlyRendered: true,\n        reverseOrder: true\n    }), 'top-right');\n})\n\u003c/script\u003e\n```\n\nFurthermore, you may download specific version's scripts and css locally from [release](https://github.com/watergis/mapbox-gl-export/releases) page.\n\n## Demo:\n\nTry [codesandbox](https://codesandbox.io/s/mapbox-gl-legend-0x6f0).\n\nSee [demo](https://watergis.github.io/mapbox-gl-legend/#12/-1.08551/35.87063).\n\n![demo.gif](./demo.gif)\n\n## Test:\n\n```\nnpm run build\nnpm start\n```\n\nopen [http://localhost:8080](http://localhost:8080).\n\n## Usage:\n\n```ts\nimport { MapboxLegendControl } from \"@watergis/mapbox-gl-legend\";\nimport '@watergis/mapbox-gl-legend/css/styles.css';\nimport mapboxgl from 'mapbox-gl';\n\nconst map = new mapboxgl.Map();\n//please add legend control after loading mapbox stylefiles, otherwise it causes errors...\nmap.on('load', function() {\nconst targets = {\n  'pipeline': 'Pipeline',\n  'pipeline_annotation': 'Pipeline Label', \n  'meter': 'Water Meter',\n  'flow meter': 'Flow Meter', \n  'valve': 'Valve', \n  'firehydrant': 'Fire Hydrant', \n  'washout': 'Washout',\n  'tank': 'Tank', \n  'tank_annotation': 'Tank Label', \n  'wtp': 'WTP', \n  'wtp_annotation': 'WTP Label', \n  'intake': 'Intake', \n  'intake_annotation': 'Intake Label', \n  'parcels': 'Parcels', \n  'parcels_annotation': 'Parcels Label', \n  'village': 'Village', \n  'village_annotation': 'Village Label', \n  'dma': 'DMA',\n  'dma_annotation': 'DMA Label', \n};\n\n// add legend control without checkbox, and it will be hide as default\nmap.addControl(new MapboxLegendControl(targets, {showDefault: false, showCheckbox: false, onlyRendered: false }), 'top-right');\n\n// add legend control with checkbox, and it will be shown as default\nmap.addControl(new MapboxLegendControl(targets, {showDefault: true}), 'bottom-right');\n\n// add legend control with all layers, and it reverse layer order\nmap.addControl(new MapboxLegendControl({}, {reverseOrder: false}), 'bottom-left');\n\n// if you want to use basemap from Mapbox in v2\nmap.addControl(new MapboxLegendControl({}, {accesstoken: 'your mapbox accesstoken'}));\n\n// if you want to customize the title of the legend\nmap.addControl(new MapboxLegendControl(targets, {title: 'Some Custom Title'}), 'top-right');\n```\n\nSpecify your layers which you want to add the legend by the control.\n\n### Options\n- showDefault\n  - true: Legend will be shown as default\n  - false: Legend will be hide as default\n  - default value is `true` if you don't specify the option.\n- showCheckbox\n  - true: the checkbox for switching visibility will be added as default\n  - false: the checkbox will not be added as default\n  - default value is `true` if you don't specify the option.\n- reverseOrder\n  - true: layers will be ordered from top. \n  - false: layers will be ordered from bottom. \n  - default value is `true` if you don't spefify the option.\n- onlyRendered\n  - true: only rendered layers will be shown on legend as default. \n  - false: all layers' legend will be shown as default. \n  - default value will be true.\n- title\n  - specify the title of the legend. \n  - default value is `Legend` if you don't specify the option.\n\n## How to release\n\n```zsh\nnpm version patch # it increase patch version 0.0.X\nnpm version minor # it increase minor version 0.x.0\nnpm version major # it increase major version x.0.0\ngit push origin master --tag\n# release CI will create draft release in Github pages, then publish it if it is ready.\n# publish CI will deploy npmjs and Github Packages.\n```\n\n## Contribution\n\nThis Mapbox GL Legend Control is still under experimental, so most welcome any feedbacks and pull request to this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatergis%2Fmapbox-gl-legend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwatergis%2Fmapbox-gl-legend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatergis%2Fmapbox-gl-legend/lists"}