const geojson = "index.geojson";

var __map = null;
var __markerLayer = null;
var __lineLayer = null;

var prefcode = "00";
var prefname = "";
var citycode = "00000";
var cityname = "";
var lonlat = [139.7637,35.6808];

var queryString = window.location.search;
if(queryString){
	queryString = queryString.substring(1);
	var parameters = queryString.split('&');
	for (var i = 0; i < parameters.length; i++) {
		var element = parameters[i].split('=');
		var paramName = decodeURIComponent(element[0]);
		var paramValue = decodeURIComponent(element[1]);
		if (paramName == "prefcode") {
			prefcode = paramValue;
		}
	}
}

// マーカーの見た目の作成
var style = new ol.style.Style({
    image: new ol.style.Icon({
        src: 'lib/img/mapmarker_256x256.png',
        anchor: [0.5, 0.5],
        scale: 0.2
    }),
    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
});

function loadMap() {
	
	$.when(
		$.getJSON("mesh/meshcode_"+ prefcode +".geojson")
	).done(function(data1) {
	    $(data1.features).each(function() {
		    lonlat = this.geometry.coordinates;
	    });
	    
		__map = new ol.Map({
			target: 'map',
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				})
			],
			view: new ol.View({
				center: ol.proj.fromLonLat(lonlat),
				zoom: 10
			})
		});
		
	    // 表示するためのレイヤーを作成する
	    __markerLayer = new ol.layer.Vector({
	        source: new ol.source.Vector()
	    });
	    __map.addLayer(__markerLayer);
	    
	    // ポップアップを表示するためのオーバーレイを作成する
	    __overlay = new ol.Overlay({
	        element: document.getElementById('popup'),
	        positioning: 'bottom-center'
	    });


		$.when(
			$.getJSON("mesh/meshcode_"+ prefcode +".geojson")
		).done(function(data2) {
			features = data2.features;
		    $(features).each(function() {
				if (this.geometry != null) {
					if (this.geometry.type == "Point") {
					    var feature = new ol.Feature({
					        geometry: new ol.geom.Point(ol.proj.fromLonLat(this.geometry.coordinates)),
					        citycode: this.properties.citycode,
					        cityname: this.properties.cityname
					    });
					    feature.information = this;
					    feature.setStyle(style);
					    __markerLayer.getSource().addFeature(feature);
					}
					if (this.geometry.type == "LineString") {
						drawPolygon([this.geometry.coordinates]);
					}
				}
		    });
	    
		    // 地図のクリックイベントを設定
		    __map.on('click', function (evt) {
		        var feature = __map.forEachFeatureAtPixel(
					evt.pixel,
		            function (feature) {
		                return feature;
		            }
		        );
		        if (feature) {
		            var coordinates = feature.getGeometry().getCoordinates();
		            var info = feature.information;
		            var element = __overlay.getElement();
		            var descriptionHTML =
		                "<div>citycode: " + info.properties.citycode + "</div>" +
		                "<div>cityname: " + info.properties.cityname + "</div>" +
		                "<div><a href='citymesh.html?prefcode="+ info.properties.prefcode +"&citycode="+ info.properties.citycode +"'>" + info.properties.prefcode+" - "+info.properties.cityname + "</a></div>";
		            element.innerHTML = descriptionHTML;
		            __overlay.setPosition(coordinates);
		            __map.addOverlay(__overlay);
		        } else {
		            __map.removeOverlay(__overlay);
		        }
		    });
	    });
	});
}