なんとか雨が降らなかった
網干の祭りだそうで、スーパーに行ったら祭り体制になってた。
_ leaflet.jsの地図にGeoJSONの情報を表示させるいくつかの方法(解決編)
まだ、leaflet.jsでバタバタしてます。
前回、日記に「leaflet.jsの地図にGeoJSONの情報を表示させる」というエントリを書きました。ですが、ファイルに手を加えて表示させるのは不格好だなと思ってました。 そういうこともあって、GeoJSONそのままの形で読み込む方法を探してバタバタした結果、納得できるようになったのでメモしておきます。
参考
- External GeoJSON and Leaflet: The Other Way(s) – Victory Formation: http://lyzidiamond.com/posts/external-geojson-and-leaflet-the-other-way/
leaflet AJAXプラグインを使って読み込む
悩んだ悩んだ。
最初に試したのがこの方法で、悩んで姫路IT系勉強会でも質問のネタにしたのだけど、何回試してもうまくいかない。
デバッガで見るとファイルを読み込んだところでコケるので、GeoJSONのファイルを作りなおしたりしたけれど結果は変わらず投げようかと思っていたところで、ふと、気がついた。 ローカルのHTMLファイルをブラウザで読み込ませるのではなく、httpを通して読み込ませるとどうなる?
これを参考に、
$ python3 -m http.server 8080という感じでPython3でWebサーバーを実行してアクセスすると、ちゃんと読み込んで表示する!!!
はあ。疲れた。
ということで、ローカルからではなくWebサーバー越しでアクセスして使う方法。
Leaflet Ajaxプラグインは、CDNで配布していないのでローカルにダウンロードしておきます。
- calvinmetcalf/leaflet-ajax: https://github.com/calvinmetcalf/leaflet-ajax
Leaflet.jsを読み込んだ下あたりにLeaflet Ajaxプラグインを読み込むように書いておきます。
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet.ajax.min.js"></script>GeoJSON読み込み部分は、サンプルほぼコピペでいけます。
var geojsonLayer = new L.GeoJSON.AJAX("map.geojson");
geojsonLayer.addTo(map);これで、http越しにアクセスするとGeoJSONの場所にピンが打たれるはずです。
Leaflet Ajaxプラグインの成果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leaflet.jsの練習</title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet.ajax.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<style>
body{
margin: 0;
padding: 0;
}
div#map{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([34.839378, 134.694097],15);
var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
});
tileLayer.addTo(map);
var marker = L.marker([34.839378, 134.694097],{
title: 'test',
draggable: true
}).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
var geojsonLayer = new L.GeoJSON.AJAX("map.geojson");
geojsonLayer.addTo(map);
</script>
</body>
</html>jQueryを使って読み込む
姫路IT系勉強会で相談した時、「JSONの読み込みは、jQuery使うと楽」とのワテさんからのアドバイスがあったので、こっちでももがいた結果がこちら。 jQueryを使うと、汎用性とHTMLファイルをブラウザで読み込んでも、ちゃんとGeoJSONが読み込めるところがメリットですね。
まず、jQueryを読み込むように書いておきます。新しいブラウザだけでいいので2.x系使ってます。
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>GeoJSONを読み込んで地図表示は、こんな感じ。
$.getJSON("map.geojson",function(data){
L.geoJson(data).addTo(map);
});たったこれだけなんだけど、これも結構時間かかった…。
jQueryを使った成果
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leaflet.jsの練習</title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<style>
body{
margin: 0;
padding: 0;
}
div#map{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([34.839378, 134.694097],15);
var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
});
tileLayer.addTo(map);
var marker = L.marker([34.839378, 134.694097],{
title: 'test',
draggable: true
}).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
$.getJSON("map.geojson",function(data){
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>