Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
107 lines (86 sloc) 3.31 KB
---
layout: showcase
title: Symbol Maps
jsplugins:
qtip: '/js/jquery.qtip.min.js'
---
<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() {
// initialize tooltips
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
$.fn.qtip.defaults.style.def = false;
var map = kartograph.map('#map');
map.loadMap('DE.svg', function() {
map.addLayer('context', {
styles: {
stroke: '#aaa',
fill: '#f6f4f2'
}
});
map.addLayer('regions', {
id: 'bg',
styles: {
stroke: '#d8d6d4',
'stroke-width': 10,
'stroke-linejoin': 'round'
}
});
map.addLayer('regions', {
title: function(d) { return d.name },
styles: {
stroke: '#333',
fill: '#fff'
}
});
$.ajax({
url: 'cities.json',
dataType: 'json',
success: function(cities) {
var scale = kartograph.scale.sqrt(cities.concat([{ nb_visits: 0 }]), 'nb_visits').range([0, 60]);
map.addSymbols({
type: kartograph.Bubble,
data: cities,
location: function(city) {
return [city.long, city.lat];
},
radius: function(city) {
return scale(city.nb_visits);
},
tooltip: function(city) {
return '<h3>'+city.city_name+'</h3>'+city.nb_visits+' visits';
},
sortBy: 'radius desc',
style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;',
});
}
});
}, { padding: -5 });
});
</script>
<p>This map shows location of German visitors to the Kartograph website in 2012, as measured by <a href="http://piwik.org">Piwik Web Analytics</a>. It uses the <a href="/docs/kartograph.js/#symbol-maps">Symbol Map API</a> and <a href="/docs/kartograph.js/#advanced-tooltips-using-jquery-qtips">qTip tooltips</a>. Please scroll down to see the code behind this map.</p>
<div id="map" style="border:1px solid #999; margin-bottom:1em">
</div>
<p>It basically goes down to this:</p>
<pre><code>// cities is a list of dictionaries such as
cities = [{ city_name: "Berlin", nb_visits: 1496, lon: 13.4, lat: 52.517 }, ...];
// create a scale for radii
var scale = kartograph.scale.sqrt(cities, 'nb_visits').range([0, 40]);
// add bubbles to the map
map.addSymbols({
type: kartograph.Bubble,
data: cities,
location: function(city) {
return [city.lon, city.lat];
},
radius: function(city) {
return scale(city.nb_visits);
},
tooltip: function(city) {
return '&lt;h3&gt;'+city.city_name+'&lt;/h3&gt;'+city.nb_visits+' visits';
},
sortBy: 'radius desc',
style: 'fill:#800; stroke: #fff; fill-opacity: 0.5;',
});
</code></pre>