jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1068 from knowname/dev

Browse source 
Show distance when drawing Polylines.
This commit is contained in:
Yohan Boniface 2023-05-02 17:45:49 +02:00 committed by GitHub
commit d87770cf9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 54 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
umap/static/umap/js/umap.controls.js
View file

@ -1198,7 +1198,7 @@ L.U.Editable = L.Editable.extend({
initialize: function (map, options) { initialize: function (map, options) {
L.Editable.prototype.initialize.call(this, map, options); L.Editable.prototype.initialize.call(this, map, options);
this.on('editable:drawing:start editable:drawing:click', this.drawingTooltip); this.on('editable:drawing:start editable:drawing:click editable:drawing:move', this.drawingTooltip);
this.on('editable:drawing:end', this.closeTooltip); this.on('editable:drawing:end', this.closeTooltip);
// Layer for items added by users // Layer for items added by users
this.on('editable:drawing:cancel', function (e) { this.on('editable:drawing:cancel', function (e) {
@ -1249,19 +1249,53 @@ L.U.Editable = L.Editable.extend({
}, },
drawingTooltip: function (e) { drawingTooltip: function (e) {
if (e.layer instanceof L.Marker && e.type != "editable:drawing:move") {
this.map.ui.tooltip({content: L._('Click to add a marker')});
}
if (!(e.layer instanceof L.Polyline)) {
// only continue with Polylines and Polygons
return;
}
var content; var content;
if (e.layer instanceof L.Marker) content = L._('Click to add a marker'); var measure;
else if (e.layer instanceof L.Polyline) { if (e.layer.editor._drawnLatLngs) {
// when drawing (a Polyline or Polygon)
if (!e.layer.editor._drawnLatLngs.length) { if (!e.layer.editor._drawnLatLngs.length) {
if (e.layer instanceof L.Polygon) content = L._('Click to start drawing a polygon'); // when drawing first point
else if (e.layer instanceof L.Polyline) content = L._('Click to start drawing a line'); if (e.layer instanceof L.Polygon){
} else if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) { content = L._('Click to start drawing a polygon');
content = L._('Click to continue drawing'); } else if (e.layer instanceof L.Polyline) {
content = L._('Click to start drawing a line');
}
} else { } else {
content = L._('Click last point to finish shape'); var tmpLatLngs = e.layer.editor._drawnLatLngs.slice();
tmpLatLngs.push(e.latlng);
measure = e.layer.getMeasure(tmpLatLngs);
if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
// when drawing second point
content = L._('Click to continue drawing');
} else {
// when drawing third point (or more)
content = L._('Click last point to finish shape');
}
content += ", "
}
} else {
// when moving an existing point
measure = e.layer.getMeasure();
}
if (measure){
if (e.layer instanceof L.Polygon){
content = L._('Polygon area: {measure}', { measure: measure });
} else if (e.layer instanceof L.Polyline) {
content = L._('Line length: {measure}', { measure: measure });
} }
} }
if (content) this.map.ui.tooltip({content: content}); if (content) {
this.map.ui.tooltip({content: content});
}
}, },
closeTooltip: function () { closeTooltip: function () {

8
umap/static/umap/js/umap.features.js
View file

@ -853,8 +853,8 @@ L.U.Polyline = L.Polyline.extend({
return 'polyline'; return 'polyline';
}, },
getMeasure: function () { getMeasure: function (shape) {
var length = L.GeoUtil.lineLength(this.map, this._defaultShape()); var length = L.GeoUtil.lineLength(this.map, shape || this._defaultShape());
return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit()); return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit());
}, },
@ -1004,8 +1004,8 @@ L.U.Polygon = L.Polygon.extend({
return options.concat(L.U.FeatureMixin.getInteractionOptions()); return options.concat(L.U.FeatureMixin.getInteractionOptions());
}, },
getMeasure: function () { getMeasure: function (shape) {
var area = L.GeoUtil.geodesicArea(this._defaultShape()); var area = L.GeoUtil.geodesicArea(shape || this._defaultShape());
return L.GeoUtil.readableArea(area, this.map.measureTools.getMeasureUnit()); return L.GeoUtil.readableArea(area, this.map.measureTools.getMeasureUnit());
}, },