Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: a53c1e81d4
Fetching contributors…

Cannot retrieve contributors at this time

121 lines (92 sloc) 4.406 kb
---
layout: showcase
title: Three-dimensional Mapping
about: 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.
---
<script type="text/javascript">
$script.ready(['jquery', 'kartograph'], function() {
$(function() {
var map, c, scale, updateMap, symbols = [];
c = $('#map');
c.height(c.width()*.5);
map = window.m = $K.map('#map');
map.loadMap('map-usa.svg', function() {
map.loadStyles('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 = $K.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);
} 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>
<div class="row">
<div class="span12">
<div id="map"></div>
</div>
</div>
<div class="row">
<div class="span12" style="text-align:right">
<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>
</div>
</div>
Jump to Line
Something went wrong with that request. Please try again.