1. Import
This commit is contained in:
31
html/locating/leaflet-coordinates/Leaflet.Coordinates-0.1.3.css
Executable file
31
html/locating/leaflet-coordinates/Leaflet.Coordinates-0.1.3.css
Executable file
@@ -0,0 +1,31 @@
|
||||
.leaflet-control-coordinates {
|
||||
background-color:#D8D8D8;
|
||||
background-color:rgba(255, 255, 255, 0.8);
|
||||
cursor:pointer;
|
||||
}
|
||||
.leaflet-control-coordinates,
|
||||
.leaflet-control-coordinates .uiElement input {
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.leaflet-control-coordinates .uiElement {
|
||||
margin:4px;
|
||||
}
|
||||
|
||||
.leaflet-control-coordinates .uiElement .labelFirst {
|
||||
margin-right:4px;
|
||||
}
|
||||
|
||||
.leaflet-control-coordinates .uiHidden{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.leaflet-control-coordinates .uiElement.label {
|
||||
color:inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
display: inherit;
|
||||
}
|
||||
326
html/locating/leaflet-coordinates/Leaflet.Coordinates-0.1.3.js
Executable file
326
html/locating/leaflet-coordinates/Leaflet.Coordinates-0.1.3.js
Executable file
@@ -0,0 +1,326 @@
|
||||
/*
|
||||
* L.Control.Coordinates is used for displaying current mouse coordinates on the map.
|
||||
*/
|
||||
|
||||
L.Control.Coordinates = L.Control.extend({
|
||||
options: {
|
||||
position: 'bottomright',
|
||||
//decimals used if not using DMS or labelFormatter functions
|
||||
decimals: 4,
|
||||
//decimalseperator used if not using DMS or labelFormatter functions
|
||||
decimalSeperator: ".",
|
||||
//label templates for usage if no labelFormatter function is defined
|
||||
labelTemplateLat: "Lat: {y}",
|
||||
labelTemplateLng: "Lng: {x}",
|
||||
//label formatter functions
|
||||
labelFormatterLat: undefined,
|
||||
labelFormatterLng: undefined,
|
||||
//switch on/off input fields on click
|
||||
enableUserInput: true,
|
||||
//use Degree-Minute-Second
|
||||
useDMS: false,
|
||||
//if true lat-lng instead of lng-lat label ordering is used
|
||||
useLatLngOrder: false
|
||||
},
|
||||
|
||||
onAdd: function(map) {
|
||||
this._map = map;
|
||||
|
||||
var className = 'leaflet-control-coordinates',
|
||||
container = this._container = L.DomUtil.create('div', className),
|
||||
options = this.options;
|
||||
|
||||
//label containers
|
||||
this._labelcontainer = L.DomUtil.create("div", "uiElement label", container);
|
||||
this._label = L.DomUtil.create("span", "labelFirst", this._labelcontainer);
|
||||
|
||||
|
||||
//input containers
|
||||
this._inputcontainer = L.DomUtil.create("div", "uiElement input uiHidden", container);
|
||||
var xSpan, ySpan;
|
||||
if (options.useLatLngOrder) {
|
||||
ySpan = L.DomUtil.create("span", "", this._inputcontainer);
|
||||
this._inputY = this._createInput("inputY", this._inputcontainer);
|
||||
xSpan = L.DomUtil.create("span", "", this._inputcontainer);
|
||||
this._inputX = this._createInput("inputX", this._inputcontainer);
|
||||
} else {
|
||||
xSpan = L.DomUtil.create("span", "", this._inputcontainer);
|
||||
this._inputX = this._createInput("inputX", this._inputcontainer);
|
||||
ySpan = L.DomUtil.create("span", "", this._inputcontainer);
|
||||
this._inputY = this._createInput("inputY", this._inputcontainer);
|
||||
}
|
||||
xSpan.innerHTML = options.labelTemplateLng.replace("{x}", "");
|
||||
ySpan.innerHTML = options.labelTemplateLat.replace("{y}", "");
|
||||
|
||||
L.DomEvent.on(this._inputX, 'keyup', this._handleKeypress, this);
|
||||
L.DomEvent.on(this._inputY, 'keyup', this._handleKeypress, this);
|
||||
|
||||
//connect to mouseevents
|
||||
map.on("mousemove", this._update, this);
|
||||
map.on('dragstart', this.collapse, this);
|
||||
|
||||
map.whenReady(this._update, this);
|
||||
|
||||
this._showsCoordinates = true;
|
||||
//wether or not to show inputs on click
|
||||
if (options.enableUserInput) {
|
||||
L.DomEvent.addListener(this._container, "click", this._switchUI, this);
|
||||
}
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates an input HTML element in given container with given classname
|
||||
*/
|
||||
_createInput: function(classname, container) {
|
||||
var input = L.DomUtil.create("input", classname, container);
|
||||
input.type = "text";
|
||||
L.DomEvent.disableClickPropagation(input);
|
||||
return input;
|
||||
},
|
||||
|
||||
_clearMarker: function() {
|
||||
this._map.removeLayer(this._marker);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called onkeyup of input fields
|
||||
*/
|
||||
_handleKeypress: function(e) {
|
||||
switch (e.keyCode) {
|
||||
case 27: //Esc
|
||||
this.collapse();
|
||||
break;
|
||||
case 13: //Enter
|
||||
this._handleSubmit();
|
||||
this.collapse();
|
||||
break;
|
||||
default: //All keys
|
||||
this._handleSubmit();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on each keyup except ESC
|
||||
*/
|
||||
_handleSubmit: function() {
|
||||
var x = L.NumberFormatter.createValidNumber(this._inputX.value, this.options.decimalSeperator);
|
||||
var y = L.NumberFormatter.createValidNumber(this._inputY.value, this.options.decimalSeperator);
|
||||
if (x !== undefined && y !== undefined) {
|
||||
var marker = this._marker;
|
||||
if (!marker) {
|
||||
marker = this._marker = L.marker();
|
||||
marker.on("click", this._clearMarker, this);
|
||||
}
|
||||
marker.setLatLng(new L.LatLng(y, x));
|
||||
marker.addTo(this._map);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows inputs fields
|
||||
*/
|
||||
expand: function() {
|
||||
this._showsCoordinates = false;
|
||||
|
||||
this._map.off("mousemove", this._update, this);
|
||||
|
||||
L.DomEvent.addListener(this._container, "mousemove", L.DomEvent.stop);
|
||||
L.DomEvent.removeListener(this._container, "click", this._switchUI, this);
|
||||
|
||||
L.DomUtil.addClass(this._labelcontainer, "uiHidden");
|
||||
L.DomUtil.removeClass(this._inputcontainer, "uiHidden");
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates the label according to given options and formatters
|
||||
*/
|
||||
_createCoordinateLabel: function(ll) {
|
||||
var opts = this.options,
|
||||
x, y;
|
||||
if (opts.labelFormatterLng) {
|
||||
x = opts.labelFormatterLng(ll.lng);
|
||||
} else {
|
||||
x = L.Util.template(opts.labelTemplateLng, {
|
||||
x: this._getNumber(ll.lng, opts)
|
||||
});
|
||||
}
|
||||
if (opts.labelFormatterLat) {
|
||||
y = opts.labelFormatterLat(ll.lat);
|
||||
} else {
|
||||
y = L.Util.template(opts.labelTemplateLat, {
|
||||
y: this._getNumber(ll.lat, opts)
|
||||
});
|
||||
}
|
||||
if (opts.useLatLngOrder) {
|
||||
return y + " " + x;
|
||||
}
|
||||
return x + " " + y;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a Number according to options (DMS or decimal)
|
||||
*/
|
||||
_getNumber: function(n, opts) {
|
||||
var res;
|
||||
if (opts.useDMS) {
|
||||
res = L.NumberFormatter.toDMS(n);
|
||||
} else {
|
||||
res = L.NumberFormatter.round(n, opts.decimals, opts.decimalSeperator);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows coordinate labels after user input has ended. Also
|
||||
* displays a marker with popup at the last input position.
|
||||
*/
|
||||
collapse: function() {
|
||||
if (!this._showsCoordinates) {
|
||||
this._map.on("mousemove", this._update, this);
|
||||
this._showsCoordinates = true;
|
||||
var opts = this.options;
|
||||
L.DomEvent.addListener(this._container, "click", this._switchUI, this);
|
||||
L.DomEvent.removeListener(this._container, "mousemove", L.DomEvent.stop);
|
||||
|
||||
L.DomUtil.addClass(this._inputcontainer, "uiHidden");
|
||||
L.DomUtil.removeClass(this._labelcontainer, "uiHidden");
|
||||
|
||||
if (this._marker) {
|
||||
var m = L.marker(),
|
||||
ll = this._marker.getLatLng();
|
||||
m.setLatLng(ll);
|
||||
|
||||
var container = L.DomUtil.create("div", "");
|
||||
var label = L.DomUtil.create("div", "", container);
|
||||
label.innerHTML = this._createCoordinateLabel(ll);
|
||||
|
||||
var close = L.DomUtil.create("a", "", container);
|
||||
close.innerHTML = "Remove";
|
||||
close.href = "#";
|
||||
var stop = L.DomEvent.stopPropagation;
|
||||
|
||||
L.DomEvent
|
||||
.on(close, 'click', stop)
|
||||
.on(close, 'mousedown', stop)
|
||||
.on(close, 'dblclick', stop)
|
||||
.on(close, 'click', L.DomEvent.preventDefault)
|
||||
.on(close, 'click', function() {
|
||||
this._map.removeLayer(m);
|
||||
}, this);
|
||||
|
||||
m.bindPopup(container);
|
||||
m.addTo(this._map);
|
||||
this._map.removeLayer(this._marker);
|
||||
this._marker = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Click callback for UI
|
||||
*/
|
||||
_switchUI: function(evt) {
|
||||
L.DomEvent.stop(evt);
|
||||
L.DomEvent.stopPropagation(evt);
|
||||
L.DomEvent.preventDefault(evt);
|
||||
if (this._showsCoordinates) {
|
||||
//show textfields
|
||||
this.expand();
|
||||
} else {
|
||||
//show coordinates
|
||||
this.collapse();
|
||||
}
|
||||
},
|
||||
|
||||
onRemove: function(map) {
|
||||
map.off("mousemove", this._update, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Mousemove callback function updating labels and input elements
|
||||
*/
|
||||
_update: function(evt) {
|
||||
var pos = evt.latlng,
|
||||
opts = this.options;
|
||||
if (pos) {
|
||||
pos = pos.wrap();
|
||||
this._currentPos = pos;
|
||||
this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
|
||||
this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
|
||||
this._label.innerHTML = this._createCoordinateLabel(pos);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//construcotr registration
|
||||
L.control.coordinates = function(options) {
|
||||
return new L.Control.Coordinates(options);
|
||||
};
|
||||
|
||||
//map init hook
|
||||
L.Map.mergeOptions({
|
||||
coordinateControl: false
|
||||
});
|
||||
|
||||
L.Map.addInitHook(function() {
|
||||
if (this.options.coordinateControl) {
|
||||
this.coordinateControl = new L.Control.Coordinates();
|
||||
this.addControl(this.coordinateControl);
|
||||
}
|
||||
});L.NumberFormatter = {
|
||||
round: function (num,dec,sep) {
|
||||
var res = L.Util.formatNum(num,dec)+"",
|
||||
numbers=res.split(".");
|
||||
if (numbers[1]) {
|
||||
var d = dec-numbers[1].length;
|
||||
for (; d > 0; d--) {
|
||||
numbers[1]+="0";
|
||||
}
|
||||
res = numbers.join(sep||".");
|
||||
}
|
||||
return res;
|
||||
},
|
||||
|
||||
toDMS : function (deg) {
|
||||
var d = Math.floor (deg);
|
||||
var minfloat = (deg-d)*60;
|
||||
var m = Math.floor(minfloat);
|
||||
var secfloat = (minfloat-m)*60;
|
||||
var s = Math.round(secfloat);
|
||||
if (s==60) {
|
||||
m++;
|
||||
s="00";
|
||||
}
|
||||
if (m==60) {
|
||||
d++;
|
||||
m="00";
|
||||
}
|
||||
if(s<10) {
|
||||
s="0"+s;
|
||||
}
|
||||
if(m<10){
|
||||
m="0"+m;
|
||||
}
|
||||
return ("" + d + "° " + m + "' " + s + "''");
|
||||
},
|
||||
|
||||
createValidNumber:function(num,sep){
|
||||
if (num&&num.length>0){
|
||||
var numbers = num.split(sep||".");
|
||||
try{
|
||||
var numRes=Number(numbers.join("."));
|
||||
if(isNaN(numRes)){
|
||||
return undefined;
|
||||
}
|
||||
return numRes;
|
||||
}catch(e){
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user