From 01261390b18540ca8abddf4b16b78fc9c1397390 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <igarashi.jin@water-gis.com>
Date: Sun, 17 Oct 2021 14:46:13 +0100
Subject: [PATCH] migrated to maplibre-gl-js

---
 .github/workflows/build.yml          |  2 +-
 .github/workflows/deploy-ghpages.yml |  4 +--
 .github/workflows/release.yml        |  4 +--
 .gitignore                           |  2 +-
 README.md                            | 42 ++++++++++++-------------
 css/styles.css                       | 22 ++++++-------
 docs/index.html                      |  4 +--
 docs/index.ts                        | 16 +++++-----
 docs/index2.html                     | 14 ++++-----
 lib/index.ts                         |  2 +-
 lib/legend-control.ts                | 32 +++++++++----------
 package-lock.json                    | 47 +++++++++++++++-------------
 package.json                         | 13 ++++----
 webpack.cdn.config.js                |  4 +--
 webpack.config.js                    |  2 +-
 15 files changed, 106 insertions(+), 104 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 5ac8407..e28b0a9 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -5,7 +5,7 @@ name: build
 
 on:
   push:
-    branches: [ master ]
+    branches: [ main ]
     paths:
       - "lib/**"
 
diff --git a/.github/workflows/deploy-ghpages.yml b/.github/workflows/deploy-ghpages.yml
index e05e505..3adb0c6 100644
--- a/.github/workflows/deploy-ghpages.yml
+++ b/.github/workflows/deploy-ghpages.yml
@@ -5,7 +5,7 @@ name: deploy gh-pages
 
 on:
   push:
-    branches: [ master ]
+    branches: [ main ]
     paths:
       - "lib/**"
       - "docs/**"
@@ -32,5 +32,5 @@ jobs:
         npm run build
         git config --global user.name "watergis+githubci"
         git config --global user.email "watergis+githubci@users.noreply.github.com"
-        git remote set-url origin https://x-access-token:${NODE_AUTH_TOKEN}@github.com/watergis/mapbox-gl-legend.git
+        git remote set-url origin https://x-access-token:${NODE_AUTH_TOKEN}@github.com/watergis/maplibre-gl-legend.git
         npm run deploy
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3cae657..8cc925b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,8 +22,8 @@ jobs:
       run: |
         npm run build
         mkdir ./release
-        cp ./dist/cdn/mapbox-gl-legend.js ./release/.
-        cp ./css/styles.css ./release/mapbox-gl-legend.css
+        cp ./dist/cdn/maplibre-gl-legend.js ./release/.
+        cp ./css/styles.css ./release/maplibre-gl-legend.css
     - name: Create Release
       id: create_release
       uses: actions/create-release@latest
diff --git a/.gitignore b/.gitignore
index ce90799..0dbbd3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 dist
 docs/bundle*.js
-docs/mapbox-gl-legend.*
+docs/maplibre-gl-legend.*
 
 # Logs
 logs
