Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (99 sloc) 4.78 KB
---
layout: showcase
title: Three-dimensional Mapping
---
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
<script type="text/javascript">
$(function() {
var map, c, scale, updateMap, symbols = [];
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
$.fn.qtip.defaults.style.def = false;
c = $('#map');
c.height(c.width()*.5);
map = kartograph.map('#map');
map.loadMap('map-usa.svg', function() {
map.loadCSS('style.css', function() {
map.addLayer('graticule');
map.addLayer('graticule_1');
map.addLayer('usa');
$.getJSON('us-crime-cities.json', function(crimeCities) {
$.each(crimeCities, function(i,city) {
$.each(['ViolentCrime','Rape','Murder'], function(i,prop) {
$.each(['2011','2010'], function(i,yr) {
city[prop+yr+'Rate'] = city[prop+yr] / city.Population;
});
});
});
updateMap = function() {
var prop = $('.dataset.btn-primary').data('val')
+ $('.year.btn-primary').html()
+ $('.type.btn-primary').data('val'),
maxRad = $('.type.btn-primary').data('maxrad');
scale = kartograph.scale.linear(crimeCities, prop);
$.each(crimeCities, function(i, c) {
var bar, pts;
pts = [c.ll, [c.ll[0], c.ll[1], scale(c[prop])*maxRad]];
if (symbols[i]) {
bar = symbols[i];
if (Raphael.svg) bar.animate({ path: map.getGeoPathStr(pts) }, 500);
else bar.attr('path', map.getGeoPathStr(pts));
} else {
bar = map.addGeoPath([c.ll,c.ll]);
bar.attr({
stroke: '#024',
opacity: .6,
'stroke-width': 4,
fill: 'none',
'stroke-linecap': 'square'
});
if (Raphael.svg) {
bar.animate({ path: map.getGeoPathStr(pts) }, 500);
bar.node.setAttribute('title', c.City);
setTimeout(function() {
$(bar.node).qtip({
content: {
title: c.City,
text: c[prop]
},
position: {
target: 'mouse',
viewport: $(window),
adjust: { x:7, y:7}
},
}, 800);
});
} else {
bar.attr('path', map.getGeoPathStr(pts));
}
symbols.push(bar);
}
});
}
updateMap();
});
});
}, { padding: -150 });
$('.btn').click(function(event) {
var tgt = $(event.target), par = tgt.parent();
$('.btn', par).removeClass('btn-primary');
tgt.addClass('btn-primary');
updateMap();
});
});
</script>
<p>This map shows crime data for some cities in the United States. You can choose between showing actual quantities of incidents or the rates. Note that the purpose of this demo is not to promote 3D bar charts (which are fairly ineffective), but to showcase the satellite projection along with the possibility to project three dimensional geo-coordinates. In fact, the height of the bars in this example is given in km above ground.</p>
<div id="map"></div>
<span style="margin-right:1em">
<a class="dataset btn btn-primary" data-val="ViolentCrime">Violent Crime</a>
<a class="dataset btn" data-val="Rape">Rape</a>
<a class="dataset btn" data-val="Murder">Murder</a>
</span>
<span style="margin-right:1em">
<a class="year btn btn-primary">2011</a>
<a class="year btn">2010</a>
</span>
<span>
<a class="type btn btn-primary" data-val="" data-maxrad="500">Quantity</a>
<a class="type btn" data-val="Rate" data-maxrad="250">Density</a>
</span>