Leaflet.js を使って GeoJSON データを地図上に表示してみる その1 - Qiita
で下ごしらえしたGeoJSONファイルを使用
#JavaScript
index.js
//. 掛川城の緯度経度(初期位置)
var lat = 34.77530283508074;
var lng = 138.01500141620636;
var map = null;
var marker = null;
$(function () {
//. 掛川城を中心とした地図を OpenStreetMap データで表示
map = L.map('map').setView([lat, lng], 15);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18
}
).addTo(map);
$.getJSON('./convertcsv.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);
});
});