start marker

src/components/dialogs/GpxDialog.tsx

@@ -111,6 +111,20 @@ const GpxDialogUnconnected: FC<Props> = ({
 
   return (
     <div className="control-dialog control-dialog__left control-dialog__small">
+      {false && (
+        <div className="gpx-confirm">
+          <div className="gpx-confirm__text">Маршрут уже нанесен. Что делаем?</div>
+
+          <div className="gpx-confirm__buttons">
+            <div className="button success">Соединить</div>
+
+            <div className="button danger">Переписать</div>
+
+            <div className="button primary">Отмена</div>
+          </div>
+        </div>
+      )}
+
       <div className="gpx-title">
         <div className="flex_1 big white upper">Треки</div>
         <Switch active={gpx.enabled} onPress={toggleGpx} />

src/components/gpx/GpxDialogRow.tsx

@@ -25,6 +25,7 @@ const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocus
       </div>
 
       <div className="gpx-row__buttons">
+        <div onClick={() => onRouteDrop(index)}><Icon icon="icon-to-poly" size={24} /></div>
         <div onClick={() => onRouteDrop(index)}><Icon icon="icon-trash-6" size={24} /></div>
         <div><Switch active={item.enabled} onPress={() => onRouteToggle(index)}/></div>
       </div>

src/sprites/icon.svg

@@ -402,7 +402,24 @@
 					<path d="M24.754 6.33H4.844V2.762h19.91z" />
 				</g>
 			</g>
+			<g id="icon-to-poly" stroke="none">
+				<path d="M0 0h32v32H0z" fill="black" />
+				<path d="M7.924 12.991l8.569-4.989-6.55 14.587 13.762-7.974-3.958 9.12" fill="none" stroke="#fff" stroke-width="2.387" stroke-linejoin="round"/>
+				<circle transform="rotate(75)" r="2.387" cy="-4.523" cx="14.711" fill="#fff"/>
+				<circle transform="rotate(75)" r="2.387" cy="-13.883" cx="12.17" fill="#fff"/>
+				<circle transform="rotate(75)" r="2.387" cy="-19.194" cx="20.342" fill="#fff"/>
+				<circle transform="rotate(75)" cx="24.138" cy="-3.701" r="5.48" fill="black" />
+				<circle transform="rotate(75)" cx="27.918" cy="-13.025" r="2.387" fill="#fff"/>
+
+				<path d="M8.224 18.144v3.132H2.357v3.891h5.867v3.012l5.86-5.077z"/>
+			</g>
+
+			<g id="icon-start">
+				<path d="M15.646 2.959a12.688 12.688 0 00-8 2.85v1.837h8zm0 4.687v8h8v-8zm8 0h1.838a12.688 12.688 0 00-1.838-1.835zm0 8v8h1.836a12.688 12.688 0 002.852-8zm0 8h-8v4.688a12.688 12.688 0 008-2.85zm-8 0v-8h-8v8zm-8 0H5.81a12.688 12.688 0 001.837 1.836zm0-8v-8H5.811a12.688 12.688 0 00-2.852 8z" fill="#fff"/>
+				<path d="M15.646 0A15.646 15.646 0 000 15.646a15.646 15.646 0 0015.646 15.647 15.646 15.646 0 0015.647-15.647A15.646 15.646 0 0015.646 0zm0 3.24a12.407 12.407 0 0112.408 12.406 12.407 12.407 0 01-12.408 12.408A12.407 12.407 0 013.24 15.646 12.407 12.407 0 0115.646 3.24z" fill="#fff"/>
+			</g>
 		</svg>
 	</defs>
+
 	<use xlink:href="#icon-trash-6" />
 </svg>

src/sprites/icons_draft.svg

@@ -48,11 +48,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="5.6568542"
+     inkscape:zoom="1"
-     inkscape:cx="7.5044641"
+     inkscape:cx="47.453778"
-     inkscape:cy="20.369143"
+     inkscape:cy="21.541153"
      inkscape:document-units="px"
-     inkscape:current-layer="svg8"
+     inkscape:current-layer="g4843"
      showgrid="false"
      inkscape:window-width="1920"
      inkscape:window-height="1015"
@@ -61,7 +61,11 @@
      inkscape:window-maximized="1"
      units="px"
      inkscape:showpageshadow="false"
-     inkscape:snap-global="true" />
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4953" />
+  </sodipodi:namedview>
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -662,17 +666,6 @@
        transform="matrix(2,0,0,2,128,98.814754)"
        id="path8777" />
   </g>
-  <g
-     id="g6599-3"
-     style="fill:#1a1a1a">
-    <rect
-       y="0"
-       x="0"
-       height="32"
-       width="32"
-       id="rect6597-6"
-       style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
-  </g>
   <g
      id="g2523"
      transform="translate(-352)">
@@ -742,29 +735,152 @@
      d="m -398.03987,8.959327 c 0.96726,6.15e-5 2.83931,0.419056 2.83931,0.419056 l 0.81565,-1.6970847 2.25681,4.8545537 -5.09396,1.335474 0.77693,-1.937748 c 0,0 -1.10109,-0.113536 -1.59474,-0.114876 -3.85069,4.73e-4 -6.97217,3.12196 -6.97265,6.972656 10e-4,1.212906 0.31917,2.404467 0.92188,3.457031 l -2.07031,2.070313 c -1.11178,-1.629145 -1.70791,-3.554996 -1.71094,-5.527344 2.9e-4,-5.429961 4.40206,-9.8317428 9.83202,-9.832031 z"
      style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.13512897;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
   <g
-     id="g1083"
+     id="g4695"
-     transform="rotate(-180,16.23592,15.944757)">
+     transform="translate(-448)">
     <g
-       style="fill:#ffffff"
+       style="fill:#1a1a1a"
-       transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
+       id="g6599-3">
-       id="g1065">
+      <g
-      <path
+         id="g4685">
-         sodipodi:nodetypes="cccc"
+        <rect
-         inkscape:connector-curvature="0"
+           y="0"
-         id="path1061"
+           x="0"
-         d="m 21.578609,12.373297 4.755161,4.023589 -4.755161,4.119332 c 0,-2.714307 0,-5.428614 0,-8.142921 z"
+           height="32"
-         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.25750196;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           width="32"
+           id="rect6597-6"
+           style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
+      </g>
     </g>
     <g
-       id="g1073"
+       transform="rotate(-180,16.23592,15.944757)"
-       transform="translate(-6.0736195,-0.5)"
+       id="g1083">
-       style="fill:#ffffff">
+      <g
+         id="g1065"
+         transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
+         style="fill:#ffffff">
+        <path
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.25750196;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 21.578609,12.373297 4.755161,4.023589 -4.755161,4.119332 c 0,-2.714307 0,-5.428614 0,-8.142921 z"
+           id="path1061"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccc" />
+      </g>
+      <g
+         style="fill:#ffffff"
+         transform="translate(-6.0736195,-0.5)"
+         id="g1073">
+        <path
+           sodipodi:nodetypes="ccccc"
+           inkscape:connector-curvature="0"
+           id="path1075"
+           d="M 9.9326117,14.715588 H 29.84292 v 3.568824 H 9.9326117 Z"
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.93824887;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+  <g
+     id="g4682">
+    <g
+       id="g4668"
+       transform="matrix(0.625,0,0,0.625,6,6)"
+       style="stroke:#ff5555" />
+    <g
+       id="g4796">
+      <g
+         id="g4666">
+        <rect
+           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
+           id="rect4664"
+           width="32"
+           height="32"
+           x="0"
+           y="0" />
+      </g>
       <path
-         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.93824887;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.38667011;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="M 9.9326117,14.715588 H 29.84292 v 3.568824 H 9.9326117 Z"
+         d="M 7.9242274,12.99117 16.492872,8.0023269 9.942466,22.589067 l 13.7628,-7.974199 -3.958059,9.120045"
-         id="path1075"
+         id="path4670"
          inkscape:connector-curvature="0"
          sodipodi:nodetypes="ccccc" />
+      <circle
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="circle4672"
+         cx="14.711287"
+         cy="-4.5232019"
+         r="2.3866701"
+         transform="rotate(75)" />
+      <circle
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="circle4674"
+         cx="12.170312"
+         cy="-13.883187"
+         r="2.3866701"
+         transform="rotate(75)" />
+      <circle
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="circle4676"
+         cx="20.342056"
+         cy="-19.193758"
+         r="2.3866701"
+         transform="rotate(75)" />
+      <circle
+         r="5.4802623"
+         cy="-3.7006412"
+         cx="24.137783"
+         id="circle4678"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:12.17835999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="rotate(75)" />
+      <circle
+         r="2.3866701"
+         cy="-13.024511"
+         cx="27.917694"
+         id="circle4680"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="rotate(75)" />
+      <g
+         id="g1083-3"
+         transform="matrix(1.090411,0,0,1.090411,-1.8505759,5.7746519)">
+        <g
+           style="fill:#ffffff"
+           transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
+           id="g1065-6">
+          <path
+             sodipodi:nodetypes="cccccccc"
+             inkscape:connector-curvature="0"
+             id="path1061-7"
+             transform="matrix(0.88486562,0,0,0.88486562,2.9520467,-5.4157756)"
+             d="m 7.050781,20.103516 v 2.873046 H 1.6699219 v 3.56836 H 7.050781 v 2.761719 l 5.373047,-4.65625 z"
+             style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42112195;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <g
+           id="g1073-5"
+           transform="translate(-6.0736195,-0.5)"
+           style="fill:#ffffff" />
+      </g>
+    </g>
+    <g
+       id="g4843"
+       transform="translate(32)">
+      <g
+         id="g4821">
+        <rect
+           y="0"
+           x="0"
+           height="32"
+           width="32"
+           id="rect4819"
+           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
+      </g>
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.06614583;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
+         d="M 48 3.3125 A 12.6875 12.6875 0 0 0 40 6.1621094 L 40 8 L 48 8 L 48 3.3125 z M 48 8 L 48 16 L 56 16 L 56 8 L 48 8 z M 56 8 L 57.837891 8 A 12.6875 12.6875 0 0 0 56 6.1640625 L 56 8 z M 56 16 L 56 24 L 57.835938 24 A 12.6875 12.6875 0 0 0 60.6875 16 L 56 16 z M 56 24 L 48 24 L 48 28.6875 A 12.6875 12.6875 0 0 0 56 25.837891 L 56 24 z M 48 24 L 48 16 L 40 16 L 40 24 L 48 24 z M 40 24 L 38.162109 24 A 12.6875 12.6875 0 0 0 40 25.835938 L 40 24 z M 40 16 L 40 8 L 38.164062 8 A 12.6875 12.6875 0 0 0 35.3125 16 L 40 16 z "
+         transform="translate(-32)"
+         id="rect4845" />
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.97790289;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 16,0.35355339 A 15.646447,15.646447 0 0 0 0.35355339,16 15.646447,15.646447 0 0 0 16,31.646447 15.646447,15.646447 0 0 0 31.646447,16 15.646447,15.646447 0 0 0 16,0.35355339 Z M 16,3.5928568 A 12.407143,12.407143 0 0 1 28.407143,16 12.407143,12.407143 0 0 1 16,28.407143 12.407143,12.407143 0 0 1 3.5928568,16 12.407143,12.407143 0 0 1 16,3.5928568 Z"
+         id="path4930"
+         inkscape:connector-curvature="0" />
     </g>
   </g>
 </svg>

src/styles/gpx.less

@@ -84,3 +84,16 @@
     justify-content: center;
   }
 }
+
+.gpx-confirm {
+  position: absolute;
+  bottom: 5%;
+  left: 5%;
+  z-index: 5;
+  width: 90%;
+  padding: 10px;
+  border-radius: @panel_radius;
+  box-sizing: border-box;
+  background: lighten(@bar_background, 10%);
+  box-shadow: rgba(0,0,0,0.5) 0 5px 5px 10px;
+}

src/styles/map.less

@@ -150,6 +150,14 @@
   }
 }
 
