maplibre-gl-opacity

maplibre-gl-opacity is a MapLibre GL JS plugin that makes multiple tile layers transparent.

MapLibre GL JS Plugins
npm

Usage

Demo

demo

Option

1// addControl Option
2
3// The position of the control (one of the map corners).
4position: 'top-left' or 'top-right' or 'bottom-left' or 'bottom-right'
5
6
7// OpacityControl Option
8
9// Baselayers settings
10baseLayers: {
11    m_mono: 'MIERUNE Mono',
12    m_color: 'MIERUNE Color'
13}
14
15// Overlayers settings
16overLayers: {
17    o_std: 'OpenStreetMap',
18    t_pale: 'GSI Pale',
19    t_ort: 'GSI Ort'
20}
21
22// Transparent slide bar settings (true or false)
23opacityControl: true

Example

Start MapLibre GL JS easily. [MapLibre GL JS, Vite]
maplibregljs-starter

Install package

1npm install maplibre-gl-opacity

main.ts

1import 'maplibre-gl/dist/maplibre-gl.css';
2import maplibregl from 'maplibre-gl';
3
4// module import
5import OpacityControl from 'maplibre-gl-opacity';
6
7// MIERUNE MONO
8let map = new maplibregl.Map({
9    container: 'map',
10    style: {
11        version: 8,
12        sources: {
13            m_mono: {
14                type: 'raster',
15                tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
16                tileSize: 256,
17                attribution:
18                    "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL.",
19            },
20        },
21        layers: [
22            {
23                id: 'm_mono',
24                type: 'raster',
25                source: 'm_mono',
26                minzoom: 0,
27                maxzoom: 18,
28            },
29        ],
30    },
31    center: [139.767, 35.681],
32    zoom: 10,
33});
34
35map.on('load', function () {
36    // MIERUNE Color
37    map.addSource('m_color', {
38        type: 'raster',
39        tiles: ['https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png'],
40        tileSize: 256,
41    });
42    map.addLayer({
43        id: 'm_color',
44        type: 'raster',
45        source: 'm_color',
46        minzoom: 0,
47        maxzoom: 18,
48    });
49
50    // OpenStreetMap
51    map.addSource('o_std', {
52        type: 'raster',
53        tiles: [
54            'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
55            'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
56        ],
57        tileSize: 256,
58    });
59    map.addLayer({
60        id: 'o_std',
61        type: 'raster',
62        source: 'o_std',
63        minzoom: 0,
64        maxzoom: 18,
65    });
66
67    // GSI Pale
68    map.addSource('t_pale', {
69        type: 'raster',
70        tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
71        tileSize: 256,
72    });
73    map.addLayer({
74        id: 't_pale',
75        type: 'raster',
76        source: 't_pale',
77        minzoom: 0,
78        maxzoom: 18,
79    });
80
81    // GSI Ort
82    map.addSource('t_ort', {
83        type: 'raster',
84        tiles: ['https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'],
85        tileSize: 256,
86    });
87    map.addLayer({
88        id: 't_ort',
89        type: 'raster',
90        source: 't_ort',
91        minzoom: 0,
92        maxzoom: 18,
93    });
94
95    // BaseLayer
96    const mapBaseLayer = {
97        m_mono: 'MIERUNE Mono',
98        m_color: 'MIERUNE Color',
99    };
100
101    // OverLayer
102    const mapOverLayer = {
103        o_std: 'OpenStreetMap',
104        t_pale: 'GSI Pale',
105        t_ort: 'GSI Ort',
106    };
107
108    // OpacityControl
109    let Opacity = new OpacityControl({
110        baseLayers: mapBaseLayer,
111        overLayers: mapOverLayer,
112        opacityControl: true,
113    });
114    map.addControl(Opacity, 'top-right');
115
116    // NavigationControl
117    let nc = new maplibregl.NavigationControl();
118    map.addControl(nc, 'top-left');
119});

License

MIT

Copyright (c) 2021-2025 Yasunori Kirimoto, Kanahiro Iguchi

---

Japanese

maplibre-gl-opacity

