finish work on polyline

* add legend

projects/project-3/frontend/src/app/service/map.service.ts

@@ -6,14 +6,13 @@ import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
 import {PopUpService} from './pop-up.service';
 import {IMapBikePoint} from './domain/map-bike-point';
-import {Router} from '@angular/router';
 import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point';
 
 
 const createIcon = color => L.icon({
   iconUrl: `../../assets/bike-point-${color}.png`,
   iconSize: [45, 45],
-  iconAnchor: [21, 40],
+  iconAnchor: [23, 36],
   popupAnchor: [1, -35]
 });
 
@@ -28,13 +27,15 @@ export class MapService {
   mapOverlays: any = {};
   miniMapMarker: L.layerGroup;
   markerLayer = [];
+  polylineLayer = [];
   dashBoardMarker = L.marker;
+  dashBoardBikePoint: IDashboardCommonBikePoint;
   layerControl = L.control(null);
+  legend = L.control({position: 'bottomleft'});
 
   constructor(
     private client: HttpClient,
-    private popUpService: PopUpService,
+    private popUpService: PopUpService
-    private router: Router
   ) {
   }
 
@@ -140,34 +141,56 @@ export class MapService {
   }
 
   public drawDashboardStationMarker(station: IDashboardCommonBikePoint): void {
+    this.dashBoardBikePoint = station;
     this.dashBoardMarker = L.marker([station.lat, station.lon], {icon: createIcon('blue')}).addTo(this.miniMap);
     this.dashBoardMarker.on('mouseover', e => e.target.bindPopup(`<p>${station.commonName}</p>`).openPopup());
     this.dashBoardMarker.on('mouseout', e => e.target.closePopup());
   }
 
-  public removeTableStationMarkerOnReload(): void {
-    if (this.markerLayer) {
-      this.markerLayer.forEach(marker => {
-        this.miniMap.removeLayer(marker);
-      });
-      this.markerLayer = [];
-    }
-  }
-
   public drawTableStationMarker(bikePoints: any[]): void {
-    if (this.markerLayer) {
+    this.removeOverlayOnMiniMap();
-      this.markerLayer.forEach(marker => {
-        this.miniMap.removeLayer(marker);
-      });
-      this.markerLayer = [];
-    }
     for (const point of bikePoints) {
       const marker = L.marker([point.stationLat, point.stationLon], {icon: createIcon(point.color)}).addTo(this.miniMap);
       marker.on('mouseover', e => e.target.bindPopup(`<p>${point.stationName}</p>`).openPopup());
       marker.on('mouseout', e => e.target.closePopup());
+      this.drawLineOnMiniMap(marker, point);
       this.markerLayer.push(marker);
       this.miniMap.fitBounds(L.featureGroup([...this.markerLayer, this.dashBoardMarker]).getBounds());
     }
+    this.drawLegend();
+  }
+
+  drawLegend(): void {
+    this.legend.onAdd = map => {
+      const div = L.DomUtil.create('div', 'legend');
+      div.innerHTML += `<h4>trips from/to bike station</h4>`;
+      div.innerHTML += `<i style="background: red"></i><span>rents with ${this.dashBoardBikePoint.commonName} as destination</span><br>`;
+      div.innerHTML += `<i style="background: green"></i><span>rents with ${this.dashBoardBikePoint.commonName} as start</span><br>`;
+      div.innerHTML += `<i style="background: blue"></i><span>rents with ${this.dashBoardBikePoint.commonName} as destination and start</span>`;
+      return div;
+    };
+    this.legend.addTo(this.miniMap);
+  }
+
+  public removeOverlayOnMiniMap(): void {
+    if (this.markerLayer) {
+      this.markerLayer.forEach(marker => {
+        this.miniMap.removeLayer(marker);
+      });
+      this.markerLayer = [];
+      this.polylineLayer.forEach(polyline => {
+        this.miniMap.removeLayer(polyline);
+      });
+      this.polylineLayer = [];
+    }
+    this.legend.remove();
+  }
+
+  private drawLineOnMiniMap(marker: L.marker, bikePoint: any): void {
+    const latlngs = [];
+    latlngs.push(this.dashBoardMarker.getLatLng());
+    latlngs.push(marker.getLatLng());
+    this.polylineLayer.push(L.polyline(latlngs, {color: bikePoint.polyLineColor}).addTo(this.miniMap));
   }
 
   private drawMapControl(): void {

projects/project-3/frontend/src/styles.scss

@@ -11,3 +11,36 @@ body {
 @import "~leaflet/dist/leaflet.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+.legend {
+  padding: 6px 8px;
+  font: 14px Arial, Helvetica, sans-serif;
+  background: white;
+  background: rgba(255, 255, 255, 0.8);
+  line-height: 24px;
+  color: #555;
+}
+.legend h4 {
+  text-align: center;
+  font-size: 16px;
+  margin: 2px 12px 8px;
+  color: #777;
+}
+
+.legend span {
+  position: relative;
+  bottom: 3px;
+}
+
+.legend i {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin: 0 8px 0 0;
+  opacity: 0.7;
+}
+
+.legend i.icon {
+  background-size: 18px;
+  background-color: rgba(255, 255, 255, 1);
+}