//jsonデータの読み込み。fetchを使っているが jQuery.ajaxでもいい。
fetch('../_dataset/sample2.geojson')
.then(function(response) {
return response.json()
}).then(function(json) {
draw(json)
});
function draw(geodata){
var map = L.map('map').setView([36.322356, 139.013057], 15);
//地理院地図レイヤー追加
L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
}
).addTo(map);
//地物追加
var markerLayer = L.geoJson(geodata).addTo(map);
//バッファーレイヤー準備
var bufferLayer = L.geoJson().addTo(map);
//バッファー追加
var addbuffer = function(meter){
bufferLayer.clearLayers(); //前回のバッファをクリア
var buffered = geodata.features.map(function(feature){
return turf.buffer(feature, meter, "meters");
});
bufferLayer.addData(buffered);
bufferLayer.setStyle({color: "#000000"});
};
//スライダーの値が変更されたらバッファを追加する
document.querySelector("#range").addEventListener("change", function(){
var meter = this.value;
document.querySelector("#meter").innerText = meter;
addbuffer(meter);
})
//初回だけchangeイベントをJSで発火させる
document.querySelector("#range").dispatchEvent(new Event('change'))
}
