はじめに
この記事は#30DayMapChallenge2022 6日目の記事です。
テーマはNetworkです。
MapLibre GL JSを使って羽田空港と新千歳空港のマーカーを地図上に表示して、2地点間をジャンプしてみます。
地図表示
東京と北海道が収まるように表示してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="サンプルです">
<link href="style.css" rel="stylesheet">
<!-- MapLibre -->
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
main.js
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [138.508, 40.351], // 中心座標
zoom: 5.5, // ズームレベル
pitch: 0, // 傾き
});
空港のマーカー表示
今回は羽田空港と新千歳空港のマーカーを表示してみます。
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [138.508, 40.351], // 中心座標
zoom: 5.5, // ズームレベル
pitch: 0, // 傾き
});
+var haneda_marker = new maplibregl.Marker()
+ .setLngLat([139.7663947, 35.5437833])
+ .addTo(map);
+var shinchitose_marker = new maplibregl.Marker()
+ .setLngLat([141.681229, 42.7875897])
+ .addTo(map);
flyOptionsを追加する
flyOptionsでflyToを使用して、目的の空港へとジャンプします
公式のサンプルコードを参考に実装しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="サンプルです">
<link href="style.css" rel="stylesheet">
<!-- MapLibre -->
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
+ <button id="fly">空港にジャンプ！</button>
<script src="main.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
+#fly {
+ display: block;
+ position: relative;
+ margin: 30px auto;
+ width: 15%;
+ height: 50px;
+ padding: 10px;
+ border: none;
+ border-radius: 50px;
+ font-size: 20px;
+ text-align: center;
+ color: #fff;
+ background: #0067c0;
+ cursor: pointer;
+}
+#fly:hover {
+ transform: scale(1.1, 1.1);
+}
var haneda_location = [139.7663947, 35.5437833];
var shinchitose_location = [141.681229, 42.7875897];
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: haneda_location, // 中心座標
zoom: 11, // ズームレベル
pitch: 0, // 傾き
});
var haneda_marker = new maplibregl.Marker()
.setLngLat(haneda_location)
.addTo(map);
var shinchitose_marker = new maplibregl.Marker()
.setLngLat(shinchitose_location)
.addTo(map);
var isAtStart = true;
document.getElementById('fly').addEventListener('click', function () {
var target = isAtStart ? shinchitose_location : haneda_location;
isAtStart = !isAtStart;
map.flyTo({
center: target,
zoom: 9,
bearing: 0,
speed: 0.4,
curve: 1,
easing: function (t) {
return t;
},
essential: true,
});
});
ボタンをクリックすると羽田空港から新千歳空港へジャンプできました！
新千歳空港から羽田空港にも飛べます。
余談: GIF作成
使用したアプリ
Qiitaに挿入したGIFの作成には「ScreenToGIF」を使いました。
窓の杜から、ストアアプリ版をダウンロードしました。
普通に録画して保存したところ115MBで、Qiitaの制限を超えてしまいました。
画像のアップロード方法
ファイル単体で10MBまでの画像ファイルをアップロードすることが可能です。
画像ファイルは月に合計100MBまでしかアップロードできません。
ファイルサイズ削減
ファイルサイズを下げるため以下の2点を実施しました。これで115MB→7MBまで削減しました。
- フレームの重複削除
- フレーム数削減
- GIFがカクカクなのはこのためです(T_T)
再生速度調整
再生を早くするために以下を実施しました。
- スケールを50%に設定
- 2倍速になりました！
参考文献