//Bài 5: tạo Popup tìm kiếm bản đồ

var vung;
$("#document").ready(function () {

var container = document.getElementById('popup');

var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var overlay = new ol.Overlay(({

element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
})
);
var shouldUpdate = true;
var center= [564429.04,2317738.2];
var zoom = 16.56631263565161;
var rotation = 0;

closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
}

//bài 1. Hien thi cac lop ban do len web

var format = "image/png";
var bounds =
[105.10279846191406,17.914445877075195,106.5109634399414,18.763668060302734];
var vung = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/HaTinh/wms',
params: {
'FORMAT': format,
'VERSION': '1.1.0',
STYLES: '',
LAYERS: 'HaTinh:hatinh',
}
})
});

var projection=new ol.proj.Projection({

code: 'EPSG:3405',
units:'m',
axisOrientation:'neu'});
var view =new ol.View({
projection: projection,});

var map =new ol.Map({

target: 'map',
layers: [vung],

// //5.Khai báo thêm overlay ở trên trong đối tượng map

overlays: [overlay],//them khai bao overlays
 view: view
// // view: new ol.View({
// // projection:projection
// })
});
// 4.Hiển thị nổi bật đối tượng được chọn dạng vùng:camhoangdc

var styles = {

'MultiPolygon': new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#008080',
width: 5
})
})
};

var styleFunction = function (feature) {

return styles[feature.getGeometry().getType()];
};

var vectorLayer = new ol.layer.Vector({

style: styleFunction
});
map.addLayer(vectorLayer);
//map.getView().fitExtent(bounds,map.getSize());

map.getView().fit(bounds,map.getSize());
map.getView().fit(bounds, map.getSize());

//code tim kiem doi tuong

if (window.location.hash !== "") {
var hash = window.location.hash.replace("#map=", "");
var parts = hash.split("/");

if (parts.length === 4) {
zoom = parseInt(parts[0], 10);
center = [parseFloat(parts[1]), parseFloat(parts[2])];
rotation = parseFloat(parts[3]);
}
}

//2.Bật tắt các lóp bản đồ

$("#checkvung").change(function() {
if ($("#checkvung").is(":checked")){
vung.setVisible(true)
}
else{
vung.setVisible(false)
}
});
// $("#checkduong").change(function(){
// if ($("#checkduong").is(":checked")){
// duong.setVisible(true)
// }
// else{
// duong.setVisible(false)
// }
// });
// $("#checkdiem").change(function(){
// if ($("#checkdiem").is(":checked")){
// diem.setVisible(true)
// }
// else{
// diem.setVisible(false)
// }
// });

//3.lấy thông tin đối tượng (chú ý chế độ bảo mật của chrome)
//bai3

map.on('singleclick', function (evt) {

var view = map.getView();
var viewResolution = view.getResolution();
var source = vung.getSource();
var url = source.getFeatureInfoUrl(evt.coordinate, viewResolution,
view.getProjection(),
{ 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });
if(url) {
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (n) {
var content = "<table>";
for (var i = 0; i < n.features.length; i++) {
var feature = n.features[i];
var featureAttr = feature.properties;
content += "<tr><td>Tỉnh:" + featureAttr["name_3"]
+"</td></tr>"

}
content += "</table>";
$("#info").html(content);
//5.

//$("#info").html(content);
$("#popup-content").html(content);
overlay.setPosition(evt.coordinate);

//bai4(TT)
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(n)
});

vectorLayer.setSource(vectorSource);

}
})
}
})
});