Permalink
Switch branches/tags
Nothing to show
Find file Copy path
687ab10 May 15, 2014
1 contributor

Users who have contributed to this file

200 lines (167 sloc) 8.51 KB
---
layout: showcase
title: La Bella Italia
---
<script>
$(function() {
// import some classes
window.map = kartograph.map('#map');
var resize = function() {
var c = $('#map');
var ratio = map.viewAB.width / map.viewAB.height;
c.height( c.width() / ratio );
map.resize();
};
$(window).resize(resize);
map.loadMap('italy.svg', function(map) {
map.addLayer('graticule', {
styles: {
'stroke-width': 0.2
}
}).addLayer('land', {
name: 'bgback'
}).addLayer('land', {
name: 'bg'
}).addLayer('land', {
name: 'bgstroke'
}).addLayer('context')
.addLayer('ITA', {
name: 'fg'
});
map.getLayer('context').applyTexture('t0.png');
map.addFilter('oglow', 'glow', {
size: 1,
color: '#988',
strength: 1,
inner: false
});
map.getLayer('bgback').applyFilter('oglow');
map.addFilter('myglow', 'glow', {
size: 2,
color: '#945C1B',
inner: true
});
map.getLayer('bg').applyFilter('myglow');
map.getLayer('context').applyTexture('t0.png');
map.addFilter('oglow', 'glow', { size: 1, color: '#988', strength: 1, inner: false });
map.getLayer('bgback').applyFilter('oglow');
map.addFilter('myglow', 'glow', { size: 2, color: '#945C1B', inner: true });
map.getLayer('bg').applyFilter('myglow');
resize();
var cities = [
[new kartograph.LonLat(12.469482,41.869561), 'Roma', true],
[new kartograph.LonLat(11.3598, 44.4808), 'Bologna'],
[new kartograph.LonLat(14.241028, 40.86368), 'Napoli'],
[new kartograph.LonLat(13.359375, 38.08269), 'Palermo'],
[new kartograph.LonLat(9.162598, 45.444717), 'Milano'],
[new kartograph.LonLat(12.340393, 45.448571), 'Venezia'],
[new kartograph.LonLat(9.492188, 40.896906), 'Olbia'],
[new kartograph.LonLat(9.107666, 39.215231), 'Cagliari'],
[new kartograph.LonLat(15.500586,38.169114), 'Messina']
];
var regions = [
[new kartograph.LonLat(9.030762, 40.128491), 'Sardegna', 18],
[new kartograph.LonLat(9.052734, 42.265607), 'Corse', 18],
[new kartograph.LonLat(9.824023, 35.613561), 'Tunisia', 22],
[new kartograph.LonLat(17.819824, 44.245199), 'Bosnia', 20],
[new kartograph.LonLat(14.589844, 45.996962), 'Slovenia', 19],
[new kartograph.LonLat(16.413574, 45.721522), 'Croatia', 19],
[new kartograph.LonLat(17.709961, 46.845164), 'Hungary', 17],
[new kartograph.LonLat(14.172363, 47.323931), 'Austria', 17],
[new kartograph.LonLat(5.088672, 45.640219), 'France', 20]
];
map.addSymbols({
type: kartograph.Label,
data: regions,
class: 'clblbg',
location: function(d) { return d[0]; },
style: function(d) { return 'font-family: AquilineTwoRegular; stroke: #fff; stroke-width: 2px; fill:#fff; opacity: .3; font-size: '+d[2]+'px;' },
text: function(d) { return d[1] }
});
map.addSymbols({
type: kartograph.Label,
data: regions,
class: 'clblfg',
location: function(d) { return d[0]; },
style: function(d) { return 'font-family: AquilineTwoRegular; fill:#511; fill-opacity: .35; font-size: '+d[2]+'px;' },
text: function(d) { return d[1] }
});
map.addSymbols({
type: kartograph.Label,
data: cities,
class: 'citylbl',
location: function(d) { return d[0]; },
style: function(d) { return 'font-family: AquilineTwoRegular; fill:#544; font-size: '+(d[2] ? 22 : 16)+'px; text-anchor:start;' },
text: function(d) { return d[1] },
offset: function(d) { return [d[2] ? 6 : 2,0] }
});
map.addSymbols({
type: kartograph.Icon,
data: cities,
class: 'cityico',
location: function(d) { return d[0]; },
offset: [-5,-5],
icon: function(d) { return d[2] ? 'star.png' : 'dot.png' }
});
var ferries = [
/* Palermo -> Cagliari */
[[13.359375, 38.08269], [13.43, 38.195],[13.40, 38.294],[12.57, 38.546],[11.83, 38.361],[10.38, 38.861],[9.67, 38.895],[9.10, 39.213],[9.10, 39.213],[9.10, 39.213]],
/* Palermo -> Napoli */
[[13.359375, 38.08269],[13.359375, 38.68269], [14.155,38.840], [14.355,39.240], [14.455,39.840], [14.120, 40.176], [14.241028, 40.86368], [14.241028, 40.86368]],
/* Napoli -> Cagliari */
[[14.241028, 40.86368], [12.241028, 38.86368], [10.941028, 38.96368],[9.241028, 38.76368], [9.10, 39.213]]
];
map.addGeoPath(ferries[0], 'MS S S S L', 'ferry');
map.addGeoPath(ferries[1], 'MS S S L', 'ferry');
var p = map.addGeoPath(ferries[2], 'MS S ', 'ferry');
var r = map.paper;
var len = p.getTotalLength();
var e = r.image('ship.png', 0, 0, 15, 8); // r.ellipse(0, 0, 7, 3).attr({stroke: "none", fill: "#000"})
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x-7, point.y-7] + "r" + (point.alpha+180)
};
};
function run() {
e.animate({along: 1}, 20000, '<>', function () {
setTimeout(function() {
e.animate({along: 0}, 20000, '<>',function () {
setTimeout(run, 4000);
});
}, 3000);
});
}
e.attr('along',0.2);
setTimeout(run, 4000);
}, { padding: -6 });
});
$('.k-layer-toggle input').change(function(evt) {
var paths = $('#map .'+evt.target.value);
if (evt.target.checked) paths.show();
else paths.hide();
})
</script>
<p>This example map of Italy showcases some ways you can style Kartograph maps. The base colors are defined in CSS, glow filters and image textures are applied in SVG. Also you can see heavy use of symbols (labels and icons) as well as geo paths. The labels are set in the <a href="http://www.fontsquirrel.com/fonts/Aquiline" target="_blank">Aquiline</a> font, created by Manfred Klein.</p>
<div id="map"></div>
<div class="k-layer-toggle">
<h2>Toggle Layer Visibility</h2>
<div class="row">
<div class="span3">
<label class="checkbox"><input type="checkbox" checked value="graticule"> Graticule</label>
<label class="checkbox"><input type="checkbox" checked value="bgback"> Land Outer Glow</label>
<label class="checkbox"><input type="checkbox" checked value="bg"> Land Inner Glow</label>
<label class="checkbox"><input type="checkbox" checked value="bgstroke"> Land Outline</label>
</div><div class="span3">
<label class="checkbox"><input type="checkbox" checked value="context"> Surrounding Countries</label>
<label class="checkbox"><input type="checkbox" checked value="fg"> Italian Provinces</label>
<label class="checkbox"><input type="checkbox" checked value="citylbl"> City Label</label>
<label class="checkbox"><input type="checkbox" checked value="cityico"> City Icons</label>
</div><div class="span3">
<label class="checkbox"><input type="checkbox" checked value="clblbg"> Country Label Background</label>
<label class="checkbox"><input type="checkbox" checked value="clblfg"> Country Label Foreground</label>
<label class="checkbox"><input type="checkbox" checked value="ferry"> Ferry Routes</label>
</div>
</div>
</div>
<link rel="stylesheet" href="style.css" type="text/css" />