Skip to content

GitLab

L
leaflet-oilspill-control
Commit 20c24ca6 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files
Options

first

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 855 additions and 0 deletions
.gitignore 0 → 100644
View file @ 20c24ca6
**/node_modules/
/bower_components/
\ No newline at end of file
.vscode/tasks.json 0 → 100644
View file @ 20c24ca6
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
\ No newline at end of file
Gruntfile.js 0 → 100644
View file @ 20c24ca6
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
sourceMap: true,
sourceMapName: 'dist/<%= pkg.name %>.map'
},
src: 'dist/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
},
concat: {
dist: {
files: {
'dist/<%= pkg.name %>.js': 'src/*.js',
'dist/<%= pkg.name %>.css': 'src/*.css',
}
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
dist: {
files: {
'dist/<%= pkg.name %>.min.css': 'dist/<%= pkg.name %>.css'
}
}
},
wiredep: {
demo: {
includeSelf: true,
src: ['demo/index.html'],
overrides : {
"leaflet-oilspill-control" : {
"main" : [
"src/leaflet-oilspill-cards.js", "src/leaflet-oilspill-control.js" , "src/leaflet-oilspill-control.css"
]
},
"uikit-stw": {
"main" : [
"js/uikit.js", "js/components/notify.min.js",'js/components/datepicker.min.js','js/components/timepicker.min.js','js/components/autocomplete.min.js','js/components/accordion.min.js',
"css/uikit.almost-flat.min.css", "css/components/notify.almost-flat.min.css",'css/components/datepicker.almost-flat.min.css', 'css/components/autocomplete.almost-flat.min.css', 'css/components/accordion.almost-flat.min.css'
]
},
"ion.rangeSlider": {
"main" : ["js/ion.rangeSlider.min.js", "css/ion.rangeSlider.css", "css/ion.rangeSlider.skinNice.css" ]
},
"jquery-file-upload": {
"main" : ["js/vendor/jquery.ui.widget.js", "js/jquery.iframe-transport.js", "js/jquery.fileupload.js" ]
},
"DataTables" : {
"main" : ["media/js/jquery.dataTables.min.js", "media/js/dataTables.uikit.min.js", "media/css/jquery.dataTables.min.css", "media/css/dataTables.uikit.min.css"]
},
"jquery.inputmask" : {
"main" : "dist/jquery.inputmask.bundle.js"
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-bower-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-wiredep');
grunt.registerTask('default', ['concat:dist']);
};
README.md 0 → 100644
View file @ 20c24ca6
# leaflet-oilspill-control
## Description
Creates oil spill simulations
![](image.png)
## Installation
You will need node.js, npm and bower for demo
### bower
`bower install https://git.smhi.se/stw/leaflet-oilspill-control.git --save`
## Demo
Go to demo folder and install package.json
> npm install
Start server in demo folder
> node server.js
Server started on http://localhost:8080...
Open browser on http://localhost:8080/demo
## Usage example
var map = L.map('map').setView([ 58.5, 19.0 ], 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
}).addTo(map);
var containerControl = new L.Control.Container({
position: 'topright',
collapse: true
});
map.addControl(containerControl);
var language = 'en';
var oilspillLangData = {
};
var oilspill = new L.Control.OilSpill({
"lang" : language,
"langdata" : oilspillLangData
});
containerControl.addComponent("Oil spill", oilspill);
### Options
## Copyright and License
## Contact information
Tomas Pettersson tomas.pettersson@smhi.se
## Credits and acknowledgements
## Known bugs
## Troubleshooting
## Changelog
bower.json 0 → 100644
View file @ 20c24ca6
{
"name": "leaflet-oilspill-control",
"version": "0.0.1",
"homepage": "https://git.smhi.se/stw/leaflet-oilspill-control",
"authors": [
"Tomas Pettersson <tomas.pettersson@smhi.se>"
],
"description": "Creates floating object simulations",
"main": [
"dist/leaflet-oilspill-control.js",
"dist/leaflet-oilspill-control.css"
],
"repository": {
"type": "git",
"url": "git@git.smhi.se:stw/leaflet-oilspill-control.git"
},
"dependencies": {
"jquery": "latest",
"leaflet": "https://github.com/Leaflet/Leaflet.git#v1.0.0-rc.1",
"uikit-stw": "https://git.smhi.se/stw/uikit-stw.git",
"reqwest": "latest",
"moment": "latest",
"ion.rangeSlider": "latest",
"leaflet-container-control": "https://git.smhi.se/stw/leaflet-container-control.git",
"leaflet-coordinates-control": "https://git.smhi.se/stw/leaflet-coordinates-control.git",
"intro.js": "^2.5.0"
},
"resolutions": {
"leaflet": "v1.0.0-rc.1"
},
"devDependencies": {},
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"moduleType": [
"es6"
]
}
demo/index.html 0 → 100644
View file @ 20c24ca6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" style="font-size: 100%">
<head>
<title>leaflet-oilspill-control - Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv='x-dns-prefetch-control' content='on'>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name='copyright' content='STW'>
<meta name='owner' content='STW'>
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/uikit.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/notify.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/datepicker.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/autocomplete.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/uikit-stw/css/components/accordion.almost-flat.min.css" />
<link rel="stylesheet" href="../bower_components/ion.rangeSlider/css/ion.rangeSlider.css" />
<link rel="stylesheet" href="../bower_components/ion.rangeSlider/css/ion.rangeSlider.skinNice.css" />
<link rel="stylesheet" href="../bower_components/leaflet-container-control/dist/leaflet-container-control.css" />
<link rel="stylesheet" href="../bower_components/DataTables/media/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="../bower_components/DataTables/media/css/dataTables.uikit.min.css" />
<link rel="stylesheet" href="../bower_components/datatables.net-select-dt/css/select.dataTables.css" />
<link rel="stylesheet" href="../bower_components/leaflet.draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="../bower_components/leaflet-coordinates-control/dist/leaflet-coordinates-control.css" />
<link rel="stylesheet" href="../bower_components/intro.js/introjs.css" />
<link rel="stylesheet" href="../src/leaflet-oilspill-control.css" />
<!-- endbower -->
</head>
<body>
<div id="map" style="position:absolute; top:0; bottom:0; left:0;right:0"></div>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="../bower_components/uikit-stw/js/uikit.js"></script>
<script src="../bower_components/uikit-stw/js/components/notify.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/datepicker.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/timepicker.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/autocomplete.min.js"></script>
<script src="../bower_components/uikit-stw/js/components/accordion.min.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<script src="../bower_components/leaflet-container-control/dist/leaflet-container-control.js"></script>
<script src="../bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script>
<script src="../bower_components/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="../bower_components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="../bower_components/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/DataTables/media/js/dataTables.uikit.min.js"></script>
<script src="../bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="../bower_components/datatables.net-select/js/dataTables.select.js"></script>
<script src="../bower_components/leaflet.draw/dist/leaflet.draw-src.js"></script>
<script src="../bower_components/leaflet-coordinates-control/dist/leaflet-coordinates-control.js"></script>
<script src="../bower_components/intro.js/intro.js"></script>
<script src="../src/leaflet-oilspill-cards.js"></script>
<script src="../src/leaflet-oilspill-control.js"></script>
<!-- endbower -->
<script>
var map = L.map('map').setView([ 58.5, 19.0 ], 5);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
}).addTo(map);
var containerControl = new L.Control.Container({
position: 'topright',
collapse: true
});
map.addControl(containerControl);
var language = 'en';
var oilspillLangData = {
};
var coordinatesLangData = {
"tMarkerstart": "Click map to place point.",
"tPolygonstart": "Hold left mouse button to draw polygon on map.",
"tPolygoncont": "Hold left mouse button to draw polygon on map. Release button to finnish drawing.",
"tPolygonend": "Release button to finnish drawing.",
"tPolylinestart": "Hold left mouse button to draw line on map.",
"tPolylinecont": "Hold left mouse button to draw line on map. Release button to finnish drawing.",
"tPolylineend": "Release button to finnish drawing.",
"tDraw": "Draw outlet on map. Use LEFT mouse button while drawing.",
"tEdit": "Edit outlet shape",
"tManual": "Enter coordinates manually",
"tImport": "Import outlet as geojson file",
"tClear": "Clear drawn shapes from map",
"bManual": "Enter coordinates manually",
"bDraw": "Free hand draw on map",
"bImport": "Import GeoJson file",
"bClear": "Clear map",
"btClear": "Clear",
"sAreaPoint": "Point",
"sAreaPolyline": "Polyline",
"sAreaPolygon": "Polygon",
"sAreaMultiPoint": "MultiPoint",
"sAreaMultiPolyline": "MultiPolyline",
"sAreaMultiPolygon": "MultiPolygon",
"tArea": "Select outlet type",
"tLatitude": "Latitude",
"tLatituderange": "range [-90 to 90]",
"tLongitude": "Longitude",
"tLongituderange": "range [-180 to 180]",
"rDDM": "Degrees Decimal Minutes ",
"rDD": "Decimal Degrees",
"bAdd": "Add",
"bDel": "Del",
"bCreate": "Create",
"bEdit": "Edit",
"bCancel": "Cancel",
"cCoordinates": "Coordinates"
};
var langData = {
"oilspill": oilspillLangData,
"coordinates" : coordinatesLangData
};
var oilspill = new L.Control.OilSpill({
"lang" : language,
"langdata" : langData
});
containerControl.addComponent("Oil spill", oilspill);
function getURLParams(param) {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
var urlParams = [];
while (match = search.exec(query)) {
if (param == decode(match[1])) {
urlParams.push();
urlParams[urlParams.length] = decode(match[2]);
} else {
urlParams.push();
urlParams[urlParams.length] = [decode(match[1]), decode(match[2])];
}
}
return urlParams;
};
// // Test card:populateData event.
// reqwest({
// url: "input",
// method: 'get',
// type: 'json',
// success: function (inputjson) {
// var cardevt = document.createEvent("CustomEvent");
// cardevt.initCustomEvent('card:populateData', false, false, {
// 'geojson' : inputjson
// });
// window.dispatchEvent(cardevt);
// }
// });
</script>
</body>
</html>
demo/server.js 0 → 100644
View file @ 20c24ca6
var express = require('express');
var path = require('path');
var request = require('request');
var bodyParser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.get('/demo/input', function (req, res) {
res.send(
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"uuid": "785b50c5-4804-462d-8a24-1dc2c9fd14f8",
"type": "object",
"subtype": "floatingbuoy",
"meanLng": 20.214843749999996,
"meanLat": 58.95000823335702,
"simulation": {
"startDate": 1491225300000,
"stopDate": 1491398100000,
"mode": "Normal",
"forecast": "NEMO",
"forwardCalculation": true,
"amount": "100.0",
"amountUnit": "m3",
"oilclass": "Floating object / Algae",
"substance": "Floating object, file",
"fresh": false,
"instantaneous": true,
"uncertainty": false,
"winddrag": "0",
"depth": "0",
"duration": "",
"durationUnit": ""
},
"observation": [],
"status": "COMPLETE",
"timestamp": 1491225478000,
"period": "2 days 0 hrs ",
"since": "53 secs "
},
"geometry": {
"type": "Point",
"coordinates": [20.214843749999996, 58.95000823335702]
}
}]
}
);
});
app.get('/demo/availableTimes/ms/HELCOM_NEMO', function (req, res) {
res.send(
{"availableTime":{"start":1491094800000,"stop":1492124400000},"missingTime":[]}
);
});
app.post('/demo/startos', function (req, res) {
var result = {};
result["id"] = "uuid";
res.send(result);
});
app.get('/demo/guide/os',
function (req, res) {
res.send(
{
steps: [
{
intro: "This guide will take you through the steps needed to start an Floating object simulation."
},
{
element: '#guideos1',
intro: "These buttons specify what type of Object you are using. We will use a single object.",
position: 'left'
},
{
element: '#guideos2',
intro: "You can either enter position manually or draw by hand. We entered it manually",
position: 'left'
},
{
element: '#guideos3',
intro: 'Location has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'Here we specify a simulation period.'
},
{
element: '#guideos4',
intro: "Duration in hours. Default is 48 hours.",
position: 'left'
},
{
element: '#guideos5',
intro: "Simulation direction is forward (forecast) or backward (hindcast).",
position: 'left'
},
{
element: '#guideos6',
intro: 'Simulation period has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'We specify a wind factor.'
},
{
element: '#guideos7',
intro: 'Wind factor is specified in percentage.',
position: 'left'
},
{
element: '#guideos8',
intro: 'We are ready to move on.',
position: 'left'
},
{
intro: 'We can now start the simulation.'
}
],
overlayOpacity : 0,
exitOnOverlayClick: false,
disableInteraction: false,
showBullets: false,
scrollToElement: false
}
);
});
app.use('/bower_components', express.static(path.join(__dirname, '../bower_components')));
app.use('/src', express.static(path.join(__dirname, '../src')));
app.use('/dist', express.static(path.join(__dirname, '../dist')));
app.use('/demo', express.static(__dirname));
app.listen(8080);
console.log('Server started on http://localhost:8080...');
\ No newline at end of file
dist/leaflet-oilspill-control.css 0 → 100644
View file @ 20c24ca6
.oilspill-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;
}
.oilspill-control .uk-button.uk-active {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
background-color: #ddd;
font-weight: 600;
}
.oilspill-control .irs-from {
background-color: #ddd;
color: black;
}
.oilspill-control .irs-to {
background-color: #ddd;
color: black;
}
.oilspill-control .irs-slider.from {
display: none;
}
.oilspill-control .irs-slider.to {
display: none;
}
.oilspill-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;
}
.oilspill-control .irs-disabled {
opacity: 1;
}
.oilspill-control .uk-dropdown-small {
min-width: 100px
}
.oilspill-control .uk-autocomplete {
width: 100px
}
.oilspill-control .form-label {
display: inline-block;
padding-right: 5px;
}
.oilspill-control .badge-neutral {
background: lightgray;
}
.oilspill-control .percentage {
width: 65px;
}
.oilspill-control .title {
padding-left: 5px;
}
.oilspill-control .chevron-icon {
float: right;
margin-top: 4px;
margin-right: 3px;
}
.oilspill-control .acc-content {
padding-top: 0px;
padding-bottom: 15px;
}
.introjs-helperLayer {
background-color: rgba(255,255,255,0);
}
.introjs-prevbutton {
display: none;
}
\ No newline at end of file
dist/leaflet-oilspill-control.js 0 → 100644
View file @ 20c24ca6
This diff is collapsed.
image.png 0 → 100644
View file @ 20c24ca6
image.png

104 KB

package.json 0 → 100644
View file @ 20c24ca6
{
"name": "leaflet-oilspill-control",
"description": "Used for demo folder.",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "4.x",
"path": "latest",