JavaScriptとjQueryでインタラクティブなウェブマップを作成する方法
2024-07-02
必要なもの:
- テキストエディタ
- ウェブブラウザ
手順:
- HTMLファイルを作成する:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルなマップ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#map {
height: 400px; /* マップの高さを調整 */
width: 600px; /* マップの幅を調整 */
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// マップを作成
var map = L.map('map').setView([35.6895, 139.6917], 13);
// タイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// マーカーを追加
var marker = L.marker([35.6895, 139.6917]).addTo(map);
// マーカーにポップアップを追加
marker.bindPopup("ここにポップアップが表示されます").openPopup();
</script>
</body>
</html>
- ファイルを保存してブラウザで開く:
上記コードを index.html ファイルとして保存し、ブラウザで開きます。すると、日本の東京を中心とした地図が表示され、赤いマーカーが配置されます。マーカーをクリックすると、ポップアップが表示されます。
このコードの説明:
L.map('map'): マップを作成し、IDがmapの要素に配置します。setView([緯度, 経度], ズームレベル): 地図の初期表示位置とズームレベルを設定します。L.tileLayer(): 地図の背景となるタイルレイヤーを追加します。addTo(map): 作成した要素をマップに追加します。L.marker([緯度, 経度]): マーカーを作成します。bindPopup(): マーカーをクリックしたときに表示されるポップアップを設定します。openPopup(): マーカーのポップアップをすぐに開きます。
jQueryを使って、マップをよりインタラクティブにすることができます。例えば、ユーザーがボタンをクリックしたときに、別の場所へマップを移動したり、新しいマーカーを追加したりすることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<button id="moveToTokyo">東京へ移動</button>
<button id="addMarker">マーカーを追加</button>
<div id="map"></div>
<script>
// ... (マップ作成のコードは省略)
// "東京へ移動" ボタンをクリックしたとき
$('#moveToTokyo').click(function() {
map.panTo([35.6895, 139.6917]);
});
// "マーカーを追加" ボタンをクリックしたとき
$('#addMarker').click(function() {
var lat = prompt("緯度を入力してください:");
var lng = prompt("経度を入力してください:");
if (lat && lng) {
var marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(map);
marker
HTML (index.html):
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルなマップ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#map {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<button id="addMarker">マーカーを追加</button>
<div id="map"></div>
<script>
// マップを作成
var map = L.map('map').setView([35.6895, 139.6917], 13);
// タイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// "マーカーを追加" ボタンをクリックしたとき
$('#addMarker').click(function() {
var lat = prompt("緯度を入力してください:");
var lng = prompt("経度を入力してください:");
if (lat && lng) {
var marker = L.marker([parseFloat(lat), parseFloat(lng)]).addTo(map);
marker.bindPopup("新しいマーカー").openPopup();
}
});
</script>
</body>
</html>
JavaScript (script.js):
// ... (上記と同じ)
説明:
- HTML:
- JavaScript:
addMarkerボタンのclickイベントハンドラを追加しました。- ユーザーが入力した緯度と経度に基づいて新しい
L.markerオブジェクトを作成します。 - 新しいマーカーにポップアップを設定してすぐに開きます。
この例は、jQueryを使って地図を操作する基本的な方法を示しています。このコードをさらに拡張して、様々な機能を追加することができます。例えば、
- ユーザーが地図をクリックしたときに新しいマーカーを追加できるようにする
- 複数のマーカーをグループ化して管理できるようにする
- 地図上の地点を検索できるようにする
- 地図データをGeoJSON形式で読み込む
これらの機能を実装するには、LeafletとjQueryのAPIに関する追加知識が必要になります。
JavaScriptとjQuery以外の方法でシンプルなマップを作成する方法
Leaflet + Hash.js:
- 利点:
- Leafletと同様に軽量で使いやすいライブラリです。
- 例:
<!DOCTYPE html> <html lang="ja"> <head> </head> <body> <div id="map"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hash.js/2.0.0/hash.js"></script> <script> // マップを作成 var map = L.map('map').setView([35.6895, 139.6917], 13); // タイルレイヤーを追加 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // ハッシュフラグメントに基づいてマップの状態を更新 Hash.on('change', function() { var hash = Hash.toObject(); if (hash.lat && hash.lng) { map.panTo([parseFloat(hash.lat), parseFloat(hash.lng)]); } }); // マーカーを追加 var marker = L.marker([35.6895, 139.6917]).addTo(map); marker.bindPopup("ここにポップアップが表示されます").openPopup(); // URLを共有 var link = window.location.href + "#" + marker.getLatLng(); console.log("このマップのURL: " + link); </script> </body> </html>
Mapbox GL JS:
- 利点:
- Leafletよりも高機能で、3Dマップやベクタータイルなどの機能をサポートしています。
- Mapbox Studioなどのツールを使用して、カスタムマップを簡単に作成できます。
- 例:
<!DOCTYPE html> <html lang="ja"> <head> <script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' /> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // Mapboxアクセストークンを設定 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', // マップスタイルを設定 center: [139.6917, 35.6895], // 初期表示位置を設定 zoom: 13 }); // マーカーを追加 var marker = new mapboxgl.Marker({ lngLat: [139.6917, 35.6895] // マーカーの位置を設定 }).addTo(map); // ポップアップを追加 marker.setPopup(new mapboxgl.Popup({ offset: [0, -15] }) .setHTML('ここにポップアップが表示されます')); </script> </body> </html>
Google Maps Platform:
- 利点:
- Google Mapsの機能をすべて利用できます。
- 住所検索、ルート検索、ストリートビューなどの機能がすぐに利用できます。
- 例:
<!DOCTYPE html> <html lang="ja">
javascript jquery hashmap
![リアルタイムでテキストボックスの変更を監視：jQuery で input[type="text"] の値変更検出](/thumbnail/75.webp)
