Commit 57dc470f authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

trying things

parent 8756550e
......@@ -134,7 +134,7 @@
var forcing = false;
var obs = false;
var card = new LocationCard(cardid, accordionDiv, language, langData, map, forcing, obs);
var card = new STWkit.LocationCard(cardid, accordionDiv, language, langData, map, forcing, obs);
card.show();
L.DomEvent.disableClickPropagation(this.container);
......
......@@ -13,525 +13,530 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var AccordionCard = (function () {
function AccordionCard(id, label, parent, content) {
this.status = false;
var container = STWkit.DomUtil.create('div', 'accordion-card', parent);
this.title = STWkit.DomUtil.create('h5', 'uk-accordion-title uk-width-1-1 chevron-title', container);
this.title.id = id;
this.badgeSpan = STWkit.DomUtil.create('span', 'uk-badge', this.title);
var titleSpan = STWkit.DomUtil.create('span', 'title', this.title);
titleSpan.textContent = ' ' + label;
this.titleIcon = STWkit.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', this.title);
var accContent = STWkit.DomUtil.create('div', 'uk-accordion-content uk-padding-remove', container);
accContent.appendChild(content);
this.content = content;
this.hide();
this.changeListeners = [];
}
AccordionCard.prototype.addChangeFnListener = function (listener) {
this.changeListeners.push(listener);
};
AccordionCard.prototype.fireChangeFn = function (changeCard) {
for (var i = 0; i < this.changeListeners.length; i++) {
var listener = this.changeListeners[i];
listener.changeFn(changeCard);
var STWkit;
(function (STWkit) {
var AccordionCard = (function () {
function AccordionCard(id, label, parent, content) {
this.status = false;
var container = STWkit.DomUtil.create('div', 'accordion-card', parent);
this.title = STWkit.DomUtil.create('h5', 'uk-accordion-title uk-width-1-1 chevron-title', container);
this.title.id = id;
this.badgeSpan = STWkit.DomUtil.create('span', 'uk-badge', this.title);
var titleSpan = STWkit.DomUtil.create('span', 'title', this.title);
titleSpan.textContent = ' ' + label;
this.titleIcon = STWkit.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', this.title);
var accContent = STWkit.DomUtil.create('div', 'uk-accordion-content uk-padding-remove', container);
accContent.appendChild(content);
this.content = content;
this.hide();
this.changeListeners = [];
}
};
AccordionCard.prototype.addLabelDiv = function (parentDiv, labelTxt, labelInfo) {
var self = this;
var label = STWkit.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
label.textContent = labelTxt;
var addPositionInfo = STWkit.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function () {
AccordionCard.infoMsg(labelTxt, labelInfo);
AccordionCard.prototype.addChangeFnListener = function (listener) {
this.changeListeners.push(listener);
};
};
;
AccordionCard.infoMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'info', timeout: 10000 });
};
AccordionCard.warningMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'warning', timeout: 10000 });
};
AccordionCard.enableNext = function (button, enable) {
var isEnabled = button.classList.contains('next-enabled');
if (enable && !isEnabled) {
button.classList.add('next-enabled');
}
if (!enable && isEnabled) {
button.classList.remove('next-enabled');
}
};
AccordionCard.isEnabled = function (button) {
return button.classList.contains('next-enabled');
};
AccordionCard.prototype.clear = function () {
this.status = false;
};
AccordionCard.prototype.hide = function () {
this.title.style.display = 'none';
this.content.style.display = 'none';
};
AccordionCard.prototype.show = function () {
this.title.style.display = 'block';
this.content.style.display = 'block';
};
AccordionCard.prototype.visible = function () {
return (this.title.style.display == 'block');
};
return AccordionCard;
}());
var LocationCard = (function (_super) {
__extends(LocationCard, _super);
function LocationCard(id, parentDiv, lang, langData, map, forcing, obs) {
var _this = this;
var locationDiv = STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, 'Specify time and location', parentDiv, locationDiv) || this;
var self = _this;
if (forcing)
self.forcingBoundary = new Forcing.Boundary(locationDiv, map, forcing);
var satCallbackFn = function (latlngs, geojsonfeature, timestamp, id) {
self.clear();
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
geojson["features"].push(geojsonfeature);
var observation = {
"id": id,
"provider": "EMSA",
"providerDataRef": null,
"providerImgRef": null,
"providerType": null,
"type": "SAT",
"date": moment.utc(timestamp).valueOf()
AccordionCard.prototype.fireChangeFn = function (changeCard) {
for (var i = 0; i < this.changeListeners.length; i++) {
var listener = this.changeListeners[i];
listener.changeFn(changeCard);
}
};
AccordionCard.prototype.addLabelDiv = function (parentDiv, labelTxt, labelInfo) {
var self = this;
var label = STWkit.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
label.textContent = labelTxt;
var addPositionInfo = STWkit.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function () {
AccordionCard.infoMsg(labelTxt, labelInfo);
};
geojson.features[0].properties["observation"] = [];
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
};
function legendBox(fieldset, color, text, size) {
var rowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
var legendBox = L.DomUtil.create('div', 'legend-box', rowDiv);
legendBox.style.backgroundColor = color;
legendBox.style.width = size;
legendBox.style.height = size;
legendBox.title = text;
var legendText = L.DomUtil.create('div', 'legend-text', rowDiv);
legendText.textContent = text;
}
if (obs && obs.sat) {
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = L.DomUtil.create('div', '', locationDiv);
var satDetectionList = L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
}
else {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
;
AccordionCard.infoMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'info', timeout: 10000 });
};
AccordionCard.warningMsg = function (title, msg) {
return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'warning', timeout: 10000 });
};
AccordionCard.enableNext = function (button, enable) {
var isEnabled = button.classList.contains('next-enabled');
if (enable && !isEnabled) {
button.classList.add('next-enabled');
}
if (!enable && isEnabled) {
button.classList.remove('next-enabled');
}
};
AccordionCard.isEnabled = function (button) {
return button.classList.contains('next-enabled');
};
AccordionCard.prototype.clear = function () {
this.status = false;
};
AccordionCard.prototype.hide = function () {
this.title.style.display = 'none';
this.content.style.display = 'none';
};
AccordionCard.prototype.show = function () {
this.title.style.display = 'block';
this.content.style.display = 'block';
};
AccordionCard.prototype.visible = function () {
return (this.title.style.display == 'block');
};
return AccordionCard;
}());
var LocationCard = (function (_super) {
__extends(LocationCard, _super);
function LocationCard(id, parentDiv, lang, langData, map, forcing, obs) {
var _this = this;
var locationDiv = STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, 'Specify time and location', parentDiv, locationDiv) || this;
var self = _this;
if (forcing)
self.forcingBoundary = new Forcing.Boundary(locationDiv, map, forcing);
var satCallbackFn = function (latlngs, geojsonfeature, timestamp, id) {
self.clear();
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
geojson["features"].push(geojsonfeature);
var observation = {
"id": id,
"provider": "EMSA",
"providerDataRef": null,
"providerImgRef": null,
"providerType": null,
"type": "SAT",
"date": moment.utc(timestamp).valueOf()
};
geojson.features[0].properties["observation"] = [];
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
function legendBox(fieldset, color, text, size) {
var rowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
var legendBox = L.DomUtil.create('div', 'legend-box', rowDiv);
legendBox.style.backgroundColor = color;
legendBox.style.width = size;
legendBox.style.height = size;
legendBox.title = text;
var legendText = L.DomUtil.create('div', 'legend-text', rowDiv);
legendText.textContent = text;
}
if (obs && obs.sat) {
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = L.DomUtil.create('div', '', locationDiv);
var satDetectionList = L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
}
else {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
_super.prototype.addLabelDiv.call(_this, satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-satdetection' target='_blank'>here</a>");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Past day', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Past week', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'Two weeks', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 204)', 'Older', '10px');
}
var obsform = L.DomUtil.create('form', 'uk-form uk-form-stacked', locationDiv);
obsform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
_super.prototype.addLabelDiv.call(_this, satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-satdetection' target='_blank'>here</a>");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Past day', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Past week', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'Two weeks', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 204)', 'Older', '10px');
}
var obsform = L.DomUtil.create('form', 'uk-form uk-form-stacked', locationDiv);
obsform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateLabelGrid = L.DomUtil.create('div', 'uk-grid', obsform);
var obsfieldset = L.DomUtil.create('fieldset', '', obsform);
var obsdateRowDiv = L.DomUtil.create('div', 'uk-form-row', obsfieldset);
_super.prototype.addLabelDiv.call(_this, obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-time' target='_blank'>here</a>");
var obsdateDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guideoo1';
var obsdateIcon = L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
var typeLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var objectlabelDiv = L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
_super.prototype.addLabelDiv.call(_this, objectlabelDiv, "Outlet type", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-type' target='_blank'>here</a>");
var typeDiv = L.DomUtil.create('div', '', obsform);
typeDiv.id = 'guidefo1';
typeDiv.setAttribute('data-uk-button-radio', '');
var typeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', typeDiv);
var objectbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', typeButtonGrid);
var objectButtonGroup = L.DomUtil.create('div', 'uk-button-group', objectbuttonsDiv);
self.pointButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.pointButton.textContent = 'Single';
self.lineButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.lineButton.textContent = 'Line';
self.lineButton.disabled = false;
self.polygonButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.polygonButton.textContent = 'Area';
self.pointButton.onclick = function () { self.geometryType = "point"; self.control.setType(self.geometryType); };
self.lineButton.onclick = function () { self.geometryType = "linestring"; self.control.setType(self.geometryType); };
self.polygonButton.onclick = function () { self.geometryType = "polygon"; self.control.setType(self.geometryType); };
self.polygonButton.disabled = false;
self.hasPosition = false;
function validate() {
var date = moment.utc(self.obsDateInput.value + ' ' + self.obsTimeInput.value, self.datetimeFormat);
if (!date.isValid())
return;
if (!self.hasPosition)
return;
self.status = true;
AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
;
var positionLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var positionlabelDiv = L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
_super.prototype.addLabelDiv.call(_this, positionlabelDiv, "Position", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-position' target='_blank'>here</a>");
var positionDiv = L.DomUtil.create('div', '', obsform);
positionDiv.id = 'guideoo2';
var positionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
var latlonDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
var drawDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
// var importDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-3', positionButtonGrid);
var latlngButton = L.DomUtil.create('button', 'uk-button uk-button-small', latlonDiv);
latlngButton.textContent = 'Enter manually';
var drawButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-align-right uk-margin-remove', drawDiv);
drawButton.textContent = 'Free hand draw';
// var importButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', importDiv);
// importButton.textContent = 'Import';
positionDiv.guideFn = function () {
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
var feature = {};
feature['type'] = "Feature";
feature['geometry'] = {};
feature['geometry']['type'] = "Point";
feature['geometry']['coordinates'] = [];
feature['geometry']['coordinates'].push(19.0);
feature['geometry']['coordinates'].push(56.0);
geojson["features"].push(feature);
self.control.addGeoJSON(geojson);
};
var bbox = {};
bbox['s'] = -90;
bbox['n'] = 90;
bbox['w'] = -180;
bbox['e'] = 180;
if (forcing)
bbox = forcing.features[0].properties.bbox;
self.control = new L.Control.Coordinates({
"lang": lang,
"langdata": langData.coordinates,
"id": id,
"inline": true,
"bbox": bbox,
"table": true,
"type": false,
"buttons": false,
"tabs": false,
"callback": function (latlngs, geojson) {
self.hasPosition = false;
if (latlngs.length > 0) {
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': true
});
window.dispatchEvent(toggleevt);
self.fireChangeFn(self);
if (self.exitControl)
map.removeControl(self.exitControl);
self.exitControl = null;
var coordinates = [];
switch (self.geometryType) {
case 'point':
coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat]);
break;
case 'multipoint':
coordinates = geojson.features[0].geometry.coordinates;
break;
case 'linestring':
var center = L.polyline(latlngs).getBounds().getCenter();
coordinates.push([center.lng, center.lat]);
break;
case 'polygon':
var center = L.polygon(latlngs).getBounds().getCenter();
coordinates.push([center.lng, center.lat]);
break;
default:
break;
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateLabelGrid = L.DomUtil.create('div', 'uk-grid', obsform);
var obsfieldset = L.DomUtil.create('fieldset', '', obsform);
var obsdateRowDiv = L.DomUtil.create('div', 'uk-form-row', obsfieldset);
_super.prototype.addLabelDiv.call(_this, obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-time' target='_blank'>here</a>");
var obsdateDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guideoo1';
var obsdateIcon = L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
var typeLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var objectlabelDiv = L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
_super.prototype.addLabelDiv.call(_this, objectlabelDiv, "Outlet type", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-type' target='_blank'>here</a>");
var typeDiv = L.DomUtil.create('div', '', obsform);
typeDiv.id = 'guidefo1';
typeDiv.setAttribute('data-uk-button-radio', '');
var typeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', typeDiv);
var objectbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', typeButtonGrid);
var objectButtonGroup = L.DomUtil.create('div', 'uk-button-group', objectbuttonsDiv);
self.pointButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.pointButton.textContent = 'Single';
self.lineButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.lineButton.textContent = 'Line';
self.lineButton.disabled = false;
self.polygonButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.polygonButton.textContent = 'Area';
self.pointButton.onclick = function () { self.geometryType = "point"; self.control.setType(self.geometryType); };
self.lineButton.onclick = function () { self.geometryType = "linestring"; self.control.setType(self.geometryType); };
self.polygonButton.onclick = function () { self.geometryType = "polygon"; self.control.setType(self.geometryType); };
self.polygonButton.disabled = false;
self.hasPosition = false;
function validate() {
var date = moment.utc(self.obsDateInput.value + ' ' + self.obsTimeInput.value, self.datetimeFormat);
if (!date.isValid())
return;
if (!self.hasPosition)
return;
self.status = true;
AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
;
var positionLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var positionlabelDiv = L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
_super.prototype.addLabelDiv.call(_this, positionlabelDiv, "Position", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-position' target='_blank'>here</a>");
var positionDiv = L.DomUtil.create('div', '', obsform);
positionDiv.id = 'guideoo2';
var positionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
var latlonDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
var drawDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
// var importDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-3', positionButtonGrid);
var latlngButton = L.DomUtil.create('button', 'uk-button uk-button-small', latlonDiv);
latlngButton.textContent = 'Enter manually';
var drawButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-align-right uk-margin-remove', drawDiv);
drawButton.textContent = 'Free hand draw';
// var importButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', importDiv);
// importButton.textContent = 'Import';
positionDiv.guideFn = function () {
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
var feature = {};
feature['type'] = "Feature";
feature['geometry'] = {};
feature['geometry']['type'] = "Point";
feature['geometry']['coordinates'] = [];
feature['geometry']['coordinates'].push(19.0);
feature['geometry']['coordinates'].push(56.0);
geojson["features"].push(feature);
self.control.addGeoJSON(geojson);
};
var bbox = {};
bbox['s'] = -90;
bbox['n'] = 90;
bbox['w'] = -180;
bbox['e'] = 180;
if (forcing)
bbox = forcing.features[0].properties.bbox;
self.control = new L.Control.Coordinates({
"lang": lang,
"langdata": langData.coordinates,
"id": id,
"inline": true,
"bbox": bbox,
"table": true,
"type": false,
"buttons": false,
"tabs": false,
"callback": function (latlngs, geojson) {
self.hasPosition = false;
if (latlngs.length > 0) {
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': true
});
window.dispatchEvent(toggleevt);
self.fireChangeFn(self);
if (self.exitControl)
map.removeControl(self.exitControl);
self.exitControl = null;
var coordinates = [];
switch (self.geometryType) {
case 'point':
coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat]);
break;
case 'multipoint':
coordinates = geojson.features[0].geometry.coordinates;
break;
case 'linestring':
var center = L.polyline(latlngs).getBounds().getCenter();
coordinates.push([center.lng, center.lat]);
break;
case 'polygon':
var center = L.polygon(latlngs).getBounds().getCenter();
coordinates.push([center.lng, center.lat]);