is there a way to prevent Here maps from removing all the polyline & objects instead of just removing the marker and showing the new ones

Question

The problem is like this. When the user clicks on a traceroute link in our app it opens a popup with here maps, showing the polyline with multiple markers in it. And on the same popup there is another table that has a map icon, when clicked shows only one marker in the here maps. The problem is both the multiple markers and single marker are showing properly initially(first time) but when i press the map icon that just shows only one marker for the second marker to be shown the removeObjects get called and it removes all the polyline and the markers that was previously shown(good) but then it stops showing the new marker and the previously passed polyline in the map(hence the problem to come here). can anybody help me solve this challenge.

 addMarkerToGroup(group, coordinate, html) {
    this.marker1 = new H.map.Marker(coordinate);
     
    // var marker = new H.map.Marker(coordinate);
    // add custom data to the marker
    this.marker1.setData(html);
    group.addObject(this.marker1);
  }
  addInfoBubble(map,data1,ui) {
    for (let i = 0; i < data1.length; i++ ) {
    var group = new H.map.Group();
  
    map.addObject(group);
  
    // add 'tap' event listener, that opens info bubble, to the group
    group.addEventListener('tap', function (evt) {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
      });
      // show info bubble
      ui.addBubble(bubble);
    }, false);
    
    this.addMarkerToGroup(group, {lat: data1[i].start_latitude, lng: data1[i].start_longitude},
      '' +data1[i].stop_address+
      '');
    }

  }
  addInfoBubble1(map,data1,ui) {
 
      
    var group = new H.map.Group();
  
    map.addObject(group);
  
    // add 'tap' event listener, that opens info bubble, to the group
    group.addEventListener('tap', function (evt) {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
      });
      // show info bubble
      ui.addBubble(bubble);
    }, true);
    
    this.addMarkerToGroup(group, {lat: data1.start_latitude, lng: data1.start_longitude},
      '' +data1.stop_address+
      '');
   

  }

addMarkertopolyline(map, data) {
  
  let objm = data;
  for (let i = 0; i < objm.length; i++) {
   
    this. Group = new H.map.Group();
    map.addObject(this. Group);
    
    if (i == 0) {
      var coords = { lat: objm[0].latitude, lng: objm[0].longitude },
      
      
        marker0 = new H.map.Marker(coords, {icon: new H.map.Icon('../../../../assets/images/truckstartb1.svg', {size: {w: 36, h: 36}})});
      map.addObject(marker0);
      map.setCenter(coords1);
      this.group.addObject(marker0);
    }
    if (i == objm.length - 1) {
      var coords1 = { lat: objm[objm.length - 1].latitude, lng: objm[objm.length - 1].longitude },
  
      
        marker0 = new H.map.Marker(coords1, {icon: new H.map.Icon('../../../../assets/images/flagsb2.svg', {size: {w: 36, h: 36}})});
      map.addObject(marker0);
      map.setCenter(coords1);
      this.group.addObject(marker0);
    }


  }
}

