オープンデータを地図上に表示してみる

オープンデータを地図上に表示してみる
以前オープンデータを活用したサイトを WordPress で作ってみる で、位置情報が含まれたオープンデータを地図上に表示する方法を模索しましたが、Leaflet.jsを使うと便利らしい。

Leaflet は広く使われているWeb地図のためのJavaScriptライブラリである。 2011年に最初にリリースされた[2]。 モバイルとデスクトップのプラットフォームのほとんどに対応し、HTML5とCSS3に対応している。 OpenLayersやGoogle Maps API(英語版)とともに最も人気のあるJavaScript地図ライブラリの一つであり、FourSquare、Pinterest、Flickrなどの有名なサイトで使われている。 Leafletを使うと、GISの知識のない開発者でも容易にタイルベースのWeb地図を表示できる。またGeoJSONから地物データを読み込んでスタイリングしたり、インタラクティブなレイヤーを作ることができる(クリックするとポップアップが表示されるマーカーなど)。 LeafletはVladimir Agafonkinによって開発されている。Vladimir Agafonkinは2013年からMapboxに加わっている [3]。

まずはオープンデータのCSVからGeoJSONを生成。


その GeoJSON を Leaflet.js に読み込ませるには

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Leaflet.js TEST</title>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css'>
      <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="map"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js'></script>
    <script  src="index.js"></script>
</body>
</html>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
    }

    #map {
      width: 100%;
      height: 100%;
    }
//. 掛川の緯度経度(初期位置)
var lat = 34.721884;
var lng = 138.01500141620636;

var map = null;
var marker = null;

$(function () {
  //. 掛川城を中心とした地図を OpenStreetMap データで表示
  map = L.map('map').setView([lat, lng], 11);
  L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a>',
      maxZoom: 18
    }
  ).addTo(map);

  $.getJSON('https://raw.githubusercontent.com/inqsite/kakegawa_geojson/kakegawa_geojson/siyakusyosisyo.geojson', function (data) {
    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        var field = '名称: '+feature.properties.name+ '<br>'+
        '住所: '+feature.properties.address+ '<br>'+
        '電話番号: '+feature.properties.tel+ '<br>'+
        '<a href="'+feature.properties.url+ '" target="_blank">ホームページ</a>';

        layer.bindPopup(field);
      }
    });
    geojson.addTo(map);
  });
});

で、こんな地図を表示することができます。

See the Pen Leaflet.js GeoJSONTEST by inqsite (@inqsite) on CodePen.


CodePen に JSONファイルをアップロードするやり方がわからなかったので、GitHub にアップロードした GeoJSON を読み込ませています。