• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Leaflet へ行く。
  • 1 (2021-12-02 (木) 12:10:42)

---

Leaflet

https://leafletjs.com/

Leaflet は Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。モバイルでも使えるインタラクティブな地図をWebページ上に簡単に表示できます。

サンプルコード

• DEMO：https://koichi-inoue.github.io/JS_Leaflet/
• CODE：https://github.com/koichi-inoue/JS_Leaflet
  
  
  
  

Leaflet を利用するには

CDNから CSS と JS を読み込むだけで利用できます。

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" >
<script src ="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

スクリプトの概説

• HTML上の地図を配置する div要素の id を設定

  var map = L.map('map');

• 地図の中心の緯度・経度とズームレベルを指定

  map.setView( [35, 136] , 5);

• タイルレイヤーの指定（OpenStreetMap を利用）

  L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

• マーカーを指定（九州産業大学の座標を指定）
  L.marker([ 33.66983627668292, 130.44487416744232 ] ).addTo(map)

     .bindPopup('Kyushu Sangyo University')
     .openPopup();

参考｜緯度・経度情報の取得

• GoogleMap を使う
  地図上で目的の場所をダブルクリックすると、マーカーが表示されるとともに住所と緯度・経度が表示されます。

• GeoJSON.io を使う
  https://geojson.io/
  地図上でマーカーツールを選択して目的の場所をクリックすると右サイドに GeoJSON形式のデータが表示されます。"coordinates" として表示される最初の数字が経度、次の数字が緯度になっています。