SimplePoiMapとその利用例


GeoJSONファイルに定義された地物(POI)を表示するだけの簡単な地図サイトのテンプレートを作成し、GitHubで公開しました。ソースコードはこちら、GitHub Pagesによる表示はこちらです。

  1. このリポジトリをForkする
  2. リポジトリ名を適宜変更する
  3. index.htmlファイルを適宜書き換える
  4. poi.geojsonを表示したいPOIのデータで置き換える
  5. GitHub Pagesを設定して公開する

という手順で、簡単に地図サイトを作成して公開することができます。
地物を示すマーカーをクリックすると、GeoJSONファイルのfeatures->propertiesの中身が表形式でポップアップ表示されます。テンプレートに同梱したpoi.geojsonファイル

{
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    139.536825,
                    35.505723
                ]
            },
            "properties": {
                "NAME": "神奈川県立四季の森公園",
                "ADDRESS": "神奈川県横浜市緑区寺山町"
            }
        },
        :

では、NAMEとその値、ADDRESSとその値が表示されます。

リポジトリには、CSVファイルからGeoJSONファイルを生成する簡単なPHPスクリプトcsv2geojson.phpも同梱しています。入力するCSVファイルの名前はpoi.csv、生成するGeoJSONファイルの名前はpoi.geojsonです。CSVファイルの先頭行は列ラベルで、緯度の列ラベルはlat、経度の列ラベルはlonです。それ以外のラベルの列は、地物のプロパティとしてGeoJSONファイルのfeatures->propertiesに展開されます。

このテンプレートの利用例として、2つのサイトを作成しました。
1つめは、県や市町村など特定地域の石造物についての書籍のマップです。ソースコードはこちら、GitHub Pagesによる表示はこちらです。この例では、同じ緯度経度に複数の地物が存在する可能性があるため、Leaflet.markerclusterプラグインを追加して利用しています。また、ポップアップ表示でID列はURLにリンクするようにしています。

2つめの利用例は、勝海舟の『吹塵録』に含まれる「萬石以上分限帳」による、幕末における一万石以上の藩とその石高マップです。ソースコードはこちら、GitHub Pagesによる表示はこちらです。この例では、マーカーに藩名の最初の1文字を表示するほか、石高によってマーカーの色を変えたりもしています。そのために、LeafletのBeautifyMarkerプラグインを追加して利用しています。

2021.7.10追記
3つめの利用例として、東京都と神奈川県の七福神めぐりの札所をマップにしました。ソースコードはこちら、GitHub Pagesによる表示はこちらです。Leaflet.awesome-markersプラグインを追加し、マーカーの色をランダムに設定しました。その際、同じ七福神めぐりの札所は同じ色にしました。

SimplePoiMapはMITライセンスのOSSですので、ぜひご利用下さい。