Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mug-jp/maplibre-gl-opacity
Make multiple tile layers transparent.
https://github.com/mug-jp/maplibre-gl-opacity
Last synced: about 2 months ago
JSON representation
Make multiple tile layers transparent.
- Host: GitHub
- URL: https://github.com/mug-jp/maplibre-gl-opacity
- Owner: mug-jp
- License: mit
- Created: 2021-04-01T08:50:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T07:06:04.000Z (11 months ago)
- Last Synced: 2024-05-19T16:22:21.699Z (8 months ago)
- Language: JavaScript
- Homepage: https://mug-jp.github.io/maplibre-gl-opacity/
- Size: 19.4 MB
- Stars: 24
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-maplibre - maplibre-gl-opacity - A plugin to switch layer like Leaflet.control.layers, and update opacities. [demo](https://mug-jp.github.io/maplibre-gl-opacity/) (User Interface Plugins / JavaScript)
README
# maplibre-gl-opacity
maplibre-gl-opacity is a MapLibre GL JS plugin that makes multiple tile layers transparent.
[MapLibre GL JS Plugins](https://maplibre.org/maplibre-gl-js/docs/plugins)
[npm](https://www.npmjs.com/package/maplibre-gl-opacity)
## Usage
### Demo
[demo](https://mug-jp.github.io/maplibre-gl-opacity)
### Option
```javascript
// addControl Option
// The position of the control (one of the map corners).
position: 'top-left' or 'top-right' or 'bottom-left' or 'bottom-right'
// OpacityControl Option
// Baselayers settings
baseLayers: {
m_mono: 'MIERUNE Mono',
m_color: 'MIERUNE Color'
}
// Overlayers settings
overLayers: {
o_std: 'OpenStreetMap',
t_pale: 'GSI Pale',
t_ort: 'GSI Ort'
}
// Transparent slide bar settings (true or false)
opacityControl: true
```
### Example
Start MapLibre GL JS easily. [MapLibre GL JS, Vite]
[maplibregljs-starter](https://github.com/mug-jp/maplibregljs-starter)
Install package
```bash
npm install maplibre-gl-opacity
```
main.ts
```typescript
import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import 'maplibre-gl-opacity/dist/maplibre-gl-opacity.css';
import maplibregl from 'maplibre-gl';
// module import
import OpacityControl from 'maplibre-gl-opacity';
// MIERUNE MONO
let map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
m_mono: {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
},
},
layers: [
{
id: 'm_mono',
type: 'raster',
source: 'm_mono',
minzoom: 0,
maxzoom: 18,
},
],
},
center: [139.767, 35.681],
zoom: 10,
});
map.on('load', function () {
// MIERUNE Color
map.addSource('m_color', {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png'],
tileSize: 256,
});
map.addLayer({
id: 'm_color',
type: 'raster',
source: 'm_color',
minzoom: 0,
maxzoom: 18,
});
// OpenStreetMap
map.addSource('o_std', {
type: 'raster',
tiles: [
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
],
tileSize: 256,
});
map.addLayer({
id: 'o_std',
type: 'raster',
source: 'o_std',
minzoom: 0,
maxzoom: 18,
});
// GSI Pale
map.addSource('t_pale', {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
tileSize: 256,
});
map.addLayer({
id: 't_pale',
type: 'raster',
source: 't_pale',
minzoom: 0,
maxzoom: 18,
});
// GSI Ort
map.addSource('t_ort', {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'],
tileSize: 256,
});
map.addLayer({
id: 't_ort',
type: 'raster',
source: 't_ort',
minzoom: 0,
maxzoom: 18,
});
// BaseLayer
const mapBaseLayer = {
m_mono: 'MIERUNE Mono',
m_color: 'MIERUNE Color',
};
// OverLayer
const mapOverLayer = {
o_std: 'OpenStreetMap',
t_pale: 'GSI Pale',
t_ort: 'GSI Ort',
};
// OpacityControl
let Opacity = new OpacityControl({
baseLayers: mapBaseLayer,
overLayers: mapOverLayer,
opacityControl: true,
});
map.addControl(Opacity, 'top-right');
// NavigationControl
let nc = new maplibregl.NavigationControl();
map.addControl(nc, 'top-left');
});
```
## License
MIT
Copyright (c) 2021-2024 Yasunori Kirimoto
---
### Japanese
# maplibre-gl-opacity
maplibre-gl-opacityは、複数のタイルレイヤーを透過するMapLibre GL JSのプラグインです。
[MapLibre GL JS Plugins](https://maplibre.org/maplibre-gl-js/docs/plugins)
[npm](https://www.npmjs.com/package/maplibre-gl-opacity)
## 使用方法
### デモ
[デモ](https://mug-jp.github.io/maplibre-gl-opacity)
### オプション
```javascript
// addControlのオプション
//コントロールの配置設定。(デフォルト:右上配置)
position: 'top-left' or 'top-right' or 'bottom-left' or 'bottom-right'
// OpacityControlのオプション
// 背景レイヤ設定
baseLayers: {
m_mono: 'MIERUNE Mono',
m_color: 'MIERUNE Color'
}
// オーバーレイヤ設定
overLayers: {
o_std: 'OpenStreetMap',
t_pale: 'GSI Pale',
t_ort: 'GSI Ort'
}
// 透過度スライドバー表示/非表示設定 (trueまたはfalse)
opacityControl: true
```
### 例
MapLibre GL JSを手軽に始める [MapLibre GL JS, Vite]
[maplibregljs-starter](https://github.com/mug-jp/maplibregljs-starter)
パッケージインストール
```bash
npm install maplibre-gl-opacity
```
main.ts
```typescript
import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import 'maplibre-gl-opacity/dist/maplibre-gl-opacity.css';
import maplibregl from 'maplibre-gl';
// module import
import OpacityControl from 'maplibre-gl-opacity';
// MIERUNE MONO
let map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
m_mono: {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
},
},
layers: [
{
id: 'm_mono',
type: 'raster',
source: 'm_mono',
minzoom: 0,
maxzoom: 18,
},
],
},
center: [139.767, 35.681],
zoom: 10,
});
map.on('load', function () {
// MIERUNE Color
map.addSource('m_color', {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png'],
tileSize: 256,
});
map.addLayer({
id: 'm_color',
type: 'raster',
source: 'm_color',
minzoom: 0,
maxzoom: 18,
});
// OpenStreetMap
map.addSource('o_std', {
type: 'raster',
tiles: [
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
],
tileSize: 256,
});
map.addLayer({
id: 'o_std',
type: 'raster',
source: 'o_std',
minzoom: 0,
maxzoom: 18,
});
// GSI Pale
map.addSource('t_pale', {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
tileSize: 256,
});
map.addLayer({
id: 't_pale',
type: 'raster',
source: 't_pale',
minzoom: 0,
maxzoom: 18,
});
// GSI Ort
map.addSource('t_ort', {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'],
tileSize: 256,
});
map.addLayer({
id: 't_ort',
type: 'raster',
source: 't_ort',
minzoom: 0,
maxzoom: 18,
});
// BaseLayer
const mapBaseLayer = {
m_mono: 'MIERUNE Mono',
m_color: 'MIERUNE Color',
};
// OverLayer
const mapOverLayer = {
o_std: 'OpenStreetMap',
t_pale: 'GSI Pale',
t_ort: 'GSI Ort',
};
// OpacityControl
let Opacity = new OpacityControl({
baseLayers: mapBaseLayer,
overLayers: mapOverLayer,
opacityControl: true,
});
map.addControl(Opacity, 'top-right');
// NavigationControl
let nc = new maplibregl.NavigationControl();
map.addControl(nc, 'top-left');
});
```
## ライセンス
MIT
Copyright (c) 2021-2024 Yasunori Kirimoto