commit ea0617233566f1bbdc1a9abe330be7448cfd7082
parent cf57a9f441beef9099fb510cc9acf2c85d8d8d6f
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Fri, 24 Mar 2017 11:26:20 +0300
[azimuths] changed markers design
Diffstat:
4 files changed, 31 insertions(+), 52 deletions(-)
diff --git a/src/lib/leaflet.control.azimuth/index.js b/src/lib/leaflet.control.azimuth/index.js
@@ -7,7 +7,8 @@ import './style.css';
import {getDeclination} from 'lib/magnetic-declination';
//FIXME: replace with vendored version
import 'leaflet-rotatedmarker';
-import iconPointerStart from './pointer.svg';
+import iconPointer from './pointer.svg';
+import iconPointerStart from './pointer-start.svg';
import iconPointerEnd from './pointer-end.svg';
import 'lib/leaflet.control.elevation-profile';
@@ -60,9 +61,13 @@ L.Control.Azimuth = L.Control.extend({
start: null,
end: null
};
- const iconStart = L.icon({iconUrl: iconPointerStart, iconSize: [30, 30]});
- const iconEnd = L.icon({iconUrl: iconPointerEnd, iconSize: [30, 30]});
+ const iconSingle = L.icon({iconUrl: iconPointer, iconSize: [30, 30]});
+ const iconStart = L.icon({iconUrl: iconPointerStart, iconSize: [40, 40]});
+ const iconEnd = L.icon({iconUrl: iconPointerEnd, iconSize: [40, 40]});
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'})
.on('drag', this.onMarkerDrag, this)
.on('click', L.DomEvent.stopPropagation),
@@ -122,31 +127,29 @@ L.Control.Azimuth = L.Control.extend({
setPoints: function(points) {
Object.assign(this.points, points);
points = this.points;
- if (points.start) {
- this.markers.start
+ if (points.start && !points.end) {
+ this.markers.single
.setLatLng(points.start)
.addTo(this._map);
} else {
- this.markers.start.removeFrom(this._map);
- }
- if (points.end) {
- this.markers.end
- .setLatLng(points.end)
- .addTo(this._map);
- } else {
- this.markers.end.removeFrom(this._map);
+ this.markers.single.removeFrom(this._map);
}
if (points.start && points.end) {
const angle = calcAngle(points.start, points.end);
this.markers.start
+ .setLatLng(points.start)
+ .addTo(this._map)
.setRotationAngle(angle);
this.markers.end
+ .setLatLng(points.end)
+ .addTo(this._map)
.setRotationAngle(angle);
this.azimuthLine
.setLatLngs([[points.start, points.end]])
.addTo(this._map);
} else {
- this.markers.start.setRotationAngle(0);
+ this.markers.start.removeFrom(this._map);
+ this.markers.end.removeFrom(this._map);
this.azimuthLine.removeFrom(this._map);
}
this.updateValuesDisplay();
diff --git a/src/lib/leaflet.control.azimuth/pointer-end.svg b/src/lib/leaflet.control.azimuth/pointer-end.svg
@@ -1,18 +1,10 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 30 30" xml:space="preserve">
-<defs>
- <radialGradient id="grad1">
- <stop offset="20%" stop-color="#ff0000" stop-opacity="0.6"/>
- <stop offset="75%" stop-color="#ff0000" stop-opacity="0.3"/>
- <stop offset="100%" stop-color="#ff0000" stop-opacity="0"/>
- </radialGradient>
- </defs>
-
+ viewBox="0 0 40 40" xml:space="preserve">
<g>
- <ellipse ry="15" rx="15" id="svg_1" cy="15" cx="15" fill="url(#grad1)"/>
- <line x1="15" y1="15" x2="22" y2="25" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="15" x2="8" y2="25" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="15" x2="15" y2="30" stroke="#3388ff" stroke-width="1.5"/>
+ <ellipse ry="15" rx="15" id="svg_1" cy="24.5" cx="20" fill="#777" fill-opacity="0.5"/>
+ <line x1="20" y1="20" x2="25" y2="30" stroke="#3388ff" stroke-width="2"/>
+ <line x1="20" y1="20" x2="15" y2="30" stroke="#3388ff" stroke-width="2"/>
+ <line x1="20" y1="20" x2="20" y2="40" stroke="#3388ff" stroke-width="1.5"/>
</g>
</svg>
\ No newline at end of file
diff --git a/src/lib/leaflet.control.azimuth/pointer-start.svg b/src/lib/leaflet.control.azimuth/pointer-start.svg
@@ -1,19 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 30 30" xml:space="preserve">
-<defs>
- <radialGradient id="grad1">
- <stop offset="20%" stop-color="#ff0000" stop-opacity="0.6"/>
- <stop offset="75%" stop-color="#ff0000" stop-opacity="0.3"/>
- <stop offset="100%" stop-color="#ff0000" stop-opacity="0"/>
- </radialGradient>
- </defs>
-
+ viewBox="0 0 40 40" xml:space="preserve">
<g>
- <ellipse ry="15" rx="15" id="svg_1" cy="15" cx="15" fill="url(#grad1)"/>
+ <ellipse ry="15" rx="15" id="svg_1" cy="22" cx="20" fill="#777" fill-opacity="0.5"/>
+
+ <line x1="20" y1="20" x2="23" y2="24" stroke="#3388ff" stroke-width="1.5"/>
+ <line x1="20" y1="20" x2="17" y2="24" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="15" x2="22" y2="25" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="15" x2="8" y2="25" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="15" x2="15" y2="0" stroke="#3388ff" stroke-width="1.5"/>
+ <line x1="20" y1="20" x2="20" y2="0" stroke="#3388ff" stroke-width="1.5"/>
</g>
</svg>
\ No newline at end of file
diff --git a/src/lib/leaflet.control.azimuth/pointer.svg b/src/lib/leaflet.control.azimuth/pointer.svg
@@ -1,18 +1,9 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" xml:space="preserve">
-<defs>
- <radialGradient id="grad1">
- <stop offset="20%" stop-color="#ff0000" stop-opacity="0.6"/>
- <stop offset="75%" stop-color="#ff0000" stop-opacity="0.3"/>
- <stop offset="100%" stop-color="#ff0000" stop-opacity="0"/>
- </radialGradient>
- </defs>
-
<g>
- <ellipse ry="15" rx="15" id="svg_1" cy="15" cx="15" fill="url(#grad1)"/>
-
- <line x1="5" y1="15" x2="25" y2="15" stroke="#3388ff" stroke-width="1.5"/>
- <line x1="15" y1="5" x2="15" y2="25" stroke="#3388ff" stroke-width="1.5"/>
+ <ellipse ry="15" rx="15" id="svg_1" cy="15" cx="15" fill="#777" fill-opacity="0.5"/>
+ <line x1="12" y1="12" x2="18" y2="18" stroke="#3388ff" stroke-width="1.5"/>
+ <line x1="12" y1="18" x2="18" y2="12" stroke="#3388ff" stroke-width="1.5"/>
</g>
</svg>
\ No newline at end of file
