Draw svg-circle on a coordinate with polymaps

Question

I'm making a tracker system which uses polymaps to display a satellite image. The code is copied from the bing-example on the website of polymaps.

I now want to periodically call an update function which retrieves the current location of my trackers in geoJSON format:

{
"type":"FeatureCollection",
"features":[{
            "type":"Feature",
            "id":"T_xxxxxxx",
            "geometry":{
                          "type":"Point",
                          "coordinates":["5.xx","51.xx"]  // 51N, 5E; Netherlands
                        },
            "properties": {
                          "snelheid":"5.00", 
                          "richting":"0.00",
                          "satAantal":"5",
                          "devMessage":"",
                          "devBatVolt":"4.11",
                          "devBatStatus":"F",
                          "devBatLaden":"0",
                          "dt":"2012-06-28 07:07:48","dif":"-6667"
                          }
            }]
}

The update function:

function update(){
  $.getJSON('/_xml/trck/current.php', function(data) {
    $.each(data.features, function(key, val) {
      //update the tracker information in the list
          [....]
      //display an svg circle
            /*
             *  But how?
             */
    }
   });
};

So far so good, the information does get updated with the information from the geoJSON.

Can anybody point me in the right direction how to add an svg-circle on my polymap?

Answer 1

It works, but it seems to do a double for all features. Once in the json file and once in the build of the po.geoJSON()...

$.getJSON('/_xml/trck/current.php', function(data) {
                /*
                 * Eerst alle markers[] verwijderen van de kaart...
                 */
                     for (var i = 0; i < markers.length; i++) {
                        map.remove(markers[i]); 
                     };
                // ----- -----
                // voor iedere feature iets maken! 
                  $.each(data.features, function(key, val) {

                            m = po.geoJson()
                                .features([{geometry: {coordinates: [parseFloat(coord[0]), parseFloat(coord[1])], type: "Point"}}])
                                .on("load", function(e){

                                        for (var i = 0; i < e.features.length; i++) {


                                            e.features[i].element.setAttribute('fill', '#eb6a52');
                                            e.features[i].element.setAttribute('r',6);
                                            e.features[i].element.setAttribute('onmouseover', '')
                                        }
                                    });
                            markers.push(m);
                            map.add(m);

                  });
            });