addMarker(map,data1) { 
 
  for (let i = 0; i < data1.length; i++) { 
  
       
    this.iconHMap = new H.map.Icon("../../../../../assets/images/cargogrey.svg", {size: {w: 36, h: 36}});
     var icon = this.iconHMap;
   
    this.group = new H.map.Group();
    map.addObject(this. Group);
    
    var cords = { lat: data1[i].start_latitude, lng: data1[i].start_longitude },
      icon1 = {icon: this.iconHMap},
      // coords = {lat: lat, lng: lng},
      marker = new H.map.Marker( coords, {icon: this.iconHMap});
    map.addObject(marker);
    map.setCenter(coords);
    this.group.addObject(marker);
  }
}
addMarker1(map,data1) { 
    
  
  
   
    this.iconHMap = new H.map.Icon("../../../../../assets/images/cargogrey.svg", {size: {w: 36, h: 36}});
     var icon = this.iconHMap;
  
    this.group = new H.map.Group();
    map.addObject(this. Group);
   
    var cords = { lat: data1.start_latitude, lng: data1.start_longitude },
      icon1 = {icon: this.iconHMap},
      // coords = {lat: lat, lng: lng},
    marker = new H.map.Marker(coords, { icon: this.iconHMap });
  
  var coords = { lat: data1.start_latitude, lng: data1.start_longitude },
    icon1 = { icon: this.iconHMap };
   var marker = new H.map.Marker(coords, { icon: this.iconHMap });
    map.addObject(marker);
    map.setCenter(coords);
    this.group.addObject(marker);
  
}

  addPolylineToMap(map, data) {
    
      
      var lineString = new H.geo.LineString([data[0].latitude, data[0].longitude, 0]);
      // var growingPolygon = new H.geo.Polygon(lineString),
      //   growingShape = new H.map.Polygon(growingPolygon);

      let objl = data;
      let ob;
      let obj;
  
      for (let i = 0; i < objl.length; i++) {
        this.polyline = { style: { lineWidth: 4 } };
        
  
        lineString.pushLatLngAlt(objl[i].latitude, objl[i].longitude, 0);
    
  
        map.addObject(new H.map.Polyline(lineString, this.polyline));
        
        
      }
  
 
    }
  
  loadMap1(data, data1) {
   
    const platform = new H.service.Platform({
      apikey: 'q3j2RP34Zz5SdH2bFYIVQP1PbMGSSh4PH3OjLml0oaA'
    });
    const layers = platform.createDefaultLayers();
    this.div = document.getElementById('hereMap'); // this.mapDiv.nativeElement
    const map = new H.Map(this.div, layers.vector.normal.map, { pixelRatio: window.devicePixelRatio, center: { lat: this.lat1, lng: this.long1 }, zoom: 5, });
    this.hereMap = map;
    // add a resize listener to make sure that the map occupies the whole container
    window.addEventListener('resize', () => map.getViewPort().resize());
    //Step 3: make the map interactive
    // MapEvents enables the event system
    // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.hereMap));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(this.hereMap, layers);
  

    // Window resize handler
    window.addEventListener('resize', function () {
      map.getViewPort().resize();
    });
    this.addPolylineToMap(this.hereMap, data);

    
      this.addMarker(this.hereMap, data1);

    this.addMarkertopolyline(this.hereMap, data);
   
      this.addInfoBubble(this.hereMap, data1, ui);
  
   
  }
  removeObjects() {
    if (this.traceroutelist1.length > 1) {
      this.hereMap1.removeObjects(this.group.getObjects());
      // this.group.removeObjects();
    }  

  }
 
  loadMap(data, data1) { 
    
    
  const platForm1 = new H.service.Platform({
    apikey: 'q3j2RP34Zz5SdH2bFYIVQP1PbMGSSh4PH3OjLml0oaA'
  });
  const layers1 = platForm1.createDefaultLayers();
  this.div1 = document.getElementById('hereMap1');
    const map = new H.Map(this.div1,layers1.vector.normal.map,{ pixelRatio: window.devicePixelRatio,center: {lat: this.lat1, lng: this.long1},zoom: 5,});
this.hereMap1 = map;

    
  
 
  // add a resize listener to make sure that the map occupies the whole container
  window.addEventListener('resize', () => this.hereMap1.getViewPort().resize());
  //Step 3: make the map interactive
  // MapEvents enables the event system
  // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
  var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.hereMap1));

  // Create the default UI components
  this.ui = H.ui.UI.createDefault(this.hereMap1, layers1);
  

  // Window resize handler
  window.addEventListener('resize', function () {
      map.getViewPort().resize(); 
  });
  this.addPolylineToMap(this.hereMap1, data);
  this.addMarker1(this.hereMap1, data1);
  this.addMarkertopolyline(this.hereMap1, data);
  this.addInfoBubble1(this.hereMap1, data1, this.ui);
   
}

And here is the html part

<div [class.show]="isHereMap" [class.hide]="kmtrack" [class.none]="transfer">
          <div  #map id="hereMap"></div>
     
    </div>
    <div [class.show]="isHereMap" [class.hide]="kmtrack" [class.showpointer]="transfer">
      <div  #map id="hereMap1"></div>
 
</div>

