migrated to maplibre-gl-js

watergis · Oct 17, 2021 · 0126139 · 0126139
1 parent 18d49ea
commit 0126139
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 104 deletions.
diff --git 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
@@ -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 "[email protected]"
-        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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
     });
 })()
diff --git 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
@@ -1 +1 @@
-export { default as MapboxLegendControl, LegendOptions } from './legend-control';
+export { default as MaplibreLegendControl, LegendOptions } from './legend-control';
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ name: build @@
     on:
       push:
-        branches: [ master ]
+        branches: [ main ]
         paths:
           - "lib/**"
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as MapboxLegendControl, LegendOptions } from './legend-control';
		export { default as MaplibreLegendControl, LegendOptions } from './legend-control';