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

License

MIT

Copyright (c) 2021-2024 Yasunori Kirimoto

---

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

ライセンス

MIT

Copyright (c) 2021-2024 Yasunori Kirimoto