near/berliner-winter
1
0
Fork 0
mirror of https://github.com/heyarne/berliner-winter.git synced 2026-05-06 19:23:39 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'arne'

Browse source
This commit is contained in:
Arne Schlüter 2015-02-07 19:22:23 +01:00
commit eb5441876a
4 changed files with 67 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/bower.json
View file

@ -16,6 +16,6 @@
"tests" "tests"
], ],
"dependencies": { "dependencies": {
"leaflet-dist": "~0.7.2" "lodash": "~3.1.0"
} }
} }

42
static/css/style.css
View file

@ -2,6 +2,11 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
font-family: 'Lora', serif;
}
*, *:before, *:after {
box-sizing: border-box;
} }
body { body {
@ -12,3 +17,40 @@ body {
#map { #map {
height: 100%; height: 100%;
} }
#year-picker {
position: absolute;
z-index: 10;
top: 6px;
right: 6px;
}
#year-picker ul {
margin: 0;
padding: 0;
list-style: none;
}
#year-picker li {
display: inline-block;
}
#year-picker a {
display: block;
width: 72px;
padding: 12px;
margin: 3px;
background: #222;
text-decoration: none;
color: #ddd;
text-align: center;
transition: background .3s ease;
}
#year-picker a:hover {
background: #333;
}
#year-picker .active a {
background: #444;
}

8
static/js/main.js
View file

@ -1,5 +1,13 @@
(function () { (function () {
// set up background map
var map = L.map('map').setView([52.50, 13.40], 11); var map = L.map('map').setView([52.50, 13.40], 11);
var layer = new L.StamenTileLayer("toner-lite"); var layer = new L.StamenTileLayer("toner-lite");
map.addLayer(layer); map.addLayer(layer);
$.get('/articles')
.fail(console.error.bind(console))
.then(function (data) {
console.log('Got data successfully!');
console.log(data);
});
})(); })();

17
views/index.tpl
View file

@ -1,13 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title></title> <title>Visualization of Hate Crime in Berlin</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style.css"> <link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<nav id="year-picker">
<ul>
<li class="active"><a href="#">2005</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
</ul>
</nav>
<div id="map"></div> <div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> <script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="/static/js/main.js"></script> <script src="/static/js/main.js"></script>
</body> </body>