// Where you want to render the map.
var element = document.getElementById('applicationmap');

// Height has to be set. You can do this in CSS too.
//element.style = 'height:450px;';

var defaultWKT = 'POLYGON((-1.22 7.14, -1.17 7.14, -1.17 7.26, -1.22 7.26, -1.22 7.14))';
searchLayer = new ol.layer.Vector({
	title : 'Search Layer',
	source : undefined,
	style : new ol.style.Style({
		stroke : new ol.style.Stroke({
			color : 'red',
			width : 3
		})
	})
});

// Create Openlayers map on map element.
var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: element,
    controls: ol.control.defaults().extend([
    new ol.control.MousePosition({
            projection: 'EPSG:4326',
            coordinateFormat: function(coordinate) {
             return ol.coordinate.format(coordinate, '{x}, {y}', 4);
        },
    }),
    new ol.control.ScaleLine(),
    ]),
    view: new ol.View({
        center: [-135846.63, 891762.35],
      zoom: 6
    })
});

map.addLayer(searchLayer);

searchLayer.setSource(new ol.source.Vector({features : (new ol.format.WKT()).readFeatures(defaultWKT)}));
view.fit(searchLayer.getSource().getExtent());
pvlmd_map.getView().fit(searchLayer.getSource().getExtent(),{size : map.getSize(),maxZoom : 16})


function viewApplication(applicationId) {
    console.log(applicationId);
    window.location.href = "/permits/viewapplication?id=" + applicationId;
}

function viewPending() {
    console.log('foo bar');
    window.location.href = "/permits/pending";
}