And this is the function that calls the traceroute when the map icon is clicked

 mapReady1(row) {
    
    this.transfer = true;
    this.isHereMap1 = true;
    this.isHereMap = false;
    this.kmtrack1 = true;
    const d = new Date();
    
    const fdate = this.datepipe.transform(d, 'yyyy-MM-dd');
   
    const ftime = '12:00 am';
    const ttime = this.datepipe.transform(d, 'hh:mm a');
  
    this.startdatetime = fdate + ' ' + ftime;
    this.enddatetime = fdate + ' ' + ttime;
    const dt = new Date(this.enddatetime);
    const d1 = dt.setDate(dt.getDate() - 1); // 24 hour format old code
    var t = new Date();
    t.setHours(0, 0, 0, 0); // 12 hour format new code
    this.traceStart = this.datepipe.transform(t, 'yyyy-MM-dd hh:mm a');


   
    const req1 = {
      role: this.data.userdetails.rolename,
      userId: this.data.userdetails.usersid,
      user_id: this.data.userdetails.usersid,
      company_id: this.data.rowdata.company_id,
      start_date: this.traceStart + '/' + this.enddatetime,
      vehicle_id: this.data.rowdata.vehicle_id,
    };

    
    this.tracerouteService.getTracerouteList(req1).subscribe((response) => {
      this.responsedata = response;

      this.kmtrack = false;
      this.transfer = true;
      this.isHereMap1 = true;
      this.isHereMap = false;
      if (this.responsedata.success === "true") {
        this.icondest1 = this.icondest;
        this.iconstart1 = this.iconstart;
        
        this.kmtrack = false;
        this.visible = true;
        this.value = this.responsedata.data.totalValue;
        this.trackVehicleResponse = this.responsedata.data.totalValue;
    
        
        this.traceroutelist = this.responsedata.data.trace;
       
        this.traceroutelist1.push(this.traceroutelist);
      
        this.removeObjects();
        this.loadMap(this.traceroutelist, row);
        this.addPolylineToMap(this.hereMap1, this.traceroutelist);
        this.addMarker1(this.hereMap1, row);
        this.addMarkertopolyline(this.hereMap1, this.traceroutelist);
        this.addInfoBubble1(this.hereMap1, row, this.ui);
        
        this.obj = this.traceroutelist;
        this.tlen = this.obj.length;
        // console.table(this.obj);
        this.lat2_1 = this.latSelected;
        this.long2_1 = this.longSelected;
        this.traceroutelist.forEach((latAndLong: any) => {
          this.lat = parseFloat(latAndLong.start_latitude);
          this.long = parseFloat(latAndLong.start_longitude);

          
          return (this.latAndLong02 = Array(latAndLong));

          // return this.long01, this.long02;
        });
      
      } else {
        this.lat1 = 23.473324;
        this.long1 = 77.947998;
        this.zoom = 4;
        this.boundcheck = false;
        this.visible = false;
      }

      return this.latAndLong02;
      // this is the end of the logic for polyline
    });
    // this.zoom0 = 6;
   
  }

Not the perfect one but this will do i guess:

https://angular-ivy-bb3x8u.stackblitz.io

As, you can see in the example i'm not even able to produce the polyline with custom icons and info bubble on stackblitz in the main map id(hereMap). The problem arises when i click on the buttons with numbers (in my local code it's a map icon) where the removeobjects API call is removing all the polyline and the markers in the second hidden map(hereMap1) when clicked on any iterated button for the second time and that's why i have posted it here.(sorry need to learn to post with good coding standards)

Answer 1

Regarding https://stackblitz.com/ :

Regarding this documentation you need to Add a registry entry to the NPM configuration by executing the following command:

npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

and

npm install @here/maps-api-for-javascript --save

This is not possible on https://stackblitz.com/

Is not possible to implement .npmrc file too: https://github.com/stackblitz/core/issues/1851

---

Ok, regarding your code:

It seems you are using two maps in different map containers - this is correct. But this.group is using for both maps? - You need to create two group each to other map.

I see this.group is often overwritten in your code but it should be created (in most cases) once and then this.group.addObject, this.group.removeObject many times.

I see in your code this.group and this.Group. If you want create another group then please using another name, because is very difficult to read this code.