画像




ベクトルタイル背景を切り替え表示するメモ。




画像




Mapbox GL JSでは、Leafletのようなレイヤ切り替え機能は存在しません。機能を実装するためには、独自で構築する必要があります。

今回は、このサンプルを参考に構築しました。




index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapboxGLJS Starter</title>
</head>
<body>
<nav id="menu"></nav>
<div id="map"></div>
<script src="./app.js"></script>
</body>
</html>




style.css


html, body {
height: 100%;
padding: 0;
margin: 0;
}

#map {
z-index: 0;
height: 100%;
}

#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 180px;
border: 1px solid rgba(0,0,0,0.4);
}

#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align: center;
}

#menu a:last-child {
border: none;
}

#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}

#menu a.active {
background-color: #8DCF3F;
color: #ffffff;
}

#menu a.active:hover {
background: #79bb2b;
}




script.js


// Mapbox APIkey
mapboxgl.accessToken = "pk.eyJ1Ijoic29iZXJqcCIsImEiOiJjamg0cmNtMmwwZ2Q4MnFvMzh5ODB2dTdwIn0.xezpDoQXZokQcjK9YgkeLQ";
// MIERUNE地図 APIkey
MIERUNE_apikey = "xxxxxxxxxx";


// Mapbox Streets読み込み
var map = new mapboxgl.Map({
container: "map",
style: 'mapbox://styles/mapbox/streets-v9',
center: [139.767, 35.681],
zoom: 11
});


map.on("load", function() {

// レイヤ設定
var Map_BaseLayer = {
streets: "Mapbox Streets",
dark: "Mapbox Dark",
satellite: "Mapbox Satellite",
normal: "MIERUNE Normal",
warm: "MIERUNE Warm"
};


// レイヤメニュー作成
for (var i = 0; i < Object.keys(Map_BaseLayer).length; i++) {
// StyleID取得
var id = Object.keys(Map_BaseLayer)[i];
// aタグ作成
var link = document.createElement("a");
link.href = "#";
// id追加
link.id = id;
// 名称追加
link.textContent = Map_BaseLayer[id];

// 初期表示streets以外非表示
if (id === "streets") {
link.className = "active";
} else {
link.className = "";
}

//aタグクリック処理
link.onclick = function (e) {
// id取得
var clickedLayer = this.id;
e.preventDefault();
e.stopPropagation();

// ON/OFF判断
if (this.className === "active") {
} else {
for (var j = 0; j < Object.keys(Map_BaseLayer).length; j++) {
// レイヤID取得
var ch_id = Object.keys(Map_BaseLayer)[j];

// レイヤの表示・非表示
if (ch_id === clickedLayer) {
// クリックしたレイヤを表示
this.className = "active";
// レイヤに対応したURLに切り替え
if (clickedLayer === "normal" || clickedLayer === "warm") {
map.setStyle("https://tile.cdn.mierune.co.jp/styles/" + clickedLayer + "/style.json" + "?key=" + MIERUNE_apikey);
} else {
map.setStyle('mapbox://styles/mapbox/' + clickedLayer + '-v9');
}
} else {
// クリックしたレイヤ以外を非表示
var ch_obj = document.getElementById(ch_id);
ch_obj.className = "";
}
}
}
};

// レイヤメニューにレイヤ追加
var layers = document.getElementById("menu");
layers.appendChild(link);
}

});


// ズームコントロール
var nc = new mapboxgl.NavigationControl();
map.addControl(nc, 'top-left');






Mapbox GL JSを手軽に始めるビルド環境公開しています。
mapboxgljs-starter







Q&A