Marker plugin from Datamap
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
<h2>Datamaps Playground</h2>
<p><a href="http://datamaps.github.io/">DataMaps Project Homepage</a>
</p>
<div id="container1" style="position: relative; width: 80%; height: 400px;"></div>
JavaScript
//basic map config with custom fills, mercator projection
var map = new Datamap({
scope: 'usa',
element: document.getElementById('container1'),
projection: 'mercator',
geographyConfig: {
popupOnHover: false
},
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
USA: {
fillKey: 'lt50'
},
RUS: {
fillKey: 'lt50'
},
CAN: {
fillKey: 'lt50'
},
BRA: {
fillKey: 'gt50'
},
ARG: {
fillKey: 'gt50'
},
COL: {
fillKey: 'gt50'
},
AUS: {
fillKey: 'gt50'
},
ZAF: {
fillKey: 'gt50'
},
MAD: {
fillKey: 'gt50'
}
}
});
map.addPlugin('pins', function(layer, data, options) {
var self = this,
fillData = this.options.fills,
svg = this.svg;
if (!data || (data && !data.slice)) {
throw "Datamaps Error - bubbles must be an array";
}
var bubbles = layer.selectAll('image.datamaps-pins').data(data, JSON.stringify);
bubbles.enter()
.append('image')
.attr('class', 'datamaps-pin')
.attr('xlink:href', 'http://a.tiles.mapbox.com/v3/marker/[email protected]')
.attr('height', 40)
.attr('width', 40)
.attr('x', function(datum) {
console.log('hey')
var latLng;
if (datumHasCoords(datum)) {
latLng = self.latLngToXY(datum.latitude, datum.longitude);
} else if (datum.centered) {
latLng = self.path.centroid(svg.select('path.' + datum.centered).data()[0]);
}
...