feat: leaflet und leaflet-locationpicker hinzufügen
This commit is contained in:
Developer 02
17
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.min.js
vendored
Normal file
17
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.min.js
vendored
Normal file
@@ -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="×",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}});
|
||||
128
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.css
vendored
Normal file
128
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.css
vendored
Normal file
@@ -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;
|
||||
}
|
||||
339
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.js
vendored
Normal file
339
EnvelopeGenerator.Web/wwwroot/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.js
vendored
Normal file
@@ -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 = '×';
|
||||
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;
|
||||
};
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user