I'm using the HERE maps API for my maps. I'm able to add a marker and infobubble whenever I click on a map. However, I want only the latest marker and infobuble on the map, and removed all the other ones. Below is my code which has all the markers and infobubble after I click on the map multiple times.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href=".0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src=".0/mapsjs-core.js"></script>
<script type="text/javascript" src=".0/mapsjs-service.js"></script>
<script type="text/javascript" src=".0/mapsjs-ui.js"></script>
<script type="text/javascript" src=".0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="height:550px;width:720px;"></div>
<script>
//Step 1: initialize munication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
//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(map));
// Create the default UI ponents
var ui = H.ui.UI.createDefault(map, defaultLayers);
function setUpClickListener(map) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX,
evt.currentPointer.viewportY);
addMarker(coord);
});
}
function addMarker(coordinates){
var marker = new H.map.Marker({lat:coordinates.lat, lng: coordinates.lng});
map.addObject(marker);
var bubble = new H.ui.InfoBubble({lat:coordinates.lat, lng: coordinates.lng}, {
content: '<b>Hello World!</b>'
});
// show info bubble
ui.addBubble(bubble);
}
setUpClickListener(map);
</script>
</body>
</html>
I'm using the HERE maps API for my maps. I'm able to add a marker and infobubble whenever I click on a map. However, I want only the latest marker and infobuble on the map, and removed all the other ones. Below is my code which has all the markers and infobubble after I click on the map multiple times.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here./v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here./v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here./v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here./v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here./v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="height:550px;width:720px;"></div>
<script>
//Step 1: initialize munication with the platform
var platform = new H.service.Platform({
app_id: 'devportal-demo-20180625',
app_code: '9v2BkviRwi9Ot26kp2IysQ',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
//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(map));
// Create the default UI ponents
var ui = H.ui.UI.createDefault(map, defaultLayers);
function setUpClickListener(map) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX,
evt.currentPointer.viewportY);
addMarker(coord);
});
}
function addMarker(coordinates){
var marker = new H.map.Marker({lat:coordinates.lat, lng: coordinates.lng});
map.addObject(marker);
var bubble = new H.ui.InfoBubble({lat:coordinates.lat, lng: coordinates.lng}, {
content: '<b>Hello World!</b>'
});
// show info bubble
ui.addBubble(bubble);
}
setUpClickListener(map);
</script>
</body>
</html>
3 Answers
Reset to default 8map.removeObjects(map.getObjects ())
You can call the removeObject() method on the map or groups to remove map objects such as markers.
If you want to quickly remove all objects from the map, the easiest way to do this is to add them to a group and adding that group to the map. You can then call removeAll() on the group.
First answer is totally fine, but what else is sometimes needed (e.g. u've got 2 totally separate objects on the map, and you want to delete all the objects of the first type, but left the second type), then you cannot do:
map.removeObjects(map.getObjects ()), because it will delete also objects from the second type. So what works for me, was just to (it's in TS, so this means global variable, not local! :
map.addObject(myObject);
this.myLastObject = myObject;
or for array/list:
map.addObject(myObject);
this.myList.push(myObject);
and later deletion:
map.removeObject(this.myLastObject);
or do a loop for list or use .removeObjects(this.myList)