maplibre-gl-opacityは、複数のタイルレイヤーを透過するMapLibre GL JSのプラグインです。

MapLibre GL JS Plugins
npm

使用方法

デモ

デモ

オプション

1// addControlのオプション
2
3//コントロールの配置設定。(デフォルト:右上配置)
4position: 'top-left' or 'top-right' or 'bottom-left' or 'bottom-right'
5
6
7// OpacityControlのオプション
8
9// 背景レイヤ設定
10baseLayers: {
11    m_mono: 'MIERUNE Mono',
12    m_color: 'MIERUNE Color'
13}
14
15// オーバーレイヤ設定
16overLayers: {
17    o_std: 'OpenStreetMap',
18    t_pale: 'GSI Pale',
19    t_ort: 'GSI Ort'
20}
21
22// 透過度スライドバー表示/非表示設定 (trueまたはfalse)
23opacityControl: true

例

MapLibre GL JSを手軽に始める [MapLibre GL JS, Vite]
maplibregljs-starter

パッケージインストール

1npm install maplibre-gl-opacity

main.ts

1import 'maplibre-gl/dist/maplibre-gl.css';
2import maplibregl from 'maplibre-gl';
3
4// module import
5import OpacityControl from 'maplibre-gl-opacity';
6
7// MIERUNE MONO
8let map = new maplibregl.Map({
9    container: 'map',
10    style: {
11        version: 8,
12        sources: {
13            m_mono: {
14                type: 'raster',
15                tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
16                tileSize: 256,
17                attribution:
18                    "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL.",
19            },
20        },
21        layers: [
22            {
23                id: 'm_mono',
24                type: 'raster',
25                source: 'm_mono',
26                minzoom: 0,
27                maxzoom: 18,
28            },
29        ],
30    },
31    center: [139.767, 35.681],
32    zoom: 10,
33});
34
35map.on('load', function () {
36    // MIERUNE Color
37    map.addSource('m_color', {
38        type: 'raster',
39        tiles: ['https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png'],
40        tileSize: 256,
41    });
42    map.addLayer({
43        id: 'm_color',
44        type: 'raster',
45        source: 'm_color',
46        minzoom: 0,
47        maxzoom: 18,
48    });
49
50    // OpenStreetMap
51    map.addSource('o_std', {
52        type: 'raster',
53        tiles: [
54            'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
55            'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
56        ],
57        tileSize: 256,
58    });
59    map.addLayer({
60        id: 'o_std',
61        type: 'raster',
62        source: 'o_std',
63        minzoom: 0,
64        maxzoom: 18,
65    });
66
67    // GSI Pale
68    map.addSource('t_pale', {
69        type: 'raster',
70        tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
71        tileSize: 256,
72    });
73    map.addLayer({
74        id: 't_pale',
75        type: 'raster',
76        source: 't_pale',
77        minzoom: 0,
78        maxzoom: 18,
79    });
80
81    // GSI Ort
82    map.addSource('t_ort', {
83        type: 'raster',
84        tiles: ['https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'],
85        tileSize: 256,
86    });
87    map.addLayer({
88        id: 't_ort',
89        type: 'raster',
90        source: 't_ort',
91        minzoom: 0,
92        maxzoom: 18,
93    });
94
95    // BaseLayer
96    const mapBaseLayer = {
97        m_mono: 'MIERUNE Mono',
98        m_color: 'MIERUNE Color',
99    };
100
101    // OverLayer
102    const mapOverLayer = {
103        o_std: 'OpenStreetMap',
104        t_pale: 'GSI Pale',
105        t_ort: 'GSI Ort',
106    };
107
108    // OpacityControl
109    let Opacity = new OpacityControl({
110        baseLayers: mapBaseLayer,
111        overLayers: mapOverLayer,
112        opacityControl: true,
113    });
114    map.addControl(Opacity, 'top-right');
115
116    // NavigationControl
117    let nc = new maplibregl.NavigationControl();
118    map.addControl(nc, 'top-left');
119});

ライセンス

MIT

Copyright (c) 2021-2025 Yasunori Kirimoto, Kanahiro Iguchi