Hello,

I am trying to update a map (d3) in order to add or remove markers.
In principle it works, I have a .js Script with the following code snippet:

HTML Code:
function loadMap(filterdata)
{
    var width = 500,
    height = 1000;
    
    var projection = d3.geo.mercator()
	.center([-110, 45])
	.scale(400)
	.rotate([-160,0]);

    var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);
    
    var path = d3.geo.path()
	.projection(projection);
    
    var currentholder;
    var currentsite;
    var filterdataSite=[];
    var filterdataHolder=[];
    
    var g = svg.append("g");
    
    d3.json("json", function(error, data) {
	d3.json("json", function(error, topology) {
	    
	    g.selectAll("path")
		.data(topojson.object(topology, topology.objects.countries)
		      .geometries)
		.enter()
		.append("path")
		.attr("d", path)
	    
	    g.selectAll("redcircle")
		.data(data)
		.enter()
		.append("circle")
 		.attr("cx", function(d) {
		    if(d.ID<filterdata.length)
			return projection([filterdata[d.ID].siteslong, filterdata[d.ID].siteslat])[0];
		})
		.attr("cy", function(d) {
		    if(d.ID<filterdata.length)
			return projection([filterdata[d.ID].siteslong, filterdata[d.ID].siteslat])[1];
		})
		.attr("r", 3)
		.style("fill", "red")
and an html code where can I call the map via
HTML Code:
  $(document).ready(function() {
   .........
   .........
  $().w2layout({
                               name: 'layout-right',
                               panels: [
                                       { type: 'top',  size: 500, resizable: true, style: pstyle, content: 'metadata' },
                                       { type: 'main', size: 400, style: pstyle, content: '<div id="map" style="height: 100%"></div>'  }
                                ]
                        });
   ...........
   ...........
});
that means, I use the id=map for calling.
The problem: I can only do it once!
First of all I thought it is due to the .append but then I would expect that more and more markers would appear.
But this is not the case. It seems so to be that nothing happens....(due to the $(document).ready(function() ?).

Do I have to refresh/remove the div element "map"(?). If yes, how?

Many thanks!
Greenhorn