diff --git a/README.md b/README.md
index 25fecbe..887dec9 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,26 @@
-# mapbox-gl-legend
-![badge](https://github.com/watergis/mapbox-gl-legend/workflows/build/badge.svg)
-![badge](https://github.com/watergis/mapbox-gl-legend/workflows/deploy%20gh-pages/badge.svg)
-![](https://github.com/watergis/mapbox-gl-legend/workflows/Release%20Draft/badge.svg)
-![](https://github.com/watergis/mapbox-gl-legend/workflows/Node.js%20Package/badge.svg)
-![GitHub](https://img.shields.io/github/license/watergis/mapbox-gl-legend)
+# maplibre-gl-legend
+![badge](https://github.com/watergis/maplibre-gl-legend/workflows/build/badge.svg)
+![badge](https://github.com/watergis/maplibre-gl-legend/workflows/deploy%20gh-pages/badge.svg)
+![](https://github.com/watergis/maplibre-gl-legend/workflows/Release%20Draft/badge.svg)
+![](https://github.com/watergis/maplibre-gl-legend/workflows/Node.js%20Package/badge.svg)
+![GitHub](https://img.shields.io/github/license/watergis/maplibre-gl-legend)
 
-This module adds legend control which is able to create legend panel from mapbox style to mapbox-gl.
+This module adds legend control which is able to create legend panel from mapbox style to maplibre-gl. It was forked from [maplibre-gl-export](https://github.com/watergis/maplibre-gl-export).
 
 This 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!
 
 ## Installation:
 
 ```bash
-npm i @watergis/mapbox-gl-legend --save
+npm i @watergis/maplibre-gl-legend --save
 ```
 
 ## Use CDN
 
 ```html
-<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>
+<link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
+<script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
+<script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
 <script>
 map.on('load', function() {
     const targets = {
@@ -63,7 +63,7 @@ Furthermore, you may download specific version's scripts and css locally from [r
 
 Try [codesandbox](https://codesandbox.io/s/mapbox-gl-legend-0x6f0).
 
-See [demo](https://watergis.github.io/mapbox-gl-legend/#12/-1.08551/35.87063).
+See [demo](https://watergis.github.io/maplibre-gl-legend/#12/-1.08551/35.87063).
 
 ![demo.gif](./demo.gif)
 
@@ -79,11 +79,11 @@ open [http://localhost:8080](http://localhost:8080).
 ## Usage:
 
 ```ts
-import { MapboxLegendControl } from "@watergis/mapbox-gl-legend";
-import '@watergis/mapbox-gl-legend/css/styles.css';
-import mapboxgl from 'mapbox-gl';
+import { MaplibreLegendControl } from "@watergis/maplibre-gl-legend";
+import '@watergis/maplibre-gl-legend/css/styles.css';
+import maplibregl from 'maplibre-gl';
 
-const map = new mapboxgl.Map();
+const map = new maplibregl.Map();
 //please add legend control after loading mapbox stylefiles, otherwise it causes errors...
 map.on('load', function() {
 const targets = {
@@ -109,16 +109,16 @@ const targets = {
 };
 
 // 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');
+map.addControl(new MaplibreLegendControl(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');
+map.addControl(new MaplibreLegendControl(targets, {showDefault: true}), 'bottom-right');
 
 // add legend control with all layers, and it reverse layer order
-map.addControl(new MapboxLegendControl({}, {reverseOrder: false}), 'bottom-left');
+map.addControl(new MaplibreLegendControl({}, {reverseOrder: false}), 'bottom-left');
 
 // if you want to use basemap from Mapbox in v2
-map.addControl(new MapboxLegendControl({}, {accesstoken: 'your mapbox accesstoken'}));
+map.addControl(new MaplibreLegendControl({}, {accesstoken: 'your mapbox accesstoken'}));
 ```
 
 Specify your layers which you want to add the legend by the control.
@@ -147,7 +147,7 @@ Specify your layers which you want to add the legend by the control.
 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
+git push origin main --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.
 ```
diff --git a/css/styles.css b/css/styles.css
index a4b285c..0bd1601 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,14 +1,14 @@
-.mapboxgl-legend-list
+.maplibregl-legend-list
 {
     display: none;
 }
 
-.mapboxgl-legend-list{
+.maplibregl-legend-list{
     overflow-y:scroll;
     max-height: calc(100vh * 0.7);
 }
 
-.mapboxgl-ctrl-group .mapboxgl-legend-list button
+.maplibregl-ctrl-group .maplibregl-legend-list button
 {
     background: none;
     border: none;
@@ -20,22 +20,22 @@
     height: auto;
 }
 
-.mapboxgl-legend-list button.active
+.maplibregl-legend-list button.active
 {
     font-weight: bold;
 }
 
-.mapboxgl-legend-list button:hover
+.maplibregl-legend-list button:hover
 {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.mapboxgl-legend-list button + button
+.maplibregl-legend-list button + button
 {
     border-top: 1px solid #ddd;
 }
 
-.mapboxgl-legend-switcher
+.maplibregl-legend-switcher
 { 
     background: url('data:image/svg+xml;charset=UTF-8,<svg height="512pt" viewBox="0 0 512 512.0005" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m220 0h-200c-11.046875 0-20 8.953125-20 20v200c0 11.046875 8.953125 20 20 20h200c11.046875 0 20-8.953125 20-20v-200c0-11.046875-8.953125-20-20-20zm-20 200h-160v-160h160zm299.65625 73.523438c-7.472656-3.097657-16.078125-1.386719-21.796875 4.332031l-200 200c-5.722656 5.722656-7.433594 14.324219-4.335937 21.796875 3.097656 7.476562 10.386718 12.347656 18.476562 12.347656h200c11.046875 0 20-8.953125 20-20v-200c0-8.089844-4.871094-15.382812-12.34375-18.476562zm-27.65625 198.476562h-131.714844l131.714844-131.714844zm-80-232c66.167969 0 120-53.832031 120-120s-53.832031-120-120-120-120 53.832031-120 120 53.832031 120 120 120zm0-200c44.113281 0 80 35.886719 80 80s-35.886719 80-80 80-80-35.886719-80-80 35.886719-80 80-80zm-157.859375 266.144531-85.855469 85.855469 85.855469 85.855469c7.8125 7.8125 7.8125 20.476562 0 28.285156-7.808594 7.808594-20.472656 7.8125-28.28125 0l-85.859375-85.855469-85.859375 85.859375c-7.808594 7.808594-20.472656 7.808594-28.28125 0-7.8125-7.8125-7.8125-20.476562 0-28.285156l85.855469-85.859375-85.855469-85.855469c-7.8125-7.8125-7.8125-20.476562 0-28.285156 7.808594-7.8125 20.472656-7.8125 28.28125 0l85.859375 85.855469 85.859375-85.859375c7.808594-7.808594 20.472656-7.808594 28.28125 0 7.8125 7.8125 7.8125 20.476562 0 28.289062zm0 0"/></svg>');
     background-position: center;
@@ -54,7 +54,7 @@ td.legend-table-td,th.legend-table-th{
     text-align: left;
 }
 
-.mapboxgl-legend-close-button{
+.maplibregl-legend-close-button{
     position: absolute;
     right: 0;
     top: 0;
@@ -67,17 +67,17 @@ td.legend-table-td,th.legend-table-th{
     padding-right: 5px;
 }
 
-.mapboxgl-legend-title-label{
+.maplibregl-legend-title-label{
     font-size: 14px; 
     font-weight: bold; 
     margin: 5px;
 }
 
-.mapboxgl-legend-onlyRendered-checkbox{
+.maplibregl-legend-onlyRendered-checkbox{
     margin: 5px;
 }
 
-.mapboxgl-legend-onlyRendered-label{
+.maplibregl-legend-onlyRendered-label{
     font-size: 14px; 
     margin: 5px;
 }
diff --git a/docs/index.html b/docs/index.html
index 72fa5d0..9137af2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Example</title>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-<link href='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
+<link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
 <style>
     body { margin: 0; padding: 0; }
@@ -14,7 +14,7 @@
     <body>
         <a class="github-fork-ribbon left-top" href="https://github.com/watergis/mapbox-gl-legend" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
         <div id="map"></div>
-        <script src='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js'></script>
+        <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
         <script src="./bundle.js"></script>
     </body>
 </html>
diff --git a/docs/index.ts b/docs/index.ts
index 41d7e24..5b7ac8c 100644
--- a/docs/index.ts
+++ b/docs/index.ts
@@ -1,18 +1,16 @@
-import mapboxgl from 'mapbox-gl';
-import { MapboxLegendControl, LegendOptions } from '../lib/index';
+import maplibregl from 'maplibre-gl';
+import { MaplibreLegendControl, LegendOptions } from '../lib/index';
 import '../css/styles.css';
 
 (()=>{
-    // mapboxgl.accessToken='your mapbox access token'
-    const map = new mapboxgl.Map({
+    const map = new maplibregl.Map({
         container: 'map',
-        // style: 'mapbox://styles/mapbox/streets-v11',
         style:'https://narwassco.github.io/mapbox-stylefiles/unvt/style.json',
         center: [35.87063, -1.08551],
         zoom: 12,
         hash:true,
     });
-    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+    map.addControl(new maplibregl.NavigationControl(), 'top-right');
 
     map.on('load', function() {
         const targets = {
@@ -46,7 +44,7 @@ import '../css/styles.css';
             onlyRendered: true,
             reverseOrder: true
         }
-        map.addControl(new MapboxLegendControl(targets, options), 'top-right');
+        map.addControl(new MaplibreLegendControl(targets, options), 'top-right');
 
         // add legend control with checkbox, and it will be shown as default
         options  = {
@@ -55,7 +53,7 @@ import '../css/styles.css';
             onlyRendered: true,
             reverseOrder: false
         }
-        map.addControl(new MapboxLegendControl(targets, options), 'bottom-right');
+        map.addControl(new MaplibreLegendControl(targets, options), 'bottom-right');
 
         // add legend control with all layers, and it reverse layer order
         options  = {
@@ -64,6 +62,6 @@ import '../css/styles.css';
             onlyRendered: false,
             reverseOrder: true
         }
-        map.addControl(new MapboxLegendControl({}, options), 'bottom-left');
+        map.addControl(new MaplibreLegendControl({}, options), 'bottom-left');
     });
 })()
\ No newline at end of file
diff --git a/docs/index2.html b/docs/index2.html
index a9b7655..1f2c863 100644
--- a/docs/index2.html
+++ b/docs/index2.html
@@ -4,9 +4,9 @@
 <meta charset="utf-8" />
 <title>Example</title>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-<link href='https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css' rel='stylesheet' />
+<link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
-<link href='./mapbox-gl-legend.css' rel='stylesheet' />
+<link href='./maplibre-gl-legend.css' rel='stylesheet' />
 <style>
     body { margin: 0; padding: 0; }
     #map { position: absolute; top: 0; bottom: 0; width: 100%;z-index: 10;}
@@ -15,17 +15,17 @@
     <body>
         <a class="github-fork-ribbon left-top" href="https://github.com/watergis/mapbox-gl-legend" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
         <div id="map"></div>
-        <script src='https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'></script>
-        <script src="./mapbox-gl-legend.js"></script>
+        <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
+        <script src="./maplibre-gl-legend.js"></script>
         <script>
-            const map = new mapboxgl.Map({
+            const map = new maplibregl.Map({
                 container: 'map',
                 style:'https://narwassco.github.io/mapbox-stylefiles/unvt/style.json',
                 center: [35.87063, -1.08551],
                 zoom: 12,
                 hash:true,
             });
-            map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+            map.addControl(new maplibregl.NavigationControl(), 'top-right');
             map.on('load', function() {
                 const targets = {
                     'pipeline': 'Pipeline',
@@ -51,7 +51,7 @@
                     'contour-label': 'Contour Label',
                     'hillshade': 'Hillshade'
                 };
-                map.addControl(new watergis.MapboxLegendControl(targets, {
+                map.addControl(new watergis.MaplibreLegendControl(targets, {
                     showDefault: false, 
                     showCheckbox: false, 
                     onlyRendered: true,
diff --git a/lib/index.ts b/lib/index.ts
index 9c42135..dd1c2c7 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -1 +1 @@
-export { default as MapboxLegendControl, LegendOptions } from './legend-control';
+export { default as MaplibreLegendControl, LegendOptions } from './legend-control';
diff --git a/lib/legend-control.ts b/lib/legend-control.ts
index e0d358c..fcf1ce3 100644
--- a/lib/legend-control.ts
+++ b/lib/legend-control.ts
@@ -1,4 +1,4 @@
-import { accessToken, baseApiUrl, IControl, Map as MapboxMap } from "mapbox-gl";
+import maplibregl, { accessToken, baseApiUrl, IControl, Map as MaplibreMap } from "maplibre-gl";
 import LegendSymbol from '@watergis/legend-symbol';
 import axios from 'axios';
 
@@ -20,11 +20,11 @@ export type LegendOptions = {
  * @param {boolean} options.onlyRendered true: only rendered layers will be shown on legend as default. false: all layers' legend will be shown as default. If not specified, default value will be true.
  */
 
-export default class MapboxLegendControl implements IControl
+export default class MaplibreLegendControl implements IControl
 {
 
     private controlContainer: HTMLElement;
-    private map?: MapboxMap;
+    private map?: MaplibreMap;
     private legendContainer: HTMLElement;
     private legendButton: HTMLButtonElement;
     private closeButton: HTMLButtonElement;
@@ -82,7 +82,7 @@ export default class MapboxLegendControl implements IControl
      * @param layer mapboxgl.Layer object
      * @returns HTMLElement | undefined return TD Element
      */
-    private createLayerCheckbox(layer: mapboxgl.Layer): HTMLElement | undefined
+    private createLayerCheckbox(layer: maplibregl.Layer): HTMLElement | undefined
     {
         if (!this.options.showCheckbox) return;
         const this_ = this;
@@ -128,7 +128,7 @@ export default class MapboxLegendControl implements IControl
      * @param layer mapboxgl.Layer object
      * @returns HTMLElement | undefined return TR Element
      */
-    private getLayerLegend(layer: mapboxgl.Layer): HTMLElement | undefined
+    private getLayerLegend(layer: maplibregl.Layer): HTMLElement | undefined
     {
         const map = this.map;
         const zoom = map?.getZoom();
@@ -254,17 +254,17 @@ export default class MapboxLegendControl implements IControl
         }
     }
 
-    public onAdd(map: MapboxMap): HTMLElement
+    public onAdd(map: MaplibreMap): HTMLElement
     {
         this.map = map;
         this.controlContainer = document.createElement("div");
-        this.controlContainer.classList.add("mapboxgl-ctrl");
-        this.controlContainer.classList.add("mapboxgl-ctrl-group");
+        this.controlContainer.classList.add("maplibregl-ctrl");
+        this.controlContainer.classList.add("maplibregl-ctrl-group");
         this.legendContainer = document.createElement("div");
-        this.legendContainer.classList.add("mapboxgl-legend-list");
+        this.legendContainer.classList.add("maplibregl-legend-list");
         this.legendButton = document.createElement("button");
-        this.legendButton.classList.add("mapboxgl-ctrl-icon");
-        this.legendButton.classList.add("mapboxgl-legend-switcher");
+        this.legendButton.classList.add("maplibregl-ctrl-icon");
+        this.legendButton.classList.add("maplibregl-legend-switcher");
         this.legendButton.addEventListener("click", () => {
           this.legendButton.style.display = "none";
           this.legendContainer.style.display = "block";
@@ -275,7 +275,7 @@ export default class MapboxLegendControl implements IControl
         
         this.closeButton = document.createElement("button");
         this.closeButton.textContent = "x";
-        this.closeButton.classList.add("mapboxgl-legend-close-button");
+        this.closeButton.classList.add("maplibregl-legend-close-button");
         this.closeButton.addEventListener("click", () => {
             this.legendButton.style.display = "block";
             this.legendContainer.style.display = "none";
@@ -283,16 +283,16 @@ export default class MapboxLegendControl implements IControl
         this.legendContainer.appendChild(this.closeButton);
 
         const legendLabel = document.createElement('label');
-        legendLabel.classList.add("mapboxgl-legend-title-label");
+        legendLabel.classList.add("maplibregl-legend-title-label");
         legendLabel.textContent = "Legend";
         this.legendContainer.appendChild(legendLabel)
         this.legendContainer.appendChild(document.createElement("br"));
 
         const checkOnlyRendered = document.createElement('input');
         checkOnlyRendered.setAttribute('type', 'checkbox');
-        const checkboxOnlyRenderedId = `mapboxgl-legend-onlyrendered-checkbox-${Math.random()*100}`
+        const checkboxOnlyRenderedId = `maplibregl-legend-onlyrendered-checkbox-${Math.random()*100}`
         checkOnlyRendered.setAttribute('id', checkboxOnlyRenderedId);
-        checkOnlyRendered.classList.add("mapboxgl-legend-onlyRendered-checkbox");
+        checkOnlyRendered.classList.add("maplibregl-legend-onlyRendered-checkbox");
         checkOnlyRendered.checked = this.onlyRendered;
         const this_ = this;
         checkOnlyRendered.addEventListener('click', function(e){
@@ -303,7 +303,7 @@ export default class MapboxLegendControl implements IControl
         });
         this.legendContainer.appendChild(checkOnlyRendered);
         const onlyRenderedLabel = document.createElement('label');
-        onlyRenderedLabel.classList.add("mapboxgl-legend-onlyRendered-label");
+        onlyRenderedLabel.classList.add("maplibregl-legend-onlyRendered-label");
         onlyRenderedLabel.textContent = "Only rendered";
         onlyRenderedLabel.htmlFor = checkboxOnlyRenderedId;
         this.legendContainer.appendChild(onlyRenderedLabel);
diff --git a/package-lock.json b/package-lock.json
index 7f60b7a..a5840a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,21 +1,22 @@
 {
-  "name": "@watergis/mapbox-gl-legend",
+  "name": "@watergis/maplibre-gl-legend",
   "version": "1.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "@watergis/mapbox-gl-legend",
+      "name": "@watergis/maplibre-gl-legend",
       "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.19.0",
         "@watergis/legend-symbol": "^0.2.2",
         "axios": "^0.21.1",
-        "mapbox-gl": "^1.13.1"
+        "maplibre-gl": "^1.15.2"
       },
       "devDependencies": {
-        "@types/mapbox-gl": "^1.13.0",
+        "@types/geojson": "^7946.0.7",
+        "@types/maplibre-gl": "^1.13.0",
         "css-loader": "^3.6.0",
         "gh-pages": "^3.2.3",
         "path": "^0.12.7",
@@ -166,13 +167,14 @@
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
       "dev": true
     },
-    "node_modules/@types/mapbox-gl": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.0.tgz",
-      "integrity": "sha512-z5YxncrARfKaJXzkhy4qS0cOldMfGIXq5yOPQcU9S12/xjAe3m66scftYlV1E10Em5QGdW2xahBb3CPk/dDcqA==",
+    "node_modules/@types/maplibre-gl": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@types/maplibre-gl/-/maplibre-gl-1.14.0.tgz",
+      "integrity": "sha512-I6ibscT7UdL1oOqqCz9s1gjcolLaUPkHIIfMLusczTvlsMhjORyS6sE1g4V/NESAOL5KhNQX3/31LJH+OCGjkg==",
+      "deprecated": "This is a stub types definition. maplibre-gl provides its own type definitions, so you do not need this installed.",
       "dev": true,
       "dependencies": {
-        "@types/geojson": "*"
+        "maplibre-gl": "*"
       }
     },
     "node_modules/@types/minimatch": {
@@ -3014,10 +3016,10 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/mapbox-gl": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.1.tgz",
-      "integrity": "sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==",
+    "node_modules/maplibre-gl": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-1.15.2.tgz",
+      "integrity": "sha512-uPeV530apb4JfX3cRFfE+awFnbcJTOnCv2QvY4mw4huiInbybElWYkNzTs324YLSADq0f4bidRoYcR81ho3aLA==",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.0",
         "@mapbox/geojson-types": "^1.0.2",
@@ -5964,6 +5966,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -6421,13 +6424,13 @@
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
       "dev": true
     },
-    "@types/mapbox-gl": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.13.0.tgz",
-      "integrity": "sha512-z5YxncrARfKaJXzkhy4qS0cOldMfGIXq5yOPQcU9S12/xjAe3m66scftYlV1E10Em5QGdW2xahBb3CPk/dDcqA==",
+    "@types/maplibre-gl": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@types/maplibre-gl/-/maplibre-gl-1.14.0.tgz",
+      "integrity": "sha512-I6ibscT7UdL1oOqqCz9s1gjcolLaUPkHIIfMLusczTvlsMhjORyS6sE1g4V/NESAOL5KhNQX3/31LJH+OCGjkg==",
       "dev": true,
       "requires": {
-        "@types/geojson": "*"
+        "maplibre-gl": "*"
       }
     },
     "@types/minimatch": {
@@ -8800,10 +8803,10 @@
         "object-visit": "^1.0.0"
       }
     },
-    "mapbox-gl": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.1.tgz",
-      "integrity": "sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==",
+    "maplibre-gl": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-1.15.2.tgz",
+      "integrity": "sha512-uPeV530apb4JfX3cRFfE+awFnbcJTOnCv2QvY4mw4huiInbybElWYkNzTs324YLSADq0f4bidRoYcR81ho3aLA==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.0",
         "@mapbox/geojson-types": "^1.0.2",
diff --git a/package.json b/package.json
index 360e679..cbc21a9 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "@watergis/mapbox-gl-legend",
+  "name": "@watergis/maplibre-gl-legend",
   "version": "1.2.0",
-  "description": "This module adds legend control which is able to create legend panel from mapbox style to mapbox-gl",
+  "description": "This module adds legend control which is able to create legend panel from mapbox style to mapbox-gl-legend",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "browser": "dist/cdn/mapbox-gl-legend.js",
+  "browser": "dist/cdn/maplibre-gl-legend.js",
   "files": [
     "dist",
     "css"
@@ -16,7 +16,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc && npm run build:cdn && npm run build:example",
     "build:example": "webpack --mode production --config webpack.config.js",
-    "build:cdn": "webpack --mode production --config webpack.cdn.config.js && cp ./dist/cdn/mapbox-gl-legend.js ./docs/. && cp ./css/styles.css ./docs/mapbox-gl-legend.css",
+    "build:cdn": "webpack --mode production --config webpack.cdn.config.js && cp ./dist/cdn/maplibre-gl-legend.js ./docs/. && cp ./css/styles.css ./docs/maplibre-gl-legend.css",
     "dev": "webpack serve --mode development --open --hot --inline --config webpack.config.js",
     "deploy": "gh-pages -d docs -m 'deploy to gh-pages'"
   },
@@ -28,7 +28,8 @@
   "author": "Jin IGARASHI",
   "license": "MIT",
   "devDependencies": {
-    "@types/mapbox-gl": "^1.13.0",
+    "@types/geojson": "^7946.0.7",
+    "@types/maplibre-gl": "^1.13.0",
     "css-loader": "^3.6.0",
     "gh-pages": "^3.2.3",
     "path": "^0.12.7",
@@ -43,6 +44,6 @@
     "@mapbox/mapbox-gl-style-spec": "^13.19.0",
     "@watergis/legend-symbol": "^0.2.2",
     "axios": "^0.21.1",
-    "mapbox-gl": "^1.13.1"
+    "maplibre-gl": "^1.15.2"
   }
 }
diff --git a/webpack.cdn.config.js b/webpack.cdn.config.js
index fa76c9e..4c8cfab 100644
--- a/webpack.cdn.config.js
+++ b/webpack.cdn.config.js
@@ -8,7 +8,7 @@ module.exports = {
     output: {
         library: 'watergis',
         libraryTarget: 'umd',
-        filename: 'mapbox-gl-legend.js',
+        filename: 'maplibre-gl-legend.js',
         path: path.resolve(__dirname, 'dist/cdn'),
     },
     module: {
@@ -33,6 +33,6 @@ module.exports = {
         ],
     },
     externals: {
-        'mapbox-gl': 'mapboxgl'
+        'maplibre-gl': 'maplibregl'
     }
 };
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 9548890..206cff8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -34,6 +34,6 @@ module.exports = {
         contentBase: './docs',
     },
     externals: {
-        'mapbox-gl': 'mapboxgl'
+        'maplibre-gl': 'maplibregl'
     }
 };
\ No newline at end of file