first

.gitignore

+**/node_modules/
+/bower_components/
\ No newline at end of file

.vscode/tasks.json

+{
+    // 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

+
+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-itracer-control" : {
+							"main" : [
+								"src/leaflet-itracer-cards.js", "src/leaflet-oilitracerobs-control.js" , "src/leaflet-itracer-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"
+        	  },						
+        	  "leaflet.label" : {
+        		  "main" : ["dist/leaflet.label-src.js","dist/leaflet.label.css"] 
+        	  },						
+        	  "leaflet-forcing-boundary" : {
+        		  "main" : ["dist/leaflet-forcing-boundary.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

+# leaflet-itracer-control
+
+
+## Description
+Creates Passive Tracer simulations with focus on instant/masstart input
+
+![](image.png)
+
+
+## Installation
+
+You will need node.js, npm and bower for demo
+
+### bower
+`bower install https://git.smhi.se/stw/leaflet-itracer-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 oilobsLangData = {
+		};
+
+        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 = {
+			"oilobs": oilobsLangData,
+			"coordinates" : coordinatesLangData
+		};
+
+
+
+		var itracer = new L.Control.InstantTracer({
+			"lang" : language,
+			"langdata" : langData
+		});
+		containerControl.addComponent("Instant Tracer, itracer);
+
+
+
+### Options
+
+## Copyright and License
+
+## Contact information
+
+Tomas Pettersson tomas.pettersson@smhi.se
+
+
+## Credits and acknowledgements
+
+
+## Known bugs
+
+## Troubleshooting
+
+## Changelog
+
+

bower.json

+{
+  "name": "leaflet-itracer-control",
+  "version": "0.0.1",
+  "homepage": "https://git.smhi.se/stw/leaflet-itracer-control",
+  "authors": [
+    "Tomas Pettersson <tomas.pettersson@smhi.se>"
+  ],
+  "description": "",
+  "main": [
+    "dist/leaflet-itracer-control.js",
+    "dist/leaflet-itracer-control.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@git.smhi.se:stw/leaflet-itracer-control.git"
+  },
+  "dependencies": {
+    "jquery": "latest",
+    "leaflet": "https://github.com/Leaflet/Leaflet.git#v1.0.3",
+    "uikit-stw": "https://git.smhi.se/stw/uikit-stw.git",
+    "reqwest": "latest",
+    "moment": "latest",
+    "ion.rangeSlider": "latest",
+    "stwkit": "https://git.smhi.se/stw/stwkit.git",
+    "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",
+    "intro.js": "^2.5.0"
+  },
+  "resolutions": {
+    "leaflet": "v1.0.3"
+  },
+  "devDependencies": {},
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ],
+  "moduleType": [
+    "es6"
+  ]
+}

demo/index.html

+<!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-oilobs-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-oilobs-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/stwkit/src/stwkit.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.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/intro.js/intro.js"></script>
+    <script src="../src/leaflet-oilobs-cards.js"></script>
+    <script src="../src/leaflet-oilobs-control.js"></script>
+    <script src="../src/leaflet-observation.js"></script>
+    <script src="../src/leaflet-observation-sat.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 oilobsLangData = {
+        };
+
+        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",
+            "tLongitude": "Longitude",
+            "tLongituderange": "rang",
+
+            "rDDM": "Degrees Decimal Minutes ",
+            "rDD": "Decimal Degrees",
+            "bAdd": "Add",
+            "bDel": "Del",
+            "bCreate": "Create",
+            "bEdit": "Edit",
+            "bCancel": "Cancel",
+
+            "cCoordinates": "Coordinates"
+        };
+
+        var langData = {
+            "oilobs": oilobsLangData,
+            "coordinates": coordinatesLangData
+        };
+
+        var forcing = {
+            "model": "NEMO",
+            "configuration": "NORDIC",
+            "domain": "NS02"
+        };        
+
+        var obs = {
+            "sat": true
+        };        
+
+        var domainname = "HELCOM";
+
+        reqwest({
+            url: "forcing/config"+STWkit.jsonToQueryString(forcing),
+            method: 'get',
+            type: 'json',
+            success: function (forcing) {
+                var ooproperties = {
+                    "domain" : domainname, 
+                    "lang": language,
+                    "langdata": langData
+                };
+                if (forcing.features.length > 0) ooproperties["forcing"] = forcing;
+                ooproperties["obs"] = obs;
+                var oilobs = new L.Control.OilObs(ooproperties);
+                containerControl.addComponent("Oil observation", oilobs);
+            }
+        });
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file

package.json

+{
+  "name": "leaflet-itracer-control",
+  "description": "Used for demo folder.",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "express": "4.x",
+    "path": "latest",
+    "body-parser": "latest",   
+    "utf8" : "latest",  
+    "request" : "latest",  
+    "moment" : "latest",
+    "@turf/within" : "latest"    
+  },
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-bower-concat": "^1.0.0",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^1.0.1",
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-wiredep": "^3.0.1"
+  }
+}

src/def/introJs.d.ts

+declare function introJs() : any;
\ No newline at end of file

src/def/ion.rangeSlider.d.ts

+// Type definitions for for Ion.RangeSlider 2.0.2
+// Project: https://github.com/IonDen/ion.rangeSlider/
+// Definitions by: Sixin Li <https://github.com/sixinli>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+// API documentation: http://ionden.com/a/plugins/ion.rangeSlider/en.html
+
+interface JQuery {
+    destroy(): void;
+    ionRangeSlider(): JQuery;
+    ionRangeSlider(options: IonRangeSliderOptions): JQuery;
+    reset(): void;
+    update(option: IonRangeSliderOptions): void;
+}
+
+interface IonRangeSliderOptions {
+    decorate_both?: boolean;
+    disable?: boolean;
+    drag_interval?: boolean;
+    force_edges?: boolean;
+    from?: number;
+    from_fixed?: boolean;
+    from_max?: number;
+    from_min?: number;
+    from_shadow?: boolean;
+    grid?: boolean;
+    grid_margin?: boolean;
+    grid_num?: number;
+    grid_snap?: boolean;
+    hide_from_to?: boolean;
+    hide_min_max?: boolean;
+    keyboard?: boolean;
+    keyboard_step?: number;
+    max?: number;
+    max_interval?: number;
+    max_postfix?: string;
+    min?: number;
+    min_interval?: number;
+    onChange?: (obj: IonRangeSliderEvent) => void;
+    onFinish?: (obj: IonRangeSliderEvent) => void;
+    onStart?: (obj: IonRangeSliderEvent) => void;
+    onUpdate?: (obj: IonRangeSliderEvent) => void;
+    postfix?: string;
+    prefix?: string;
+    prettify?: (num: number) => string;
+    prettify_enabled?: boolean;
+    prettify_separator?: string;
+    step?: number;
+    to?: number;
+    to_fixed?: boolean;
+    to_max?: number;
+    to_min?: number;
+    to_shadowed?: boolean;
+    type?: string;
+    values?: any[];
+    values_separator?: string;
+}
+
+interface IonRangeSliderEvent {
+    from: number;
+    from_precent: number;
+    from_value: any;
+    input: JQuery;
+    max: number;
+    min: number;
+    slider: JQuery;
+    to: number;
+    to_precent: number;
+    to_value: any;
+}

src/def/leaflet-forcing-boundary.d.ts

+
+declare namespace Forcing {
+  export var Boundary: any;  
+}

src/def/leaflet-markercluster.d.ts

+// Type definitions for Leaflet.markercluster v0.4.0
+// Project: https://github.com/Leaflet/Leaflet.markercluster
+// Definitions by: Robert Imig <https://github.com/rimig>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+
+declare namespace L {
+    export interface MarkerClusterGroupOptions {
+
+      /*
+      * When you mouse over a cluster it shows the bounds of its markers.
+      */
+      showCoverageOnHover?: boolean;
+
+      /*
+      * When you click a cluster we zoom to its bounds.
+      */
+      zoomToBoundsOnClick?: boolean;
+
+      /*
+      * When you click a cluster at the bottom zoom level we spiderfy it
+      * so you can see all of its markers.
+      */
+      spiderfyOnMaxZoom?: boolean;
+
+      /*
+      * Clusters and markers too far from the viewport are removed from the map
+      * for performance.
+      */
+      removeOutsideVisibleBounds?: boolean;
+
+      /*
+      * Smoothly split / merge cluster children when zooming and spiderfying.
+      * If L.DomUtil.TRANSITION is false, this option has no effect (no animation is possible).
+      */
+      animate?: boolean;
+
+      /*
+      * If set to true (and animate option is also true) then adding individual markers to the
+      * MarkerClusterGroup after it has been added to the map will add the marker and animate it
+      * into the cluster. Defaults to false as this gives better performance when bulk adding markers.
+      * addLayers does not support this, only addLayer with individual Markers.
+      */
+      animateAddingMarkers?: boolean;
+
+      /*
+      * If set, at this zoom level and below markers will not be clustered. This defaults to disabled.
+      */
+      disableClusteringAtZoom?: number;
+
+      /*
+      * The maximum radius that a cluster will cover from the central marker (in pixels). Default 80.
+      * Decreasing will make more, smaller clusters.
+      */
+      maxClusterRadius?: number;
+
+      /*
+      * Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster.
+      * Defaults to empty
+      */
+      polygonOptions?: PolylineOptions;
+
+      /*
+      * If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster.