feat: leaflet und leaflet-locationpicker hinzufügen

2024-10-21 18:10:45 +02:00
parent 8a0fe70a88
commit 173b691e56
23 changed files with 11178 additions and 0 deletions
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/Gruntfile.js
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/Gruntfile.js
@@ -0,0 +1,142 @@
+'use strict';
+
+module.exports = function(grunt) {
+
+grunt.loadNpmTasks('grunt-contrib-clean');
+grunt.loadNpmTasks('grunt-contrib-jshint');
+grunt.loadNpmTasks('grunt-contrib-watch');
+grunt.loadNpmTasks('grunt-contrib-concat');
+grunt.loadNpmTasks('grunt-contrib-uglify');
+grunt.loadNpmTasks('grunt-markdown');
+
+grunt.initConfig({
+	pkg: grunt.file.readJSON('package.json'),
+	meta: {
+		banner:
+		'/* \n'+
+		' * Leaflet Location Picker v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n'+
+		' * \n'+
+		' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> \n'+
+		' * <%= pkg.author.email %> \n'+
+		' * <%= pkg.author.url %> \n'+
+		' * \n'+
+		' * Licensed under the <%= pkg.license %> license. \n'+
+		' * \n'+
+		' * Demo: \n'+
+		' * <%= pkg.homepage %> \n'+
+		' * \n'+
+		' * Source: \n'+
+		' * <%= pkg.repository.url %> \n'+
+		' * \n'+
+		' */\n',
+		features: [
+			"Custom location format, lat,lon separator and precision",
+			"Pick Location Latidute,Longitude clicking on map",
+			"Bind multiple events or single picker callback",
+			"Load picker map from preselected location",
+			"Bind callback on location picked",
+			"Enable disable location marker",			
+			"Custom map baselayer"			
+		],
+		sources: [
+			{name: "Github.com", url: 'https://github.com/stefanocudini/<%= pkg.name %>' },
+			{name: "Node Packaged Module", url: 'https://npmjs.org/package/<%= pkg.name %>' },
+			//{name: "Bitbuket", url: 'https://bitbucket.org/zakis_/<%= pkg.name %>' },
+			//{name: "Atmosphere", url: 'http://atmospherejs.com/package/<%= pkg.name %>' }
+		]
+	},	
+	clean: {
+		homepage: {
+			src: ['index.html']
+		},
+		dist: {
+			src: ['dist/*']
+		}		
+	},
+	jshint: {
+		options: {
+			globals: {
+				console: true,
+				module: true
+			},
+			"-W099": true,	//ignora tabs e space warning
+			"-W033": true,
+			"-W044": true	//ignore regexp
+		},
+		files: "src/<%= pkg.name %>.js"
+	},
+	concat: {
+		//TODO cut out SearchMarker
+		options: {
+			banner: '<%= meta.banner %>'
+		},
+		dist: {
+			files: {
+				'dist/<%= pkg.name %>.src.js': ['src/<%= pkg.name %>.js'],
+				'dist/<%= pkg.name %>.src.css': ['src/<%= pkg.name %>.css']
+			}
+		}
+	},
+	uglify: {
+		options: {
+			banner: '<%= meta.banner %>'
+		},
+		dist: {
+			files: {
+				'dist/<%= pkg.name %>.min.js': ['dist/<%= pkg.name %>.src.js']
+			}
+		}
+	},
+	markdown: {
+		readme: {
+			files: {
+				'index.html': ['README.md']
+			},
+			options: {
+				template: 'index.tmpl',
+				templateContext: function() {
+					var cfg = grunt.config();
+					
+					cfg.title = cfg.pkg.name.replace(/-/g,' ');
+					
+					cfg.ribbonurl = 'http://ghbtns.com/github-btn.html?user=stefanocudini&amp;repo='+cfg.pkg.name+'&amp;type=watch&amp;count=true';				
+					
+					cfg.examples = grunt.file.expand('examples/*.html');
+
+					cfg.features = cfg.meta.features;
+					cfg.sources = cfg.meta.sources;
+					cfg.giturl = cfg.meta.sources[0].url;
+					
+					cfg.image = grunt.file.expand('images/'+cfg.pkg.name+'.png');
+					
+					return cfg;
+				},
+				markdownOptions: {
+					gfm: true,
+					highlight: 'manual',
+					codeLines: {
+						before: '<div>',
+						after: '</div>'
+					}
+				}
+			}			
+		}
+	},
+	watch: {
+		dist: {
+			options: { livereload: true },
+			files: ['src/*'],
+			tasks: ['clean','concat','jshint']
+		}		
+	}	
+});
+
+grunt.registerTask('default', [
+	'clean',
+	'concat',
+	'jshint',
+	'uglify',
+	'markdown'
+]);
+
+};
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/LICENSE
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/LICENSE
@@ -0,0 +1,23 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Duy Anh Nguyen
+Copyright (c) 2015 Josef Kufner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/README.md
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/README.md
@@ -0,0 +1,68 @@
+Leaflet Location Picker
+============
+
+[![npm version](https://badge.fury.io/js/leaflet-locationpicker.svg)](http://badge.fury.io/js/leaflet-locationpicker)
+
+Simple location picker with Leaflet map
+
+# Usage:
+
+```html
+
+<label>Insert a Geo Location 
+	<input id="geoloc" type="text" value="" />
+</label>
+
+```
+
+```javascript
+
+$('#geoloc').leafletLocationPicker();
+
+```
+
+# Examples:
+
+* [Simple](examples/simple.html)
+
+
+![Image](https://raw.githubusercontent.com/stefanocudini/leaflet-locationpicker/master/images/leaflet-locationpicker.png)
+
+# Options
+| Option	  | Default  | Description                       |
+| --------------- | ---------------- | ----------------------------------------- |
+|className        | baseClassName    |css classname applied to widget |
+|location         | optsMap.center   | initial map center |
+|locationFormat   | '{lat}{sep}{lng}'| returne format of location value |
+|locationMarker   | true             | render manker on map |
+|locationDigits   | 6                | coordinates precision |
+|locationSep      | ','              | coordinates separator|
+|position         | 'topright'       | position relative to input|
+|layer            | 'OSM'            | base layer on map|
+|height           | 140              | height of map |
+|width            | 200              | with f map|
+|event            | 'click'          | event to fire location pick|
+|cursorSize       | '30px'           | size of 	cross cursor |
+|map              | optsMap          | custom [leflet map options](https://leafletjs.com/reference-1.6.0.html#map-option) |
+|onChangeLocation | $.noop           | callback retuned location after pick from map|
+|alwaysOpen       | false            | always open Maps (without close button) |
+|mapContainer     | ""               ||
+
+# Install
+```
+npm install --save leaflet-locationpicker
+
+```
+
+# Build
+
+Therefore the deployment require **npm** installed in your system.
+```bash
+npm install
+grunt
+```
+
+# Source
+
+* [Github](https://github.com/stefanocudini/leaflet-locationpicker)
+* [NPM](https://npmjs.org/package/leaflet-locationpicker)
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.min.js
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.min.js
@@ -0,0 +1,17 @@
+/* 
+ * Leaflet Location Picker v0.3.4 - 2022-11-18 
+ * 
+ * Copyright 2022 Stefano Cudini 
+ * stefano.cudini@gmail.com 
+ * https://opengeo.tech/ 
+ * 
+ * Licensed under the MIT license. 
+ * 
+ * Demo: 
+ * https://opengeo.tech/maps/leaflet-locationpicker/ 
+ * 
+ * Source: 
+ * git@github.com:stefanocudini/leaflet-locationpicker.git 
+ * 
+ */
+!function(a){if("function"==typeof define&&define.amd)define(["jquery","leaflet"],a);else if("undefined"!=typeof module)module.exports=a(require("jquery","leaflet"));else{if(void 0===window.jQuery)throw"jQuery must be loaded first";if(void 0===window.L)throw"Leaflet must be loaded first";a(window.jQuery,window.L)}}(function(a,b){var c=a;c.fn.leafletLocationPicker=function(a,d){function e(c){return c?b.latLng(parseFloat(c.lat).toFixed(a.locationDigits),parseFloat(c.lng).toFixed(a.locationDigits)):c}function f(d){var f=d;switch(c.type(d)){case"string":var g=d.split(a.locationSep);f=g[0]&&g[1]?b.latLng(g):null;break;case"array":f=b.latLng(d);break;case"object":var h,i;d.hasOwnProperty("lat")?h=d.lat:d.hasOwnProperty("latitude")&&(h=d.latitude),d.hasOwnProperty("lng")?i=d.lng:d.hasOwnProperty("lon")?i=d.lon:d.hasOwnProperty("longitude")&&(i=d.longitude),f=b.latLng(parseFloat(h),parseFloat(i));break;default:f=d}return e(f)}function g(d){if(d.divMap=document.createElement("div"),d.$map=c(document.createElement("div")).addClass(a.className+"-map").height(a.height).width(a.width).append(d.divMap),a.readOnly&&d.$map.addClass("read-only"),a.mapContainer&&c(a.mapContainer)?d.$map.appendTo(a.mapContainer).addClass("map-select"):d.$map.appendTo("body"),d.location&&(a.map.center=d.location),"string"==typeof a.layer&&k[a.layer]?a.map.layers=b.tileLayer(k[a.layer]):a.layer instanceof b.TileLayer||a.layer instanceof b.GridLayer||a.layer instanceof b.LayerGroup?a.map.layers=a.layer:a.map.layers=b.tileLayer(k.OSM),d.map=b.map(d.divMap,a.map).addControl(b.control.zoom({position:"bottomright"})).on(a.event,function(b){a.readOnly||d.setLocation(b.latlng)}),a.activeOnMove&&d.map.on("move",function(a){d.setLocation(a.target.getCenter())}),!0!==a.alwaysOpen){var e=b.control({position:"topright"});e.onAdd=function(c){var e=b.DomUtil.create("div","leaflet-bar"),f=b.DomUtil.create("a","leaflet-control "+a.className+"-close");return f.innerHTML="&times;",e.appendChild(f),b.DomEvent.on(f,"click",b.DomEvent.stop,d).on(f,"click",d.closeMap,d),e},e.addTo(d.map)}return a.locationMarker&&(d.marker=h(d.location).addTo(d.map)),d.$map}function h(c){return b.marker(f(c)||b.latLng(0,0),{icon:b.divIcon({className:a.className+"-marker",iconAnchor:b.point(0,0),html:"<div"+("30px"!==a.cursorSize?'style="width: '+a.cursorSize+"; height: "+a.cursorSize+';"':"")+'><div class="corner1"></div><div class="corner2"></div><div class="corner3"></div><div class="corner4"></div></div>'})})}var i=window.location.protocol,j="leaflet-locpicker",k={OSM:i+"//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"},l={zoom:0,center:b.latLng([40,0]),zoomControl:!1,attributionControl:!1};c.isPlainObject(a)&&c.isPlainObject(a.map)&&(l=c.extend(l,a.map));var m={alwaysOpen:!1,className:j,location:l.center,locationFormat:"{lat}{sep}{lng}",locationMarker:!0,locationDigits:6,locationSep:",",position:"topright",layer:"OSM",height:140,width:200,event:"click",cursorSize:"30px",readOnly:!1,map:l,onChangeLocation:c.noop,mapContainer:""};return a=c.isPlainObject(a)?c.extend(m,a):c.isFunction(a)?c.extend(m,{onChangeLocation:a}):m,c.isFunction(d)&&(a=c.extend(m,{onChangeLocation:d})),c(this).each(function(d,e){var h=this;h.$input=c(this),h.options=a,h.setReadOnly=function(b){a.readOnly=b,h.$map.toggleClass("read-only",b)},h.locationOri=h.$input.val(),h.onChangeLocation=function(){var b={latlng:h.location,location:h.getLocation()};h.$input.trigger(c.extend(b,{type:"changeLocation"})),a.onChangeLocation.call(h,b)},h.setLocation=function(a,b){a=a||m.location,h.location=f(a),h.marker&&h.marker.setLatLng(a),b||(h.$input.data("location",h.location),h.$input.val(h.getLocation()),h.onChangeLocation())},h.getLocation=function(){return h.location?b.Util.template(a.locationFormat,{lat:h.location.lat,lng:h.location.lng,sep:a.locationSep}):h.location},h.updatePosition=function(){switch(a.position){case"bottomleft":h.$map.css({top:h.$input.offset().top+h.$input.height()+6,left:h.$input.offset().left});break;case"topright":h.$map.css({top:h.$input.offset().top,left:h.$input.offset().left+h.$input.width()+5})}},h.openMap=function(){h.updatePosition(),h.$map.show(),h.map.invalidateSize(),h.$input.trigger("show")},h.closeMap=function(){h.$map.hide(),h.$input.trigger("hide")},h.setLocation(h.locationOri,!0),h.$map=g(h),h.$input.addClass(a.className).on("focus."+a.className,function(a){a.preventDefault(),h.openMap()}).on("blur."+a.className,function(a){a.preventDefault();for(var b=a.relatedTarget,c=!0;b;){if(b._leaflet){c=!1;break}b=b.parentElement}c&&setTimeout(function(){h.closeMap()},100)}),c(window).on("resize",function(){h.$map.is(":visible")&&h.updatePosition()}),a.alwaysOpen&&!0===a.alwaysOpen&&h.openMap()}),this}});
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.css
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.css
@@ -0,0 +1,128 @@
+/* 
+ * Leaflet Location Picker v0.3.4 - 2022-11-18 
+ * 
+ * Copyright 2022 Stefano Cudini 
+ * stefano.cudini@gmail.com 
+ * https://opengeo.tech/ 
+ * 
+ * Licensed under the MIT license. 
+ * 
+ * Demo: 
+ * https://opengeo.tech/maps/leaflet-locationpicker/ 
+ * 
+ * Source: 
+ * git@github.com:stefanocudini/leaflet-locationpicker.git 
+ * 
+ */
+.leaflet-locpicker-active {
+	box-shadow: 0 0 5px rgba(0,0,0,0.3);
+}
+
+.leaflet-locpicker-map {
+	display: none;
+	position: absolute;
+	background: rgba(255,255,255,1);
+	box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
+}
+
+.leaflet-locpicker-map:not(.read-only) .leaflet-container,
+.leaflet-locpicker-map:not(.read-only) .leaflet-locpicker-marker {
+	cursor: crosshair;
+}
+
+.leaflet-locpicker-map.read-only .leaflet-locpicker-marker {
+	cursor: grab;
+}
+
+.leaflet-locpicker-close {
+	cursor: pointer;
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	font: 700 22px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+}
+
+.leaflet-locpicker-map .leaflet-container {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	bottom: 5px;
+	left: 5px;
+	border: 1px solid rgba(100,100,100,0.2)
+}
+
+.leaflet-locpicker-map .leaflet-control {
+	box-shadow: none;
+	margin: 0;
+}
+
+.leaflet-locpicker-map .leaflet-bar {
+	border-radius: 0;
+}
+
+.leaflet-locpicker-map .leaflet-bar a:first-child {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.leaflet-locpicker-map .leaflet-bar a:last-child {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.map-select {
+		display: block !important;
+		position: relative;
+		left: 0 !important;
+		top:  0 !important;
+		width: 100% !important;
+		margin: 0 auto;
+}
+
+/* MARKER */
+.leaflet-locpicker-map .leaflet-locpicker-marker > div {
+	position: relative;
+	top: -1px;
+	left: -1px;
+	padding: 0;
+	margin: 0;
+	width: 30px; /* defaults */
+	height: 30px;
+}
+
+.leaflet-locpicker-map .leaflet-locpicker-marker > div > div {
+	padding: 0;
+	margin: 0;
+	position: absolute;
+	outline: 1px solid #fff;
+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner1 {
+	width: 50%;
+	height: 0;
+	left: -70%;
+	border-top: 2px solid black;
+}
+
+.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner2 {
+	width: 50%;
+	height: 0;
+	left:  30%;
+	border-top: 2px solid black;
+}
+
+.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner3 {
+	width: 0;
+	height: 50%;
+	top: 30%;
+	border-left: 2px solid black;
+}
+
+.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner4 {
+	width: 0;
+	height: 50%;
+	top: -70%;
+	border-left: 2px solid black;
+}
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.js
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.js
@@ -0,0 +1,339 @@
+/* 
+ * Leaflet Location Picker v0.3.4 - 2022-11-18 
+ * 
+ * Copyright 2022 Stefano Cudini 
+ * stefano.cudini@gmail.com 
+ * https://opengeo.tech/ 
+ * 
+ * Licensed under the MIT license. 
+ * 
+ * Demo: 
+ * https://opengeo.tech/maps/leaflet-locationpicker/ 
+ * 
+ * Source: 
+ * git@github.com:stefanocudini/leaflet-locationpicker.git 
+ * 
+ */
+
+(function (factory) {
+    if(typeof define === 'function' && define.amd) {
+    //AMD
+        define(['jquery','leaflet'], factory);
+    } else if(typeof module !== 'undefined') {
+    // Node/CommonJS
+        module.exports = factory(require('jquery','leaflet'));
+    } else {
+    // Browser globals
+    	if(typeof window.jQuery === 'undefined')
+            throw 'jQuery must be loaded first';
+        if(typeof window.L === 'undefined')
+            throw 'Leaflet must be loaded first';
+        factory(window.jQuery, window.L);
+    }
+})(function(jQuery, L) {
+
+	var $ = jQuery;
+
+	$.fn.leafletLocationPicker = function(opts, onChangeLocation) {
+
+		var http = window.location.protocol;
+
+		var baseClassName = 'leaflet-locpicker',
+			baseLayers = {
+				'OSM': http + '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+				// 'SAT': http + '//otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png' // AK 2021-04-22: invalid URL!!
+				//TODO add more free base layers
+			};
+
+		var optsMap = {
+				zoom: 0,
+				center: L.latLng([40,0]),
+				zoomControl: false,
+				attributionControl: false
+			};
+
+		if($.isPlainObject(opts) && $.isPlainObject(opts.map))
+			optsMap = $.extend(optsMap, opts.map);
+
+		var defaults = {
+			alwaysOpen: false,
+			className: baseClassName,
+			location: optsMap.center,
+			locationFormat: '{lat}{sep}{lng}',
+			locationMarker: true,
+			locationDigits: 6,
+			locationSep: ',',
+			position: 'topright',
+			layer: 'OSM',
+			height: 140,
+			width: 200,
+			event: 'click',
+			cursorSize: '30px',
+			readOnly: false,
+			map: optsMap,
+			onChangeLocation: $.noop,
+			mapContainer: ""
+		};
+
+		if($.isPlainObject(opts))
+			opts = $.extend(defaults, opts);
+
+		else if($.isFunction(opts))
+			opts = $.extend(defaults, {
+				onChangeLocation: opts
+			});
+		else
+			opts = defaults;
+
+		if($.isFunction(onChangeLocation))
+			opts = $.extend(defaults, {
+				onChangeLocation: onChangeLocation
+			});
+
+		function roundLocation(loc) {
+			return loc ? L.latLng(
+				parseFloat(loc.lat).toFixed(opts.locationDigits),
+				parseFloat(loc.lng).toFixed(opts.locationDigits)
+			) : loc;
+		}
+
+		function parseLocation(loc) {
+			var retLoc = loc;
+
+			switch($.type(loc)) {
+				case 'string':
+					var ll = loc.split(opts.locationSep);
+					if(ll[0] && ll[1])
+						retLoc = L.latLng(ll);
+					else
+						retLoc = null;
+				break;
+				case 'array':
+					retLoc = L.latLng(loc);
+				break;
+				case 'object':
+					var lat, lng;
+					if(loc.hasOwnProperty('lat'))
+						lat = loc.lat;
+					else if(loc.hasOwnProperty('latitude'))
+						lat = loc.latitude;
+
+					if(loc.hasOwnProperty('lng'))
+						lng = loc.lng;
+					else if(loc.hasOwnProperty('lon'))
+						lng = loc.lon;
+					else if(loc.hasOwnProperty('longitude'))
+						lng = loc.longitude;
+
+					retLoc = L.latLng(parseFloat(lat),parseFloat(lng));
+				break;
+				default:
+					retLoc = loc;
+			}
+			return roundLocation( retLoc );
+		}
+
+		function buildMap(self) {
+
+			self.divMap = document.createElement('div');
+			self.$map = $(document.createElement('div'))
+				.addClass(opts.className + '-map')
+				.height(opts.height)
+				.width(opts.width)
+				.append(self.divMap);
+
+			if (opts.readOnly)
+				self.$map.addClass("read-only");
+
+            //adds either as global div or specified container
+            //if added to specified container add some style class
+            if(opts.mapContainer && $(opts.mapContainer))
+                self.$map.appendTo(opts.mapContainer)
+                        .addClass('map-select');
+            else
+                self.$map.appendTo('body');
+
+			if(self.location)
+				opts.map.center = self.location;
+
+			if(typeof opts.layer === 'string' && baseLayers[opts.layer]) {
+				opts.map.layers = L.tileLayer(baseLayers[opts.layer]);
+
+			}else if (opts.layer instanceof L.TileLayer ||
+                                  opts.layer instanceof L.GridLayer ||
+                                  opts.layer instanceof L.LayerGroup) {
+				opts.map.layers = opts.layer;
+
+			}else {
+				opts.map.layers = L.tileLayer(baseLayers.OSM);
+                        }
+
+			//leaflet map
+			self.map = L.map(self.divMap, opts.map)
+				.addControl( L.control.zoom({position: 'bottomright'}) )
+				.on(opts.event, function(e) {
+					if (!opts.readOnly)
+						self.setLocation(e.latlng);
+				});
+
+			if(opts.activeOnMove) {
+				self.map.on('move', function(e) {
+					self.setLocation(e.target.getCenter());
+				});
+			}
+
+			//only adds closeBtn if not alwaysOpen
+			if(opts.alwaysOpen!==true){
+				var xmap = L.control({position: 'topright'});
+				xmap.onAdd = function(map) {
+					var btn_holder = L.DomUtil.create('div', 'leaflet-bar');
+					var btn = L.DomUtil.create('a','leaflet-control '+opts.className+'-close');
+					btn.innerHTML = '&times;';
+					btn_holder.appendChild(btn);
+					L.DomEvent
+						.on(btn, 'click', L.DomEvent.stop, self)
+						.on(btn, 'click', self.closeMap, self);
+					return btn_holder;
+				};
+				xmap.addTo(self.map);
+			}
+
+			if(opts.locationMarker)
+				self.marker = buildMarker(self.location).addTo(self.map);
+
+			return self.$map;
+		}
+
+		function buildMarker(loc) {
+			return L.marker(parseLocation(loc) || L.latLng(0,0), {
+				icon: L.divIcon({
+					className: opts.className+'-marker',
+					iconAnchor: L.point(0, 0),
+
+					// TODO: get rid of inline CSS completely, in order to make it compliant with Content-Security-Policy that doesn't wallows 'unsafe-inline' CSS.
+                                        // AK: These additional styles can be set up with JavaScript, after creation of the marker icon element.
+					html: '<div' + ("30px" !== opts.cursorSize ? 'style="width: ' + opts.cursorSize + '; height: ' + opts.cursorSize + ';"' : '') + '>'+
+							'<div class="corner1"></div>'+
+							'<div class="corner2"></div>'+
+							'<div class="corner3"></div>'+
+							'<div class="corner4"></div>'+
+						'</div>'
+				})
+			});
+		}
+
+		$(this).each(function(index, input) {
+		    var self = this;
+
+		    self.$input = $(this);
+
+		    self.options = opts; // access to options
+		    self.setReadOnly = function(newReadOnly) {
+				opts.readOnly = newReadOnly;
+				self.$map.toggleClass("read-only", newReadOnly);
+		    };
+
+		    self.locationOri = self.$input.val();
+
+			self.onChangeLocation = function() {
+				var edata = {
+					latlng: self.location,
+					location: self.getLocation()
+				};
+				self.$input.trigger($.extend(edata, {
+					type: 'changeLocation'
+				}));
+				opts.onChangeLocation.call(self, edata);
+			};
+
+		    self.setLocation = function(loc, noSet) {
+				loc = loc || defaults.location;
+				self.location = parseLocation(loc);
+
+				if(self.marker)
+					self.marker.setLatLng(loc);
+
+				if(!noSet) {
+					self.$input.data('location', self.location);
+					self.$input.val( self.getLocation() );
+					self.onChangeLocation();
+				}
+		    };
+
+		    self.getLocation = function() {
+		    	return self.location ? L.Util.template(opts.locationFormat, {
+		    		lat: self.location.lat,
+		    		lng: self.location.lng,
+		    		sep: opts.locationSep
+		    	}) : self.location;
+		    };
+
+		    self.updatePosition = function() {
+			    switch(opts.position) {
+				    case 'bottomleft':
+					    self.$map.css({
+						    top: self.$input.offset().top + self.$input.height() + 6,
+						    left: self.$input.offset().left
+					    });
+					    break;
+				    case 'topright':
+					    self.$map.css({
+						    top: self.$input.offset().top,
+						    left: self.$input.offset().left + self.$input.width() + 5
+					    });
+					    break;
+			    }
+		    };
+
+		    self.openMap = function() {
+			    self.updatePosition();
+			    self.$map.show();
+			    self.map.invalidateSize();
+			    self.$input.trigger('show');
+		    };
+
+		    self.closeMap = function() {
+			    self.$map.hide();
+			    self.$input.trigger('hide');
+		    };
+
+		    self.setLocation(self.locationOri, true);
+
+		    self.$map = buildMap(self);
+
+		    self.$input
+			    .addClass(opts.className)
+			    .on('focus.'+opts.className, function(e) {
+				    e.preventDefault();
+				    self.openMap();
+			    })
+			    .on('blur.'+opts.className, function(e) {
+				    e.preventDefault();
+				    var p = e.relatedTarget;
+				    var close = true;
+				    while (p) {
+					    if (p._leaflet) {
+						    close = false;
+						    break;
+					    }
+					    p = p.parentElement;
+				    }
+				    if(close) {
+				    	setTimeout(function() {
+					    	self.closeMap();
+					    }, 100);
+				    }
+			    });
+
+		    $(window).on('resize', function() {
+				if (self.$map.is(':visible'))
+					self.updatePosition();
+		    });
+        //opens map initially if alwaysOpen
+        if(opts.alwaysOpen && opts.alwaysOpen===true) self.openMap();
+		});
+
+		return this;
+	};
+
+});
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/examples/simple.html
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/examples/simple.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
+<html xmlns="https://www.w3.org/1999/xhtml"> 
+<head> 
+	<title>Leaflet Location Picker Demo</title> 
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+
+	<link rel="stylesheet" href="//unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../dist/leaflet-locationpicker.src.css" />
+	<link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+<h3><a href="../index.html"><big>◄</big> Leaflet Location Picker</a></h3>
+
+<h4>Simple Example: <em></em></h4>
+
+<form id="insert">
+	<label>Insert new geographic location:</label><br />
+	<input class="geolocs" type="text" value="" size="20" />
+<pre>
+$('.geolocs').leafletLocationPicker();
+</pre>
+</form>
+
+<form id="default">
+	Change default geographic location: <br />
+	<input class="geolocs" type="text" value="17.9787,81.0352" size="20" />
+</form>
+
+<form id="format">
+	Custom location format: <br />
+	<input id="geoloc2" type="text" value="" size="20" /> <br />
+<pre>
+$('#geoloc2').leafletLocationPicker({
+	locationFormat: '{lat}@{lng}#WGS84',
+	position: 'bottomleft'
+});
+</pre>
+</form>
+
+<form id="callback">
+	Custom callback: <br />
+	<input id="geoloc4" type="text" value="" size="20" />
+	<br /><br />
+	<i>Value from callback:</i><br />
+	<em style="color:blue"></em><br />
+<pre>
+$('#geoloc4').leafletLocationPicker(function(e) {
+	$(this).siblings('em').text(e.location);
+});
+</pre>
+</form>
+
+<form id="events">
+	Events: <em style="color:red"></em><br />
+	<input id="geoloc3" type="text" value="" size="20" />
+	<br />
+	<br /><input id="geolat" type="text" value="" size="20" />
+	<br /><input id="geolng" type="text" value="" size="20" />
+	<br /><i>string location</i><br />
+<pre>
+$('#geoloc3').leafletLocationPicker({
+	locationSep: ' - '
+})
+.on('show', function(e) {
+	$(this).siblings('em').text('click on map for insert the location');
+})
+.on('hide', function(e) {
+	$(this).siblings('em').text('');
+})
+.on('changeLocation', function(e) {
+	$(this)
+	.siblings('#geolat').val( e.latlng.lat )
+	.siblings('#geolng').val( e.latlng.lng )
+	.siblings('i').text('"'+e.location+'"');
+});
+</pre>
+</form>
+
+<script src="//unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
+<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<form id="fixedContAlwaysOpen">
+	Fixed container and always open map: <br />
+	<div  style="min-height: 140;min-width: 200;">
+			<input id="geoloc5" type="text" value="" size="20" />
+			<div id="fixedMapCont" style="border: 1px solid black; min-height: 140;min-width: 200;"></div>
+	</div>
+<pre>
+	$('#geoloc5').leafletLocationPicker({
+			alwaysOpen: true,
+			mapContainer: "#fixedMapCont"
+	});
+</pre>
+</form>
+
+
+<script src="../../leaflet/dist/leaflet.js"></script>
+<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+<script src="../dist/leaflet-locationpicker.min.js"></script>
+<script>
+
+//multiple istances
+$('.geolocs').leafletLocationPicker();
+
+//custom location format
+$('#geoloc2').leafletLocationPicker({
+	locationFormat: '{lat}@{lng}#WGS84',
+	position: 'bottomleft'
+});
+
+//events
+$('#geoloc3').leafletLocationPicker({
+		locationSep: ' - '
+	})
+	.on('show', function(e) {
+		$(this).siblings('em').text('click on map for insert the location');
+	})
+	.on('hide', function(e) {
+		$(this).siblings('em').text('');
+	})
+	.on('changeLocation', function(e) {
+		$(this)
+		.siblings('#geolat').val( e.latlng.lat )
+		.siblings('#geolng').val( e.latlng.lng )
+		.siblings('i').text('"'+e.location+'"');
+	});
+
+//callback
+$('#geoloc4').leafletLocationPicker(function(e) {
+	$(this).siblings('em').text(e.location);
+});
+
+//fix n alwaysOpen
+$('#geoloc5').leafletLocationPicker({
+		alwaysOpen: true,
+		mapContainer: "#fixedMapCont"
+});
+
+
+</script>
+
+<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> &bull; <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
+
+<script src="/labs-common.js"></script>
+</body>
+</html>
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/examples/style.css
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/examples/style.css
@@ -0,0 +1,102 @@
+body {
+	background:#b5d0d0;
+	color:#285585;
+	font-family:Arial;
+}
+body#home {
+	background:url('images/leaflet-panel.png') no-repeat top left #b5d0d0;
+	margin-left:200px;
+}
+
+a {
+	color:#1978cf;
+}
+a:hover {
+	color:#fff;
+}
+h2, h3, h4 {
+	white-space:nowrap;
+	margin:1em 0 0 0;
+}
+h3 a,
+h3 a:hover {
+	text-decoration:none;
+}
+#desc {
+	float: left;
+	margin-bottom: 1em;
+	position: relative;
+	white-space:nowrap;
+	font-size:1em;
+}
+#map {
+	border:2px solid #1978cf;
+	box-shadow: 0 0 8px #999;
+	float:left;
+	width:800px;
+	height:400px;	
+}
+label {
+	float: left;
+	clear: both;
+}
+pre {
+	font-family: "Courier New";
+	font-size: .85em;
+	color: #333;
+	float: left;
+	clear: both;
+	padding: 10px;
+	margin: 10px 0;
+	background-color: #fff;
+	box-shadow: inset 2px 2px 3px rgba(100,100,100,0.2);
+	border: 1px solid #ccc;
+}
+#copy {
+	position:fixed;
+	z-index:1000;
+	right:150px;
+	top:-8px;
+	font-size:.85em;
+	padding:8px 8px 2px 8px;
+	background: #323b44;
+	border: 2px solid #737c85;		
+	border-radius:.7em;
+	opacity: 0.9;
+	box-shadow:0 0 8px #5f7182;
+	color:#eee
+}
+#copy a {
+	color:#ccc;
+	text-decoration:none
+}
+#copy a:hover {
+	color:#fff
+}
+#ribbon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	filter: alpha(opacity=80);
+	-khtml-opacity: .8;
+	-moz-opacity: .8;
+	opacity: .8;		
+}
+
+#comments {
+	margin-top:50px;
+	clear:both;
+}
+
+form {
+	margin: 20px;
+	padding: 20px;
+	background: #eee;
+	float: left;
+	min-height: 160px;
+	min-width: 400px
+}
+input {
+	margin: 5px 0;
+}
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/images/leaflet-locationpicker.png
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/images/leaflet-locationpicker.png
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/index.html
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml">
+<head>
+<title>leaflet locationpicker</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style>
+body {
+	background:#F2F9FF;
+	color:#666;
+	font-family:Arial;
+}
+a {
+	color:#f80;
+	text-decoration:none;
+}
+a:hover {
+	color:#635f94;
+	text-decoration:underline;
+}
+h1, h2, h3, h4 {
+	text-transform: capitalize;
+	white-space:nowrap;
+	margin: 0 0 .25em 0;
+}
+h4 {
+	color: #A1A8AD;
+}
+#desc {
+	float: left;
+	margin-bottom: 1em;
+	position: relative;
+	white-space:nowrap;
+	font-size:1em;
+}
+.box {
+	float: left;
+	min-width: 200px;
+	margin-right: 20px;
+	background: #fff;
+	padding:8px;
+	border:2px solid #c5cdd4;
+	border-radius:.45em;
+
+	box-shadow: 0 0 16px rgba(100,100,100,0.2);
+}
+.screenshot {
+	margin: 20px 20px 20px 0;
+	float: left;
+	clear: both;
+	background: #fff;
+	box-shadow: 0 0 10px rgba(120,120,120,0.2);	
+	padding: 8px;	
+}
+ul {
+	font-size:.85em;
+	margin:0;
+	padding:0;
+}
+li {
+	margin:0 0 2px 18px;
+}
+#copy {
+	position:fixed;
+	z-index:1000;
+	right:150px;
+	top:-8px;
+	font-size:.85em;
+	padding:8px 8px 2px 8px;
+	background: #eee;
+	border: 2px solid #bbb;		
+	border-radius:.7em;
+	opacity: 0.9;
+	box-shadow:0 0 8px #aaa;
+	font-weight: bold;
+	color:#bbb;
+}
+#copy a {
+	color:#888;
+	text-decoration:none
+}
+#copy a:hover {
+	color:#f80
+}
+#ribbon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	filter: alpha(opacity=80);
+	-khtml-opacity: .8;
+	-moz-opacity: .8;
+	opacity: .8;		
+}
+</style>
+</head>
+
+<body id="home">
+
+<h1>leaflet locationpicker</h1>
+
+<div id="desc">
+	Simple location picker with Leaflet map
+	<div style="position:absolute;top:0;right:-120px">
+		<iframe src="http://ghbtns.com/github-btn.html?user=stefanocudini&amp;repo=leaflet-locationpicker&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
+	</div>
+</div>
+
+<div style="clear:both"></div>
+<div class="box">
+	<h4>Features</h4>
+	<ul id="ff">
+		
+			<li>Custom location format, lat,lon separator and precision</li>
+		
+			<li>Pick Location Latidute,Longitude clicking on map</li>
+		
+			<li>Bind multiple events or single picker callback</li>
+		
+			<li>Load picker map from preselected location</li>
+		
+			<li>Bind callback on location picked</li>
+		
+			<li>Enable disable location marker</li>
+		
+			<li>Custom map baselayer</li>
+			
+	</ul>
+</div>
+<div class="box">
+	<h4>Code repositories</h4>
+		
+			<a target="_blank" href="https://github.com/stefanocudini/leaflet-locationpicker">Github.com</a>
+			<br />
+		
+			<a target="_blank" href="https://npmjs.org/package/leaflet-locationpicker">Node Packaged Module</a>
+			<br />
+		
+
+	<h4>Homepage</h4>
+	<a href="https://opengeo.tech/maps/leaflet-locationpicker/">https://opengeo.tech/maps/leaflet-locationpicker/</a>
+	<br />
+
+	<h4>Download</h4>
+	<ul>
+		<li><a href="https://github.com/stefanocudini/leaflet-locationpicker/archive/master.zip">Dev Pack (.zip)</a></li>
+	</ul>
+</div>
+<div class="box">
+	<h4>Examples</h4>
+	<ul id="examples">
+		
+			<li><a href="examples/simple.html">examples/simple.html</a></li>
+		
+	</ul>
+</div>
+
+<div class="screenshot">
+	<img src="images/leaflet-locationpicker.png" />
+</div>
+
+<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> &bull; &copy;<a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
+	
+<a href="https://github.com/stefanocudini/leaflet-locationpicker"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+<div style="clear:both;font-size:.85em;margin-bottom:1em">
+	<b>For questions and bugs</b> I recommend you to <a href="https://github.com/stefanocudini/leaflet-locationpicker/issues">create New Issue</a> on Github repository.</strong><br />
+	<br />
+	This is a micro discussion area for methods of implementation.<br />
+</div>
+
+<div id="comments">
+	<div id="disqus_thread"></div>
+</div>
+
+<script type="text/javascript" src="/labs-common.js"></script>
+
+</body>
+</html>
--- a/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/index.tmpl
+++ b/EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/index.tmpl
@@ -0,0 +1,163 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="https://www.w3.org/1999/xhtml">
+<head>
+<title><%=title%></title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style>
+body {
+	background:#F2F9FF;
+	color:#666;
+	font-family:Arial;
+}
+a {
+	color:#f80;
+	text-decoration:none;
+}
+a:hover {
+	color:#635f94;
+	text-decoration:underline;
+}
+h1, h2, h3, h4 {
+	text-transform: capitalize;
+	white-space:nowrap;
+	margin: 0 0 .25em 0;
+}
+h4 {
+	color: #A1A8AD;
+}
+#desc {
+	float: left;
+	margin-bottom: 1em;
+	position: relative;
+	white-space:nowrap;
+	font-size:1em;
+}
+.box {
+	float: left;
+	min-width: 200px;
+	margin-right: 20px;
+	background: #fff;
+	padding:8px;
+	border:2px solid #c5cdd4;
+	border-radius:.45em;
+
+	box-shadow: 0 0 16px rgba(100,100,100,0.2);
+}
+.screenshot {
+	margin: 20px 20px 20px 0;
+	float: left;
+	clear: both;
+	background: #fff;
+	box-shadow: 0 0 10px rgba(120,120,120,0.2);	
+	padding: 8px;	
+}
+ul {
+	font-size:.85em;
+	margin:0;
+	padding:0;
+}
+li {
+	margin:0 0 2px 18px;
+}
+#copy {
+	position:fixed;
+	z-index:1000;
+	right:150px;
+	top:-8px;
+	font-size:.85em;
+	padding:8px 8px 2px 8px;
+	background: #eee;
+	border: 2px solid #bbb;		
+	border-radius:.7em;
+	opacity: 0.9;
+	box-shadow:0 0 8px #aaa;
+	font-weight: bold;
+	color:#bbb;
+}
+#copy a {
+	color:#888;
+	text-decoration:none
+}
+#copy a:hover {
+	color:#f80
+}
+#ribbon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	filter: alpha(opacity=80);
+	-khtml-opacity: .8;
+	-moz-opacity: .8;
+	opacity: .8;		
+}
+</style>
+</head>
+
+<body id="home">
+
+<h1><%=title%></h1>
+
+<div id="desc">
+	<%=pkg.description%>
+	<div style="position:absolute;top:0;right:-120px">
+		<iframe src="<%=ribbonurl%>" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
+	</div>
+</div>
+
+<div style="clear:both"></div>
+<div class="box">
+	<h4>Features</h4>
+	<ul id="ff">
+		<% _.forEach(features, function(f) { %>
+			<li><%- f%></li>
+		<% }); %>	
+	</ul>
+</div>
+<div class="box">
+	<h4>Code repositories</h4>
+		<% _.forEach(sources, function(s) { %>
+			<a target="_blank" href="<%=s.url%>"><%- s.name%></a>
+			<br />
+		<% }); %>
+
+	<h4>Homepage</h4>
+	<a href="<%=pkg.homepage%>"><%=pkg.homepage%></a>
+	<br />
+
+	<h4>Download</h4>
+	<ul>
+		<li><a href="<%=giturl%>/archive/master.zip">Dev Pack (.zip)</a></li>
+	</ul>
+</div>
+<div class="box">
+	<h4>Examples</h4>
+	<ul id="examples">
+		<% _.forEach(examples, function(file) { %>
+			<li><a href="<%- file %>"><%- file%></a></li>
+		<% }); %>
+	</ul>
+</div>
+
+<div class="screenshot">
+	<img src="<%=image%>" />
+</div>
+
+<div id="copy"><a href="<%=pkg.author.url%>">Opengeo.tech</a> &bull; &copy;<a rel="author" href="https://opengeo.tech/stefano-cudini/"><%= pkg.author.name %></a></div>
+	
+<a href="<%=giturl%>"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+<div style="clear:both;font-size:.85em;margin-bottom:1em">
+	<b>For questions and bugs</b> I recommend you to <a href="<%=giturl%>/issues">create New Issue</a> on Github repository.</strong><br />
+	<br />
+	This is a micro discussion area for methods of implementation.<br />
+</div>
+
+<div id="comments">
+	<div id="disqus_thread"></div>
+</div>
+
+<script type="text/javascript" src="/labs-common.js"></script>
+
+</body>
+</html>