BODIK のスッキリカッコ良いデザインの地図を使ってみませんか？！３D対応です。
BODIKが提供するオープンデータ特化型地図タイルサーバーを、簡単にWebサイトへ導入できる実装サンプルアプリです。
単なる2Dの地図表示だけでなく、【Ctrlキーを押しながらマウスでドラッグ】することで、地図がダイナミックに傾き、立体感のある「3D地図」としてグリグリ動かせる迫力の機能を体験できます。
面倒な初期設定や、OpenStreetMap等のライセンスに準拠したクレジット（出典）の表示方法も最初から綺麗に組み込み済み。「自分のサイトに先進的な3D地図を埋め込みたい」という開発者のスタートダッシュに最適な、コピペでそのまま動くHTMLソースコードを提供します。
【Ctrlキーを押しながらマウスでドラッグしてみてください！】
以下を index.html として保存してクリックしてみてください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BODIK タイルサーバー配信サンプル（3D表示対応） - MapLibre GL JS</title><link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script><style>
/ 画面全体に地図を広げるためのスタイル設定 /
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 中心座標の設定（例：福岡市役所）
const targetLocation = [130.4017, 33.5902];
// 1. 地図の初期化
const map = new maplibregl.Map({
container: 'map',
// BODIK提供のベクトルタイルスタイルURLを指定
style: 'https://apps.bodik.jp/tileserver/styles/klokantech-basic/style.json',
center: targetLocation,
zoom: 14,
// 自動の出典表示コントロールを一旦オフにする（後からカスタムで追加するため）
attributionControl: false
});
// 2. ズーム・回転コントロール（ナビゲーション）の追加
const nav = new maplibregl.NavigationControl({
showCompass: true,
showZoom: true
});
map.addControl(nav, 'top-right');
// 3. 出典（アトリビューション）コントロールの追加
// 地図データ本来の出典（OpenStreetMap等）に加えて、BODIKのクレジットを明示的に追加
const attribution = new maplibregl.AttributionControl({
compact: false, // 画面幅が狭くても省略（ⓘマークに）せず常に表示する設定
customAttribution: '地図配信: <a href="https://www.bodik.jp/" target="_blank" rel="noopener noreferrer">BODIK</a>'
});
map.addControl(attribution, 'bottom-right');
// 4. 地図読み込み完了後の処理（マーカーやポップアップの追加）
map.on('load', () => {
// ポップアップ（吹き出し）の作成
// ★「Ctrl＋ドラッグ」による3D表示の操作案内を追加しています！
const popup = new maplibregl.Popup({ offset: 30 })
.setHTML(`
<strong style="font-size: 14px;">福岡市役所</strong><br>
<span style="color: #666; font-size: 12px;">BODIK 地図サーバーを利用中</span><br>
<span style="color: #ff6600; font-size: 11px; font-weight: bold;">💡 Ctrlキーを押しながらドラッグで3D地図に！</span>
`);
// マーカー（ピン）を作成して地図に追加
new maplibregl.Marker({ color: '#ff6600' }) // BODIKのイメージに馴染むオレンジカラー
.setLngLat(targetLocation)
.setPopup(popup)
.addTo(map);
});
</script>
</body>
</html> |
オープンデータソース
データソースが指定されていません。
