Skip to content

Instantly share code, notes, and snippets.

@markmarkoh

markmarkoh/README.md

Last active February 15, 2016 16:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save markmarkoh/4127667 to your computer and use it in GitHub Desktop.
Save markmarkoh/4127667 to your computer and use it in GitHub Desktop.
Download ZIP
Ongoing military conflicts datamap
Raw
README.md

datamaps is also delivered as a jQuery/Zepto plugin, as shown in this example (in addition to a Backbone view).

datamaps will add datamap to an existing version of jQuery if it's on the page. Otherwise, if there is no jQuery/Zepto, it will add a global copy of Zepto for you to use.

Add a container div to the page and select with jQuery/Zepto and call the datamap function. Pass customization options to datamap.

This example shows a custom popup function (any JS templating language that compiles to a function like _.templates and handlebars).

The custom template has two model objects

  • geography (which includes things like 'name' and the GPS coordinates)
  • data (which includes the object you passed into data when instantiating the map)

Data source: List of ongoing military conflicts

Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container1" style="height: 500px; width: 960px"></div>
<!-- Datamaps Source -->
<script src="http://datamaps.github.com/scripts/datamaps-all.js"></script>
<script src="map.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36315921-1']);
_gaq.push(['_setDomainName', 'bl.ocks.org']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Raw
map.js
$("#container1").datamap({
scope: 'world',
geography_config: {
borderColor: 'rgba(255,255,255,0.3)',
highlightBorderColor: 'rgba(0,0,0,0.5)',
popupTemplate: _.template([
'<div class="hoverinfo">',
'<% if (data.name) { %> <strong><%= data.name %></strong><br/><% } %>',
'<% if (data.startOfConflict) { %>',
'Started in <%= data.startOfConflict %><br/> <% } %>',
'<%= geography.properties.name %>',
'</div>'
].join('') )
},
fills: {
conflict: 'red',
defaultFill: '#00446A'
},
data: {
'MLI': {
fillKey: 'conflict',
name: '2012 Northern Mali conflict',
startOfConflict: 2012
},
'LBY': {
fillKey: 'conflict',
name: '2011–present Libyan factional fighting',
startOfConflict: 2011
},
'IRQ': {
fillKey: 'conflict',
name: 'Iraqi insurgency (post U.S. withdrawal)',
startOfConflict: 2011
},
'SYR': {
fillKey: 'conflict',
name: 'Syrian civil war',
startOfConflict: 2011
},
'SDN': {
fillKey: 'conflict',
name: 'Sudan internal conflict',
startOfConflict: 2011
},
'MEX': {
fillKey: 'conflict',
name: 'Mexican Drug War',
startOfConflict: 2006
},
'PAK': {
fillKey: 'conflict',
name: 'War in North-West Pakistan',
startOfConflict: 2004
},
'YEM': {
fillKey: 'conflict',
name: 'Al-Qaeda insurgency in Yemen',
startOfConflict: 2001
},
'MMR': {
fillKey: 'conflict',
name: 'Internal conflict in Burma (Myanmar)',
startOfConflict: 1948
},
'COL': {
fillKey: 'conflict',
name: 'Colombian conflict',
startOfConflict: 1964
},
'AFG': {
fillKey: 'conflict',
name: 'War in Afghanistan',
startOfConflict: 1978
}
}
});
Copy link

ghost commented Mar 28, 2013

Do you mean to use the geography_config key?

https://gist.github.com/KevinSchmid/5260484/revisions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment