S
S
sdgroup142018-04-19 10:07:32
Angular
sdgroup14, 2018-04-19 10:07:32

How to create a group of routes (Route-machine) in Angular2+ leaflet?

I connected the leaflet map, configured the markers, learned how to manage the collection of markers, delete, add, etc. But now the task has become to build routes for the car. In fact, it turned out ... But I need to display dozens of routes and then add or delete them in the same way ... Below I will give an example of a working code for 1 route, how can I make a collection of them?

buildRoutes(cars) {
    let waypoints = [
      L.latLng(cars[0].events[0].lat_start, cars[0].events[0].lon_start),
      L.latLng(cars[0].events[0].lat_end, cars[0].events[0].lon_end)
    ];

    let route = L.Routing.control({
      waypoints: waypoints,
      lineOptions: {
        linetouched: false,
        addWaypoints: true,
        styles: [
          {
            color: 'red',
            opacity: 1,
            weight: 5,
            className: 'staticRoute',
          }
        ]
      }
    }).addTo(this.map);
  };

I'd like to format this code so it works like Markers :). I can't google how to create the same thing as with Markers. The marker code is shown below.
public layers: Marker[] = [];
  
  buildMarkers(cars) {
    for (const i in cars) {
      let lat: number = cars[i].coordinates.lat;
      let lon: number = cars[i].coordinates.lon;
      const pin = cars[i].pin;
      const singleMarkers = new Marker([lat, lon], {
        icon: new DivIcon({
          className: 'my-div-icon',
          html: this.getHtmlMarker(cars, pin)
        })
      });
      this.layers.push(singleMarkers);
    }
  }

  public mapReady(map) {
    this.map = map;
    const that = this;
    that.buildMarkers(this.cars);
  }

<div class="map"
       leaflet
       (leafletMapReady)="mapReady($event)"
       [leafletOptions]="mapOptions"
  >
    <div class="pit-marker" *ngFor=" let l of layers "  [leafletLayer]="l"></div>
 </div>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question