dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: refresh div element

  1. #1
    Join Date
    Jun 2013
    Posts
    4

    refresh div element

    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

  2. #2
    Join Date
    Jun 2013
    Posts
    4
    Hi,

    I have solved the problem.
    I have to use the .empty() option.

    Cheers,
    Greenhorn

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles