LeafletでGeoJsonを読み込む

はじめに

オープンソースのWeb地図なら、Leafletが使いやすくてよいです。たとえばOpenStreetMapのタイル地図を実装する場合、以下のとおりです。

//地図を表示するdiv要素のidを設定
var map = L.map('map_container');
//地図の中心とズームレベルを指定
map.setView([45.0,143.0], 5);
//表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',  }).addTo(map);

このように簡単に書けます。ただ地図を表示したいならこれだけで終わりですが、Web上で動作するGISを作ろうと思っていて、ならば各種図形データにも対応していなきゃならんだろうと、いうことで。なんとLeafletはデフォルトでGeoJSONの読み込みに対応しています。実装したのが以下。

コード

function add_geojson(geojson){
    var myStyle = {
        "color": "#000000",
        "weight": 1,
        "opacity": 0.65
    };
    L.geoJSON(geojson,{
            style:myStyle,
            }).addTo(map);
}