+.start-marker {
+  svg {
+    position: absolute;
+    left: -4px;
+    top: -4px;
+  }
+}
+
 .end-marker {
   .leaflet-km-dist {
     left: auto;

src/utils/map/InteractivePoly.ts

@@ -140,7 +140,7 @@ class InteractivePoly extends Polyline {
   };
 
   hideAllMarkers = (): void => {
-    if (!this._map.hasLayer(this.markerLayer)) return;
+    if (!this._map || !this._map.hasLayer(this.markerLayer)) return;
 
     this._map.removeLayer(this.markerLayer);
     this.fire('allvertexhide');

src/utils/marks.ts

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 const arrow_image = require('~/sprites/arrow.svg');
 
 interface KmMarksOptions {
+  showStartMarker: boolean;
   showMiddleMarkers: boolean;
   showEndMarker: boolean;
   showArrows: boolean;
@@ -17,6 +18,7 @@ class KmMarksLayer extends LayerGroup {
     super();
 
     this.options = {
+      showStartMarker: true,
       showMiddleMarkers: true,
       showEndMarker: true,
       showArrows: true,
@@ -120,6 +122,25 @@ class KmMarksLayer extends LayerGroup {
       zIndexOffset: -100,
     });
 
+  createStartMarker = (latlng: LatLngLiteral): Marker =>
+    marker(latlng, {
+      draggable: false,
+      interactive: false,
+      icon: divIcon({
+        html: `
+          <svg width="20" height="20" viewBox="0 0 32 32">
+            <circle r="16" cx="16" cy="16" fill="red" />
+            <circle r="13" cx="16" cy="16" fill="white" />
+            <circle r="9" cx="16" cy="16" fill="red" />
+          </svg>
+      `,
+        className: classNames('leaflet-km-marker start-marker'),
+        iconSize: [20, 20],
+        iconAnchor: [6, 6],
+      }),
+      zIndexOffset: -100,
+    });
+
   drawEndMarker = (latlngs: LatLngLiteral[]): void => {
     this.endMarker.clearLayers();
 
@@ -132,6 +153,9 @@ class KmMarksLayer extends LayerGroup {
     );
 
     this.endMarker.addLayer(this.createEndMarker(next, angle, this.distance));
+    if (latlngs && latlngs.length) {
+      this.endMarker.addLayer(this.createStartMarker(latlngs[0]));
+    }
   };
 
   options: KmMarksOptions;