Newbie question regarding markers on map

I am new to using Tom Tom but so far very impressed. I have snippets of code below. I am trying to use the map by updating a location of vehicles moving. The map updates with the same or moving markers. I was able to clear all the markers but not. only show the latest location added. Is there is an easy way to clear the map before adding the latest marker. I hope I am providing enough information for you to help answer my question. Thanks in advance for any help.

I have the following code:
tt.setProductInfo(‘myapp’, ‘1’);
var map = tt.map({

key: ‘my key’,
container: ‘mapid’,
dragPan: !isMobileOrTablet(),
center: [longitude, latitude],
zoom: 9

});

map.addControl(new tt.FullscreenControl());
map.addControl(new tt.NavigationControl());
map.on(‘load’, function() {
map.showTrafficFlow();
map.showTrafficIncidents();
})

call this function to update map

var newmarker;

function createMarker(icon, position, color, popupText) {
markerElement = document.createElement(‘div’);
markerElement.className = ‘marker’;

var markerContentElement = document.createElement('div');
markerContentElement.className = 'marker-content';
markerContentElement.style.backgroundColor = color;
markerElement.appendChild(markerContentElement);

var iconElement = document.createElement('div');
iconElement.className = 'marker-icon';
iconElement.style.backgroundImage =
    'url(${pageContext.request.contextPath}/resources/assets/images/custom-markers/' + icon + ')';
markerContentElement.appendChild(iconElement);

var popup = new tt.Popup({offset: 30}).setText(popupText);
console.log(position);

// add marker to map
newmarker = new tt.Marker({element: markerElement, anchor: 'bottom'})
    .setDraggable(true)
    .setLngLat(position)
    .setPopup(popup)
    .addTo(map);    
markersArray.push(newmarker);

}

I had the solution already but must of missed something. I just looped through the array and remove them. Pretty easy.

1 Like