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;
}
from 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
No comments:
Post a Comment