Best way to clear map and redraw

Question

I know that dynamically changing the scope of a map is currently not possible.

So instead I am trying to:

Create a map Some event occurs I then scrap the map and draw a fresh one with new details, including new projection.

The problem is I can't properly scrap the old map. I was attempting to take the map variable, call remove() on the svg property, use "delete svg" for performance purposes, and then go about deconstructing the object. And then reassign the map variable to the result of a function A, where function A just sets up a new map.

Function for creating new map:

function createMap (latlon){
var basicMap = new Datamap({
  element: document.getElementById("basic"),
    setProjection: function(element) {
var projection = d3.geo.equirectangular()
  .center(latlon)
  .rotate([0, 0])
  .scale(1200)
  .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
  .projection(projection);

return {path: path, projection: projection};
},
  projection: "mercator",
  scope: 'world',
   fills: {
        defaultFill: "#ABDDA4",
      },
  responsive: true,
    done: function(datamap){
        datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
        $("#resetZoom").on("click", function(){
   resetZoom();
})
        function redraw() {
            datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }
        function resetZoom() { datamap.svg.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); }
},
});
return basicMap
}

Function for destroying:

function cleanUp(map){
map.svg.remove();
delete map.svg;
delete map;

}

I intialise the map into basic as follows

basic = createMap([2,46]);

I then later on clean the map (my destroy function) and reassign:

cleanUp(basic);
basic = createMap([personLon, personLat])

On the surface, it works ok. And the performance is ok. BUT, its not really working properly. For example the zoom function no longer works. When the zoom button is pressed its looking for a map variable it cant find anymore. Which doesnt make sense, since the new map creates new click handlers for the button and such. It ALMOST works.

But this just isnt working. Any tips? Thanks.

Answer 1

I had the same issue and solved it by removing the element using JQuery and then re-adding the same element again. Seems like a bit of a hack but it works for me.

        $("#drilldown-map").parent().append( "<div id='drilldown-map' />");
        $("#drilldown-map").remove();

        var mapData = getMapData();
        var map = new Datamap(mapData);