var mymap = L.map("mymap").setView([38.891, 139.824], 13);

// ベースマップ群
var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

var gsi = L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
 attribution:
   '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(mymap);

var baseconf = {'OpenStreatMap': osm, '国土地理院': gsi};



var officeIcon = L.icon({
  iconUrl:	'../l/images/marker-icon-2.png',
  iconSize:     [25, 41],
  iconAnchor:	[12, 41],
  shadowUrl:	'../l/images/marker-shadow.png',
  shadowSize:   [41, 41],
  shadowAnchor:	[15, 40],
});

// オブジェクトレイヤ
function bindGeoJSON(j, layer, icon) {
    let p = j.properties;
    if (p) {
	let name = p.name, desc = p.description;
	if (desc)
	    desc = desc.replace(/{{(.*)}}/g, '<img src="$1">');
	else
	    desc="";
	let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
	layer.bindPopup(popup);
    }
    //layer.setOpacity(0.5);
    if (icon && layer.setIcon) layer.setIcon(officeIcon);
}
function bindGJ1(f, l) {bindGeoJSON(f, l, null)}
function bindGJ2(f, l) {bindGeoJSON(f, l, officeIcon)}
var anzen = new L.GeoJSON.AJAX("anzen.geojson", {
    onEachFeature: bindGJ1
});


var offices = new L.GeoJSON.AJAX("office.geojson", {
    onEachFeature: bindGJ2});

var overlayers = {'安全': anzen, '役所': offices}

var lconl = L.control.layers(baseconf, overlayers).addTo(mymap);

function nLayers(e) {
    var elem = e.target
    // alert(elem.value);
    var ols = offices.getLayers();
    for (var i=0; i<ols.length; i++) {
	ols[i].setOpacity(elem.value/100);
    }
    var als = anzen.getLayers();
    for (var i=0; i<als.length; i++) {
    	var a = als[i]
    	if (a.setOpacity) a.setOpacity(1-elem.value/100);
    }
    ////// anzenLayerGroup.setOpacity(1-elem.value/100);
    document.getElementById("ofval").textContent = elem.value;
}
function init() {
    document.getElementById("opa").addEventListener("input", nLayers);
}
document.addEventListener("DOMContentLoaded", init, false)
var anzenLayerGroup;
anzen.on('data:loaded', function() {
    anzenLayerGroup = L.layerGroup(anzen.getLayers());
    lconl.removeLayer(anzen);
    lconl.addOverlay(anzenLayerGroup, "Anzen");
    alert("DONE");
    alert(anzen.getLayers().length);
})
// offices.on('data:loaded', function() {
//     alert("done");
//     alert(offices.getLayers().length);
// })