D3 DataMaps (or jvectormap): How to put a custom object on map by coords

Question

For example I want to add a custom html object to wold map by gps coords (lat, lng) - like pulsating dot done with css or any other(js?) marker animation

<style>

#circle {
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;

}

.gps_ring {
    border: 3px solid red;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;

    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
</style>

<div id="state" class="grid_4 alpha">
    <div class="gps_ring"></div>

</div>

Chirag Kothari · Accepted Answer · 2016-08-25T09:59:29.797

2

You can get x, y coordinates from projection:

var projection = d3.geo.mercator()
            .center([0, 5 ])
            .scale(150);

projection([long, lat]);

For animation you could either use either d3 transitions example or CSS.

I have created a block for you: http://bl.ocks.org/ckothari/32149f15261b9c5c7a56c40f7f6b353d

EDIT Sorry, just realized your question was about using http://datamaps.github.io/. Let me know if you can use topojson, else i will delete my answer.

EDIT-2 To color country:

d3.tsv('data.csv', function(data){
            g.selectAll('path')
                    .filter(function(d){
                        return data.find(function(d1){
                            return d1.iso == d.properties.iso_a2;
                        })
                    })
                    .attr('class', 'selected');
   //...
 })

EDIT-3 Chaining transitions Updated example: https://bl.ocks.org/ckothari/raw/32149f15261b9c5c7a56c40f7f6b353d/

Also see http://bl.ocks.org/mbostock/1125997.

edited Aug 25 '16 at 09:59

answered Aug 16 '16 at 11:41

Chirag Kothari

1,390
9
19

great, but is there a way to somehow highlight a country with a color? – SERG Aug 16 '16 at 12:37
1

yes, you can select paths, filter it on iso or the country you want to color and apply fill attribute. – Chirag Kothari Aug 16 '16 at 12:56
one more question - is there a way to make different pulse time animation for every circle? Thanks – SERG Aug 24 '16 at 15:05
here are different ease functions available: https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#d3_ease – Chirag Kothari Aug 24 '16 at 15:13
I mean when function calls "var circle = g.selectAll("circle");" then it selects all circle and set them one pulse time animation. I want every circle to pulsate by it own timing. When one starts to increase the other one should decrease – SERG Aug 25 '16 at 08:37
glad to have helped :) – Chirag Kothari Aug 25 '16 at 12:29

D3 DataMaps (or jvectormap): How to put a custom object on map by coords

1 Answers1