Merge pull request #17 from watergis/feature/add-cdn

added CDN
watergis · Oct 17, 2021 · 9017a74 · 9017a74
2 parents 0c1dfcf + 9000f24
commit 9017a74
Show file tree

Hide file tree

Showing 10 changed files with 6,875 additions and 416 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -18,7 +18,12 @@ jobs:
     - run: npm ci 
       env:
         CI: true
-    - run: npm run build
+    - name: build
+      run: |
+        npm run build
+        mkdir ./release
+        cp ./dist/cdn/mapbox-gl-legend.js ./release/.
+        cp ./css/styles.css ./release/mapbox-gl-legend.css
     - name: Create Release
       id: create_release
       uses: actions/create-release@latest
@@ -27,4 +32,12 @@ jobs:
       with:
         tag_name: ${{ github.ref }}
         release_name: ${{ github.ref }}
-        draft: true
+        draft: true
+    - name: Upload Release Assets
+      id: upload-release-assets
+      uses: dwenegar/upload-release-assets@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        release_id: ${{ steps.create_release.outputs.id }}
+        assets_path: ./release
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 dist
 docs/bundle*.js
+docs/mapbox-gl-legend.*
 
 # Logs
 logs

diff --git a/README.md b/README.md
@@ -15,6 +15,50 @@ This module is using source code of [orangemug/legend-symbol](https://github.com
 npm i @watergis/mapbox-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>
+<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 watergis.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](https://github.com/watergis/mapbox-gl-export/releases) page.
+
 ## Demo:
 
 Try [codesandbox](https://codesandbox.io/s/mapbox-gl-legend-0x6f0).
@@ -35,7 +79,7 @@ open [http://localhost:8080](http://localhost:8080).
 ## Usage:
 
 ```ts
-import MapboxLegendControl from "@watergis/mapbox-gl-legend";
+import { MapboxLegendControl } from "@watergis/mapbox-gl-legend";
 import '@watergis/mapbox-gl-legend/css/styles.css';
 import mapboxgl from 'mapbox-gl';
 

diff --git a/docs/index.ts b/docs/index.ts
@@ -1,5 +1,5 @@
 import mapboxgl from 'mapbox-gl';
-import { default as MapboxLegendControl, Options} from '../lib/index';
+import { MapboxLegendControl, LegendOptions } from '../lib/index';
 import '../css/styles.css';
 
 (()=>{
@@ -40,7 +40,7 @@ import '../css/styles.css';
             'hillshade': 'Hillshade'
         };
         // add legend control without checkbox, and it will be hide as default
-        let options : Options = {
+        let options : LegendOptions = {
             showDefault: false, 
             showCheckbox: false, 
             onlyRendered: true,

diff --git a/docs/index2.html b/docs/index2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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 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' />
+<style>
+    body { margin: 0; padding: 0; }
+    #map { position: absolute; top: 0; bottom: 0; width: 100%;z-index: 10;}
+</style>
+</head>
+    <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>
+            const map = new mapboxgl.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.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>