Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

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);

                  });
            }); 
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.