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:
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
$(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
