commit 469efb7cfc3319dc4e99bf061df05f6dc1067775
parent 2fb5fa2d8d25dd07699ac67d6d077e116dac6a7b
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Thu, 1 Nov 2018 22:09:00 +0100
make markers use shift of line in polyline-edit, polyline-measure, azimuth
Diffstat:
4 files changed, 67 insertions(+), 24 deletions(-)
diff --git a/src/lib/leaflet.control.azimuth/index.js b/src/lib/leaflet.control.azimuth/index.js
@@ -65,20 +65,32 @@ L.Control.Azimuth = L.Control.extend({
const iconSingle = L.icon({iconUrl: iconPointer, iconSize: [30, 30]});
const iconStart = L.icon({iconUrl: iconPointerStart, iconSize: [30, 30]});
const iconEnd = L.icon({iconUrl: iconPointerEnd, iconSize: [30, 45]});
+ this.azimuthLine = L.polyline([], {interactive: false, weight: 1.5});
this.markers = {
single: L.marker([0, 0], {icon: iconSingle, draggable: true, which: 'start'})
.on('drag', this.onMarkerDrag, this)
.on('click', L.DomEvent.stopPropagation),
- start: L.marker([0, 0], {icon: iconStart, draggable: true, which: 'start', rotationOrigin: 'center center'})
+ start: L.marker([0, 0], {
+ icon: iconStart,
+ draggable: true,
+ which: 'start',
+ rotationOrigin: 'center center',
+ projectedShift: () => this.azimuthLine.shiftProjectedFitMapView()
+ })
.on('drag', this.onMarkerDrag, this)
.on('click', L.DomEvent.stopPropagation)
.on('dragend', this.onMarkerDragEnd, this),
- end: L.marker([0, 0], {icon: iconEnd, draggable: true, which: 'end', rotationOrigin: 'center center'})
+ end: L.marker([0, 0], {
+ icon: iconEnd,
+ draggable: true,
+ which: 'end',
+ rotationOrigin: 'center center',
+ projectedShift: () => this.azimuthLine.shiftProjectedFitMapView()
+ })
.on('drag', this.onMarkerDrag, this)
.on('click', L.DomEvent.stopPropagation)
.on('dragend', this.onMarkerDragEnd, this)
};
- this.azimuthLine = L.polyline([], {interactive: false, weight: 1.5});
},
onAdd: function(map) {
diff --git a/src/lib/leaflet.fixes/fixWorldCopyJump.js b/src/lib/leaflet.fixes/fixWorldCopyJump.js
@@ -15,16 +15,10 @@ function wrapLongitudeToTarget(latLng, targetLatLng) {
}
function fixVectorMarkerWorldJump() {
- // Shift line points longitude by +360 or -360, to minimize distance between line center and map view center
- // Longitude is changed only for display, longitude of pints is not changed
- // Breaks dipslay of lines spanning more then one world copy
- L.Polyline.prototype._projectLatlngs = function(latlngs, result, projectedBounds) {
- var flat = latlngs[0] instanceof L.LatLng,
- len = latlngs.length,
- i, ring;
+ L.Polyline.prototype.shiftProjectedFitMapView = function() {
const polylineBounds = this.getBounds();
- let shift = 0;
- if (polylineBounds.isValid()) {
+ let shift = null;
+ if (this._map && polylineBounds.isValid()) {
const worldWidth = this._map.getPixelWorldBounds().getSize().x;
const polylineCenter = polylineBounds.getCenter();
const mapCenter = this._map.getCenter();
@@ -33,8 +27,28 @@ function fixVectorMarkerWorldJump() {
shift = worldWidth
} else if (polylineCenter.lng > mapCenter.lng + 180) {
shift = -worldWidth;
+ } else {
+ shift = 0;
}
}
+ return shift;
+ };
+
+
+ // Shift line points longitude by +360 or -360, to minimize distance between line center and map view center
+ // Longitude is changed only for display, longitude of pints is not changed
+ // Breaks dipslay of lines spanning more then one world copy
+ L.Polyline.prototype._projectLatlngs = function(latlngs, result, projectedBounds) {
+ var flat = latlngs[0] instanceof L.LatLng,
+ len = latlngs.length,
+ i, ring;
+ let shift = null;
+ if (this.options.projectedShift) {
+ shift = this.options.projectedShift();
+ }
+ if (shift === null) {
+ shift = this.shiftProjectedFitMapView();
+ }
if (flat) {
ring = [];
@@ -57,14 +71,23 @@ function fixVectorMarkerWorldJump() {
// Breaks display of markers with huge longitudes like 750 (can be displayed only at zoom levels 0 or 1)
L.Marker.prototype.update = function() {
if (this._icon) {
- const mapCenter = this._map.getCenter();
- const worldWidth = this._map.getPixelWorldBounds().getSize().x;
var pos = this._map.latLngToLayerPoint(this._latlng).round();
- if (this._latlng.lng < mapCenter.lng - 180) {
- pos.x += worldWidth
- } else if (this._latlng.lng > mapCenter.lng + 180) {
- pos.x -= worldWidth;
+ let shift = null;
+ if (this.options.projectedShift) {
+ shift = this.options.projectedShift();
+ }
+ if (shift === null) {
+ const mapCenter = this._map.getCenter();
+ const worldWidth = this._map.getPixelWorldBounds().getSize().x;
+ if (this._latlng.lng < mapCenter.lng - 180) {
+ shift = worldWidth;
+ } else if (this._latlng.lng > mapCenter.lng + 180) {
+ shift = -worldWidth;
+ } else {
+ shift = 0;
+ }
}
+ pos.x += shift;
this._setPos(pos);
}
diff --git a/src/lib/leaflet.polyline-edit/index.js b/src/lib/leaflet.polyline-edit/index.js
@@ -197,11 +197,10 @@ L.Polyline.EditMixin = {
makeNodeMarker: function(nodeIndex) {
var node = this.getLatLngs()[nodeIndex],
marker = L.marker(node.clone(), {
- icon: L.divIcon(
- {className: 'line-editor-node-marker-halo', 'html': '<div class="line-editor-node-marker"></div>'}
- ),
+ icon: L.divIcon({className: 'line-editor-node-marker-halo', 'html': '<div class="line-editor-node-marker"></div>'}),
draggable: true,
- zIndexOffset: this._nodeMarkersZOffset
+ zIndexOffset: this._nodeMarkersZOffset,
+ projectedShift: () => this.shiftProjectedFitMapView()
}
);
marker
@@ -248,7 +247,11 @@ L.Polyline.EditMixin = {
if (!p2) {
return;
}
- const segmentOverlay = L.polyline([p1, p2], {weight: 10, opacity: 0.0});
+ const segmentOverlay = L.polyline([p1, p2], {
+ weight: 10,
+ opacity: 0.0,
+ projectedShift: () => this.shiftProjectedFitMapView()
+ });
segmentOverlay.on('mousedown', this.onSegmentMouseDownAddNode, this);
segmentOverlay.on('contextmenu', function(e) {
this.stopDrawingLine();
diff --git a/src/lib/leaflet.polyline-measure/index.js b/src/lib/leaflet.polyline-measure/index.js
@@ -70,7 +70,12 @@ L.MeasuredLine = L.Polyline.extend({
className: 'measure-tick-icon'
}
);
- marker = L.marker(tick.position, {icon: icon, interactive: false, keyboard: false});
+ marker = L.marker(tick.position, {
+ icon: icon,
+ interactive: false,
+ keyboard: false,
+ projectedShift: () => this.shiftProjectedFitMapView(),
+ });
marker.addTo(this._map);
}
this._ticks[tick.distanceValue.toString()] = marker;
