├── .npmignore ├── .gitignore ├── .prettierrc ├── .editorconfig ├── rollup.config.js ├── tsconfig.json ├── eslint.config.js ├── server.js ├── .github └── workflows │ └── publish.yml ├── src ├── index.scss └── index.ts ├── package.json ├── README.md └── example.html /.npmignore: -------------------------------------------------------------------------------- 1 | .eslintignore 2 | .eslintrc 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # nodejs 2 | node_modules/ 3 | npm-debug.log* 4 | 5 | # build 6 | lib/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "typescript", 3 | "printWidth": 120, 4 | "trailingComma": "none", 5 | "tabWidth": 4, 6 | "quoteProps": "consistent" 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | # Unix-style newlines with a newline ending every file 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | 11 | [*.{js,ts}] 12 | charset = utf-8 13 | indent_size = 4 14 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from "@rollup/plugin-typescript"; 2 | 3 | export default { 4 | input: "src/index.ts", 5 | output: { 6 | dir: "lib", 7 | format: "umd", 8 | name: "MaplibreGLBasemapsControl", 9 | sourcemap: true 10 | }, 11 | plugins: [typescript()] 12 | }; 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "esnext", 5 | "allowJs": true, 6 | "sourceMap": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "allowSyntheticDefaultImports": true, 10 | "outDir": "lib", 11 | "skipLibCheck": true 12 | }, 13 | "include": ["src"] 14 | } -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import globals from 'globals'; 3 | import tseslint from 'typescript-eslint'; 4 | 5 | export default tseslint.config( 6 | { ignores: ['lib/'] }, 7 | { 8 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 9 | files: ['**/*.ts'], 10 | languageOptions: { 11 | ecmaVersion: 2020, 12 | globals: globals.browser 13 | } 14 | } 15 | ); 16 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import http from "http"; 3 | 4 | http.createServer(function(req, res) { 5 | const url = req.url === "/" ? "/example.html" : req.url; 6 | fs.readFile(`.${url}`, function(err, data) { 7 | if (err) { 8 | res.writeHead(404); 9 | res.end(JSON.stringify(err)); 10 | return; 11 | } 12 | res.writeHead(200); 13 | res.end(data); 14 | }); 15 | }).listen(8080); 16 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | release: 5 | types: [ published ] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: '20.x' 15 | registry-url: 'https://registry.npmjs.org' 16 | - run: npm ci 17 | - run: npm run build 18 | - run: | 19 | git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git 20 | npx gh-pages -u "github-actions-bot " -s "{README.md,example.html,lib/*}" -d . 21 | env: 22 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 23 | - run: npm publish --access public 24 | env: 25 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 26 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | .maplibregl-ctrl-basemaps { 2 | display: flex; 3 | flex-direction: row; 4 | pointer-events: auto; 5 | 6 | &.reverse { 7 | flex-direction: row-reverse; 8 | } 9 | 10 | &.column { 11 | flex-direction: column; 12 | 13 | &.reverse { 14 | flex-direction: column-reverse; 15 | } 16 | } 17 | 18 | .basemap { 19 | width: 64px; 20 | height: 64px; 21 | margin: 2px; 22 | border: 2px solid #ccc; 23 | border-radius: 40px; 24 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); 25 | cursor: pointer; 26 | 27 | &.active { 28 | border-color: orange; 29 | box-shadow: 2px 2px 4px #000 30 | } 31 | } 32 | 33 | &.closed { 34 | .basemap { 35 | display: none; 36 | 37 | &.active { 38 | display: block; 39 | border: 2px solid #ccc; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "maplibre-gl-basemaps", 3 | "version": "0.1.3", 4 | "main": "./lib/index.js", 5 | "description": "Basemaps Control for MapLibre GL", 6 | "author": "Kaveh Karimi ", 7 | "homepage": "https://github.com/ka7eh/maplibre-gl-basemaps", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/ka7eh/maplibre-gl-basemaps.git" 11 | }, 12 | "keywords": [ 13 | "maplibre-gl", 14 | "mapbox-gl", 15 | "basemaps" 16 | ], 17 | "license": "ISC", 18 | "type": "module", 19 | "scripts": { 20 | "lint": "eslint src", 21 | "lint:fix": "npm run lint -- --fix", 22 | "format": "prettier --write ./src/**/*.ts", 23 | "watch": "rollup -c --watch & sass --watch src/index.scss:lib/basemaps.css", 24 | "build": "rollup -c --compact && sass src/index.scss:lib/basemaps.css", 25 | "examples": "npm run build & node server.js", 26 | "dev": "node server.js & npm run watch" 27 | }, 28 | "devDependencies": { 29 | "@eslint/js": "^9.17", 30 | "@rollup/plugin-typescript": "^12.1", 31 | "eslint": "^9.17", 32 | "eslint-config-prettier": "^10.0", 33 | "eslint-plugin-react-hooks": "^5.0", 34 | "eslint-plugin-react-refresh": "^0.4", 35 | "globals": "^15.14", 36 | "typescript-eslint": "^8.19", 37 | "gh-pages": "^6.3", 38 | "maplibre-gl": "^5.0", 39 | "prettier": "^3.4", 40 | "rollup": "^4.32", 41 | "sass": "^1.83", 42 | "tslib": "^2.8", 43 | "typescript": "^5.7" 44 | }, 45 | "peerDependencies": { 46 | "maplibre-gl": ">=1" 47 | }, 48 | "files": [ 49 | "lib" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MapLibre GL Basemaps Control 2 | 3 | > The core interactions and styling of this control is based on [Leaflet.Basemaps](https://github.com/consbio/Leaflet.Basemaps) 4 | 5 | A Maplibre GL Control for switching between basemaps. The control only supports raster sources. 6 | 7 | [Demo](https://ka7eh.github.io/maplibre-gl-basemaps/example) 8 | 9 | ## Installation 10 | 11 | ```bash 12 | npm install maplibre-gl-basemaps 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```{js} 18 | import BasemapsControl from 'maplibre-gl-basemaps'; 19 | import 'maplibre-gl-basemaps/lib/basemaps.css'; 20 | 21 | map.addControl(new BasemapsControl(options)); 22 | ``` 23 | 24 | To run the examples locally, install the dependencies and run `npm run examples`. 25 | Access the examples at `localhost:8080`. 26 | 27 | ## Options 28 | 29 | #### Control options 30 | 31 | | Attribute | Description | Default value | 32 | |-----------------|------------------------------------------------------------------------------------|---------------| 33 | | basemaps | An array of basemap objects (see the table below for attributes of basemap object) | - | 34 | | initialBasemap | Id of the basemap to set to active on initialization | - | 35 | | expandDirection | The direction that the control expand on hover | right | 36 | 37 | #### Basemap object 38 | 39 | | Attribute | Description | 40 | |-------------------|------------------------------------------------------------------------------------------------------------------------------------------| 41 | | id | The string to use for both the basemap source and layer | 42 | | tiles | An array of one or more tile source URLs, as in the TileJSON spec (https://maplibre.org/maplibre-style-spec/sources/#raster) | 43 | | sourceExtraParams | Other parameters accepted by MapLibre GL raster source to pass to the basemap (https://maplibre.org/maplibre-style-spec/sources/#raster) | 44 | | layerExtraParams | Other parameters accepted by MapLibre GL raster layer to pass to the basemap (https://maplibre.org/maplibre-style-spec/sources/#raster) | 45 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MapLibre GL Basemaps Control 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 27 | 73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { IControl } from "maplibre-gl"; 2 | 3 | export interface MapLibreBasemapsControlOptions { 4 | basemaps: Array<{ 5 | id: string; 6 | tiles: string[]; 7 | sourceExtraParams?: Partial; 8 | layerExtraParams?: Partial; 9 | }>; 10 | initialBasemap: string; // id of the initial basemap 11 | expandDirection?: "top" | "down" | "left" | "right"; 12 | } 13 | 14 | export default class BasemapsControl implements IControl { 15 | _options: MapLibreBasemapsControlOptions; 16 | 17 | _container: HTMLElement; 18 | 19 | constructor(options: MapLibreBasemapsControlOptions) { 20 | this._options = options; 21 | 22 | this._container = document.createElement("div"); 23 | this._container.classList.add("maplibregl-ctrl"); 24 | this._container.classList.add("maplibregl-ctrl-basemaps"); 25 | this._container.classList.add("closed"); 26 | switch (this._options.expandDirection || "right") { 27 | case "top": 28 | this._container.classList.add("reverse"); 29 | break; 30 | case "down": 31 | this._container.classList.add("column"); 32 | break; 33 | case "left": 34 | this._container.classList.add("reverse"); 35 | break; 36 | case "right": 37 | this._container.classList.add("row"); 38 | } 39 | 40 | this._container.addEventListener("mouseenter", () => { 41 | this._container.classList.remove("closed"); 42 | }); 43 | this._container.addEventListener("mouseleave", () => { 44 | this._container.classList.add("closed"); 45 | }); 46 | } 47 | 48 | onAdd(map: maplibregl.Map): HTMLElement { 49 | map.on("load", () => { 50 | this._options.basemaps.forEach(({ id, tiles, sourceExtraParams = {}, layerExtraParams = {} }) => { 51 | map.addSource(id, { 52 | ...sourceExtraParams, 53 | type: "raster", 54 | tiles 55 | }); 56 | map.addLayer({ ...layerExtraParams, id, source: id, type: "raster" }); 57 | 58 | const basemapContainer = document.createElement("img"); 59 | basemapContainer.src = tiles[0] 60 | .replace("{x}", "0") 61 | .replace("{y}", "0") 62 | .replace("{z}", (sourceExtraParams.minzoom || 0).toString()); 63 | basemapContainer.classList.add("basemap"); 64 | basemapContainer.dataset.id = id; 65 | basemapContainer.addEventListener("click", () => { 66 | const activeElement: HTMLElement = this._container.querySelector(".active"); 67 | activeElement.classList.remove("active"); 68 | basemapContainer.classList.add("active"); 69 | map.setLayoutProperty(activeElement.dataset.id, "visibility", "none"); 70 | map.setLayoutProperty(id, "visibility", "visible"); 71 | }); 72 | basemapContainer.classList.add("hidden"); 73 | this._container.appendChild(basemapContainer); 74 | 75 | if (this._options.initialBasemap === id) { 76 | map.setLayoutProperty(id, "visibility", "visible"); 77 | basemapContainer.classList.add("active"); 78 | } else { 79 | map.setLayoutProperty(id, "visibility", "none"); 80 | } 81 | }); 82 | }); 83 | return this._container; 84 | } 85 | 86 | onRemove(): void { 87 | this._container.parentNode?.removeChild(this._container); 88 | } 89 | } 90 | --------------------------------------------------------------------------------