Commit 4b8481df authored by Tomas Pettersson's avatar Tomas Pettersson 🏸

using seperate observation modules now

parent 5111dcc9
......@@ -42,7 +42,7 @@ module.exports = function(grunt) {
overrides : {
"leaflet-exercise-control" : {
"main" : [
"src/leaflet-exercise-cards.js", "src/leaflet-exercise-control.js" ,"src/leaflet-observation.js", "src/leaflet-observation-sat.js", "src/leaflet-exercise-control.css"
"src/leaflet-exercise-cards.js", "src/leaflet-exercise-control.js" , "src/leaflet-exercise-control.css"
]
},
"uikit-stw": {
......
......@@ -25,6 +25,7 @@
"leaflet-container-control": "https://git.smhi.se/stw/leaflet-container-control.git",
"leaflet-coordinates-control": "https://git.smhi.se/stw/leaflet-coordinates-control.git",
"leaflet-forcing-boundary": "https://git.smhi.se/stw/leaflet-forcing-boundary.git",
"leaflet-observation": "https://git.smhi.se/stw/leaflet-observation.git",
"intro.js": "^2.5.0"
},
"resolutions": {
......
......@@ -61,11 +61,10 @@
<script src="../bower_components/leaflet.draw/dist/leaflet.draw.js"></script>
<script src="../bower_components/leaflet-coordinates-control/dist/leaflet-coordinates-control.js"></script>
<script src="../bower_components/leaflet-forcing-boundary/dist/leaflet-forcing-boundary.js"></script>
<script src="../bower_components/leaflet-observation/dist/leaflet-observation.js"></script>
<script src="../bower_components/intro.js/intro.js"></script>
<script src="../src/leaflet-exercise-cards.js"></script>
<script src="../src/leaflet-exercise-control.js"></script>
<script src="../src/leaflet-observation.js"></script>
<script src="../src/leaflet-observation-sat.js"></script>
<!-- endbower -->
<script>
......
.exercise-control .chevron-title {
border: 1px solid #ddd;
border-radius: 0px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
margin-bottom: 2px;
}
.exercise-control .uk-button.uk-active {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
background-color: #ddd;
font-weight: 600;
}
.exercise-control .irs-from {
background-color: #ddd;
color: black;
}
.exercise-control .irs-to {
background-color: #ddd;
color: black;
}
.exercise-control .irs-slider.from {
display: none;
}
.exercise-control .irs-slider.to {
display: none;
}
.exercise-control .next-enabled {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
background-color: #8cc14c;
color: #fff;
}
.exercise-control .irs-disabled {
opacity: 1;
}
.exercise-control .uk-dropdown-small {
min-width: 100px
}
.exercise-control .uk-autocomplete {
width: 100px
}
.exercise-control .form-label {
display: inline-block;
padding-right: 5px;
}
.exercise-control .badge-neutral {
background: lightgray;
}
.exercise-control .percentage {
width: 65px;
}
.exercise-control .title {
padding-left: 5px;
}
.exercise-control .chevron-icon {
float: right;
margin-top: 4px;
margin-right: 3px;
}
.exercise-control .select {
display: inline-block;
margin-left: 3px;
}
.exercise-control .acc-content {
padding-top: 0px;
padding-bottom: 15px;
}
.introjs-helperLayer {
background-color: rgba(255,255,255,0);
}
.introjs-prevbutton {
display: none;
}
.exercise-control .legend-text {
display: inline-block;
position: relative;
left: 5px;
}
.exercise-control .legend-box {
display: inline-block;
top: 1px;
position: relative;
}
This diff is collapsed.
......@@ -3,7 +3,6 @@
/// <reference path="def/moment.d.ts" />
/// <reference path="def/leaflet-forcing-boundary.d.ts" />
/// <reference path="def/reqwest.d.ts" />
/// <reference path="leaflet-observation-sat.ts" />
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
......@@ -49,6 +48,7 @@ var EXLocation = (function (_super) {
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
satdetectionHide();
};
function legendBox(fieldset, color, text, size) {
var rowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
......@@ -71,20 +71,30 @@ var EXLocation = (function (_super) {
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) {
var satdetectionShow = function () {
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 {
};
var satdetectionHide = function () {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-up')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
};
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
satdetectionShow();
}
else {
satdetectionHide();
}
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
......
This diff is collapsed.
......@@ -3,7 +3,6 @@
/// <reference path="def/moment.d.ts" />
/// <reference path="def/leaflet-forcing-boundary.d.ts" />
/// <reference path="def/reqwest.d.ts" />
/// <reference path="leaflet-observation-sat.ts" />
class EXLocation extends STWkit.LocationCard {
......@@ -47,6 +46,7 @@ class EXLocation extends STWkit.LocationCard {
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
satdetectionHide();
};
function legendBox(fieldset: HTMLFieldSetElement, color, text, size) {
......@@ -71,18 +71,29 @@ class EXLocation extends STWkit.LocationCard {
self.satDetectionChevronIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = <HTMLDivElement>L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
var satdetectionShow = function() {
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 {
}
}
var satdetectionHide = function() {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-up')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
}
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down'))
satdetectionShow();
else
satdetectionHide();
};
var satDetectionform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
......
/// <reference path="def/leaflet-observation.d.ts" />
var Observation;
(function (Observation) {
var Sat = (function () {
function Sat(map, callbackFn, url) {
var self = this;
this.map = map;
this.containerLayer = new L.LayerGroup();
map.addLayer(this.containerLayer);
this.zoomLayer = L.observation({ type: 'zoom' });
this.zoomLayer.on('click', function (evt) {
map.setView(evt.layer.getLatLng(), 12);
});
var label = '{gml_id}<hr />';
label += '<table id="LabelDataTable" display=block width="200" cellpadding="0" cellspacing="0">';
label += '<tr><td>Provider:</td><td>{provider}</td></tr><tr><td>Time:</td><td>{timeStampTxt}</td></tr>';
label += '</table>';
this.polygonLayer = L.observation({ type: 'polygon', label: label });
this.polygonLayer.on('click', function (evt) {
if (callbackFn && map.getZoom() > 9)
callbackFn(evt.layer.getLatLngs(), evt.layer.toGeoJSON(), evt.layer.observation.properties.timeStamp, evt.layer.observation.properties.gml_id);
});
map.on('zoomend', function () {
if (map.getZoom() > 9 && self.containerLayer.hasLayer(self.zoomLayer)) {
self.containerLayer.removeLayer(self.zoomLayer);
}
if (map.getZoom() <= 9 && self.containerLayer.hasLayer(self.zoomLayer) == false) {
self.containerLayer.addLayer(self.zoomLayer);
}
});
if (typeof url != 'undefined') {
this.pointUrl = url + '/point';
this.polygonUrl = url + '/polygon';
}
;
}
Sat.prototype.hide = function () {
var self = this;
self.zoomLayer.clearLayers();
self.polygonLayer.clearLayers();
};
Sat.prototype.show = function () {
var self = this;
self.zoomLayer.clearLayers();
self.polygonLayer.clearLayers();
reqwest({
url: self.pointUrl || 'point.geojson',
method: 'get',
type: 'json',
success: function (geojson) {
self.zoomLayer.addLayers(geojson.features);
if (self.map.getZoom() <= 9)
self.containerLayer.addLayer(self.zoomLayer);
}
});
reqwest({
url: self.polygonUrl || 'polygon.geojson',
method: 'get',
type: 'json',
success: function (geojson) {
for (var k in geojson.features) {
var timeStamp = geojson.features[k].properties.timeStamp;
geojson.features[k].properties.timeStampTxt = timeStamp.substr(0, 10) + ' ' + timeStamp.substr(11, 5);
}
self.containerLayer.addLayer(self.polygonLayer.addLayers(geojson.features, "Satellite detection - EMSA"));
}
});
};
return Sat;
}());
Observation.Sat = Sat;
})(Observation || (Observation = {}));
//# sourceMappingURL=leaflet-observation-sat.js.map
\ No newline at end of file
{"version":3,"file":"leaflet-observation-sat.js","sourceRoot":"","sources":["leaflet-observation-sat.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
/// <reference path="def/leaflet-observation.d.ts" />
module Observation {
export class Sat {
private map : L.Map;
private containerLayer : L.LayerGroup<L.ILayer>;
private zoomLayer : L.Observation;
private polygonLayer : L.Observation;
private pointUrl : string;
private polygonUrl : string;
constructor(map: L.Map, callbackFn: Function, url: string) {
var self = this;
this.map = map;
this.containerLayer = new L.LayerGroup();
map.addLayer(this.containerLayer);
this.zoomLayer = L.observation({type: 'zoom'});
this.zoomLayer.on('click', function (evt:any) {
map.setView(evt.layer.getLatLng(), 12);
});
var label ='{gml_id}<hr />';
label += '<table id="LabelDataTable" display=block width="200" cellpadding="0" cellspacing="0">';
label += '<tr><td>Provider:</td><td>{provider}</td></tr><tr><td>Time:</td><td>{timeStampTxt}</td></tr>';
label += '</table>';
this.polygonLayer = L.observation({type: 'polygon', label: label});
this.polygonLayer.on('click', function (evt:any) {
if (callbackFn && map.getZoom() > 9) callbackFn(evt.layer.getLatLngs(), evt.layer.toGeoJSON(), evt.layer.observation.properties.timeStamp, evt.layer.observation.properties.gml_id);
});
map.on('zoomend', function () {
if (map.getZoom() > 9 && self.containerLayer.hasLayer(self.zoomLayer)) {
self.containerLayer.removeLayer(self.zoomLayer);
}
if (map.getZoom() <= 9 && self.containerLayer.hasLayer(self.zoomLayer) == false) {
self.containerLayer.addLayer(self.zoomLayer);
}
});
if (typeof url != 'undefined') {
this.pointUrl = url+'/point';
this.polygonUrl = url+'/polygon';
};
}
public hide() {
var self = this;
self.zoomLayer.clearLayers();
self.polygonLayer.clearLayers();
}
public show() {
var self = this;
self.zoomLayer.clearLayers();
self.polygonLayer.clearLayers();
reqwest({
url: self.pointUrl || 'point.geojson',
method: 'get',
type: 'json',
success: function (geojson) {
self.zoomLayer.addLayers(geojson.features);
if (self.map.getZoom() <= 9) self.containerLayer.addLayer(self.zoomLayer);
}
});
reqwest({
url: self.polygonUrl || 'polygon.geojson',
method: 'get',
type: 'json',
success: function (geojson) {
for (var k in geojson.features) {
var timeStamp:string = geojson.features[k].properties.timeStamp;
geojson.features[k].properties.timeStampTxt = timeStamp.substr(0,10)+' '+timeStamp.substr(11,5);
}
self.containerLayer.addLayer(self.polygonLayer.addLayers(geojson.features, "Satellite detection - EMSA"));
}
});
}
}
}
\ No newline at end of file
L.Observation = L.FeatureGroup.extend({
options: {
type: 'zoom',
label : '<label not set>',
},
initialize: function (options) {
L.setOptions(this, options);
L.FeatureGroup.prototype.initialize.call(this, null);
},
addLayers: function (observations, provider) {
if (observations) {
for (var i = 0, len = observations.length; i < len; i++) {
this.addLayer(observations[i], provider);
}
}
return this;
},
addLayer: function (observation, provider) {
if (this.options.type == 'zoom') {
if (observation.geometry.type == 'Point') {
L.FeatureGroup.prototype.addLayer.call(this, this.createZoomMarker(observation));
}
}
if (this.options.type == 'polygon') {
if (observation.geometry.type !== 'Point') {
L.FeatureGroup.prototype.addLayer.call(this, this.createPolygon(observation, provider));
}
}
},
getStyle: function(observation){
var timestamp = observation.properties.timeStamp;
var now = new Date();
var d = timestamp;
var dateObj = new Date(d.substr(0, 4), (parseInt(d.substr(5, 2)) - 1), d.substr(8, 2), d.substr(11, 2), d.substr(14, 2), d.substr(18, 2));
var diff = now.getTime() - dateObj.getTime();
var oneday = 3600 * 1000 * 24;
var yesterday = oneday * 2;
var twodaysago = oneday * 3;
//If older then 2 weeks, do not display on screen
var opacity = 1;
if (diff > (oneday*14)) {
opacity = 0.8;
}
var col = '#FFFFFF';
//within a day
if (diff < oneday) {
col = '#FF0000';
} else if (diff > oneday && diff <= yesterday) {
col = '#FF9900';
} else if (diff > yesterday && diff <= twodaysago) {
col = '#FFFF00';
}
var style = {
color: col,
radius: 10,
weight: 2,
opacity: opacity
};
return style;
},
createZoomMarker: function (observation) {
var marker = L.circleMarker([observation.geometry.coordinates[1],observation.geometry.coordinates[0]], this.getStyle(observation));
marker.observation = observation;
return marker;
},
createPolygon: function (observation, provider) {
var layer = L.GeoJSON.geometryToLayer(observation);
if (provider) {
observation.properties.provider = provider;
}
layer.bindTooltip(L.Util.template(this.options.label, observation.properties), { 'noHide': true });
layer.setStyle(this.getStyle(observation));
layer.observation = observation;
return layer;
}
});
L.observation = function (observations, options) {
return new L.Observation(observations, options);
};
......@@ -6,8 +6,8 @@
},
"files": [
"src/leaflet-exercise-control.ts",
"src/leaflet-exercise-cards.ts",
"src/leaflet-observation-sat.ts"
"src/leaflet-exercise-cards.ts"
],
"exclude": [
"node_modules",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment