画像




GeoJSONを切り替え表示するメモ。




画像




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


// MIERUNE MONO読み込み
var map = new mapboxgl.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
}
},
layers: [{
id: "m_mono",
type: "raster",
source: "m_mono",
minzoom: 0,
maxzoom: 18
}]
},
center: [139.7670, 35.6810],
zoom: 13
});


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

// ポイント追加
map.addSource("MapCircle", {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Point",
coordinates: [139.7600,35.6800]
}
}
});
map.addLayer({
id: "MapCircle",
type: "circle",
source: "MapCircle",
layout: {},
paint: {
"circle-pitch-alignment": "map",
"circle-stroke-color": "#1253A4",
"circle-stroke-width": 5,
"circle-stroke-opacity": 0.8,
"circle-color": "#1253A4",
"circle-radius": 5,
"circle-opacity": 0.5
}
});

// ライン追加
map.addSource("MapLine", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[139.7627,35.6641],
[139.7552,35.6721],
[139.7580,35.6888],
[139.7666,35.6970]
]
}
}
});
map.addLayer({
id: "MapLine",
type: "line",
source: "MapLine",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "#FFD464",
"line-width": 10,
"line-opacity": 0.8
}
});

// ポリゴン追加
map.addSource("MapPolygon", {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[
[139.7661,35.6759],
[139.7718,35.6741],
[139.7722,35.6745],
[139.7786,35.6837],
[139.7734,35.6843],
[139.7709,35.6846],
[139.7687,35.6799],
[139.7661,35.6759]
]]
}
}
});
map.addLayer({
id: "MapPolygon",
type: "fill",
source: "MapPolygon",
layout: {},
paint: {
"fill-color": "#58BE89",
"fill-opacity": 0.5
}
});


// レイヤ設定
var Map_AddLayer = {
MapCircle: "ポイント",
MapLine: "ライン",
MapPolygon: "ポリゴン"
};


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

// 初期表示全て表示
link.className = "active";

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

// ON/OFF状態取得
var visibility = map.getLayoutProperty(clickedLayer, "visibility");

// ON/OFF判断
if (visibility === 'visible') {
// クリックしたレイヤを非表示
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
// クリックしたレイヤを表示
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
this.className = 'active';
}
};

// レイヤメニューにレイヤ追加
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