CODEWITHSUNDEEP
amchartsammap
Abhishek Joshi
Abhishek Joshi

Reputation: 15

How to delete MapImage from Ammap.js



I have been using Ammap Library and created Map.
https://www.amcharts.com/demos/custom-html-elements-map-markers/

I want to delete Map images object by using method(), Details are in below link. Could any one let me know how to use this method()

https://docs.amcharts.com/3/javascriptmaps/MapImage#deleteObject
Method Name:"deleteObject()"

Thanks in Advance

Upvotes: 0

Views: 622

Answers (1)

xorspark
xorspark

Reputation: 16012

deleteObject is a member method of the image/object itself, so you just call it from the object you want to delete, e.g.

image.deleteObject();

If your map is using custom HTML elements like in the demo, you also need to remove the div generated in your createCustomMarker method by calling removeChild in the DOM. You need to be able to access that div somehow, so I recommend modifying it to set the div's id to something you can look up later like the image's id:

// this function creates and returns a new marker element
function createCustomMarker(image) {
  // create holder
  var holder = document.createElement("div");
  holder.className = "map-marker";
  holder.title = image.title;
  holder.id = image.id; //added to make div lookup easier
  // ...
}

This modification assumes you set an id in your images, which is also recommended since you can use the getObjectById method to get the image object and call its deleteObject method.

Here's a sample function that deletes both the image and custom marker when an image ID is provided:

function deleteImage(imageId) {
  var image = map.getObjectById(imageId);
  var imageDiv;
  if (image) {
    image.deleteObject(); //delete the ammap image object
    imageDiv = document.getElementById(imageId); //get the custom marker div
    imageDiv.parentNode.removeChild(imageDiv); //remove it from the DOM
  }
}

Demo - Click on the buttons to delete the corresponding marker.

Upvotes: 0

Related Questions