feat: initial release

.github/workflows/publish.yml

@@ -0,0 +1,20 @@
+name: "publish npm"
+
+on: push
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - name: checkout
+              uses: actions/checkout@v3
+            - name: node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  registry-url: https://registry.npmjs.org
+            - name: publish
+              run: npm install && npm publish --access public
+              working-directory: .
+              env:
+                  NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.0.1
+
+- initial release

LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2021, Aditya Kushwaha
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,101 @@
+# maplibre-basemaps
+### Maplibre plugin to add basemaps layer switcher
+
+Check the demo here [Link](https://kaditya97.github.io/maplibre-basemaps/)
+
+## Install
+
+```bash
+npm install maplibre-gl maplibre-basemaps
+```
+
+or
+
+```html
+<link href="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.css" rel="stylesheet" />
+<script src="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.js"></script>
+<script src="https://unpkg.com/maplibre-basemaps@0.0.1/dist/maplibre-basemaps.js"></script>
+```
+
+## Usage
+```jsx
+import Maplibre from 'maplibre-gl';
+import * as MaplibreBasemaps from 'maplibre-basemaps';
+```
+
+## Example usage
+Check docs/index.html for example implementation.
+```Javascript
+const osm = {
+    name: "Open Street Map",
+    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+    visibility: 'visible',
+    maxzoom: 18,
+    attribution: 'osm'
+}
+const osmHot = {
+    name: "OSM HOT",
+    tiles: ['https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'],
+    visibility: 'none',
+}
+const osmCycle = {
+    name: "OSM Cycle",
+    tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'],
+    visibility: 'none'
+}
+const esriTerrain = {
+    name: "Esri Terrain",
+    tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'],
+    visibility: 'none',
+    maxzoom: 13,
+    attribution: 'Tiles &copy; Esri &mdash; Source: USGS, Esri, TANA, DeLorme, and NPS',
+}
+const baseLayers = {
+    osm,
+    osmHot,
+    osmCycle,
+    esriTerrain,
+}
+const basemapControl = new MaplibreBasemaps.Basemaps({ basemaps: baseLayers });
+map.addControl(basemapControl, 'top-right');
+```
+
+### Remove
+
+```Javascript
+map.removeControl(basemapControl);
+```
+
+### Options for use
+
+```Typescript
+export interface BaseLayerConfig {
+    name: string;
+    tiles: Array<string>;
+    visibility: 'visible' | 'none';
+    attribution?: string;
+    minZoom?: number;
+    maxZoom?: number;
+}
+
+export interface BasemapsConfig {
+    basemaps: BaseLayerConfig;
+    width?: string;
+    height?: string;
+}
+
+const basemapControl = new new MaplibreBasemaps.Basemaps(config: BasemapsConfig);
+```
+
+- `basemaps` - BaseLayerConfig, base layers objects, **required**
+- `width` - string, width for basemaps layers container, **default: '150px'**
+- `height` - string, height for basemaps layers container, **default: '100px'**
+
+Layer Configuration
+- `name` - string, name to visualize layer in container, **required**
+- `tiles` - string[], urls of basemap layer, **required**
+- `visibility` - 'visible' | 'none', visible to load layer by default else none, **required**
+- `attribution` - string, attribution for basemap layer, **optional**
+- `minZoom` - number, min zoom to display the grid, **default: 0**
+- `maxZoom` - number, max zoom to display the grid , **default: 20**
+

babel.config.json

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-runtime"
+    ]
+}

docs/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Maplibre Basemaps</title>
+    <script src="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="../dist/maplibre-basemaps.js"></script>
+    <!-- <script src="https://unpkg.com/maplibre-basemaps@0.0.1/dist/maplibre-basemaps.js"></script> -->
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100vh;
+        }
+    </style>
+</head>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+
+        window.addEventListener('DOMContentLoaded', () => {
+            var osm = {
+                version: 8,
+                glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
+                sources: {
+                    osm: {
+                        type: 'raster',
+                        tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+                        tileSize: 256,
+                        // attribution: '&copy; OpenStreetMap Contributors',
+                        maxzoom: 25
+                    },
+                },
+                layers: [
+                    {
+                        id: 'osm',
+                        type: 'raster',
+                        source: 'osm'
+                    }
+                ],
+            }
+            var map = (window.map = new maplibregl.Map({
+                container: 'map',
+                zoom: 10,
+                center: [85.3240, 27.7172],
+                pitch: 0,
+                bearing: 0,
+                hash: true,
+                style: { version: 8, glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf', sources: {}, layers: [] },
+                maxZoom: 20,
+                maxPitch: 85
+            }));
+
+            map.on('load', () => {
+
+                map.addControl(
+                    new maplibregl.NavigationControl({
+                        visualizePitch: true,
+                        showZoom: true,
+                        showCompass: true
+                    })
+                );
+
+                const osm = {
+                    name: "Open Street Map",
+                    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+                    visibility: 'visible',
+                    maxzoom: 18,
+                    attribution: 'osm'
+                }
+                const osmHot = {
+                    name: "OSM HOT",
+                    tiles: ['https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'],
+                    visibility: 'none',
+                }
+                const osmCycle = {
+                    name: "OSM Cycle",
+                    tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'],
+                    visibility: 'none'
+                }
+                const esriTerrain = {
+                    name: "Esri Terrain",
+                    tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'],
+                    visibility: 'none',
+                    maxzoom: 13,
+                    attribution: 'Tiles &copy; Esri &mdash; Source: USGS, Esri, TANA, DeLorme, and NPS',
+                }
+                const baseLayers = {
+                    osm,
+                    osmHot,
+                    osmCycle,
+                    esriTerrain,
+                }
+                const basemapControl = new MaplibreBasemaps.Basemaps({ basemaps: baseLayers });
+                map.addControl(basemapControl, 'top-right');
+
+            });
+        });
+    </script>
+</body>
+
+</html>