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);
}