diff --git a/static/css/style.css b/static/css/style.css index eaa9524..55785ee 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2,7 +2,7 @@ html, body { margin: 0; padding: 0; height: 100%; - font-family: 'Lora', serif; + font-family: 'Libre Baskerville', serif; } *, *:before, *:after { @@ -11,13 +11,21 @@ html, body { body { background: #fff; - color: #000; + color: #222; } +a { + color: inherit; +} + +/* background map */ + #map { height: 100%; } +/* filters */ + #filter-picker { position: absolute; z-index: 10; @@ -122,3 +130,63 @@ body { border: 2px solid rgba(0,0,0,.5); background: rgba(0,0,0,.2); } + +/* overlay text */ +#overlay { + position: absolute; + z-index: 1001; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: linear-gradient(to bottom left, rgba(255,255,255,.2), white 50%); + display: table-cell; + vertical-align: center; +} + +#overlay .text { + position: absolute; + top: 50%; + left: 50%; + width: 90%; + max-width: 1024px; + transform: translate(-50%,-50%); +} + +#overlay h1 { + margin-top: -1.2em; + font-size: 48px; + margin-bottom: 0; + display: inline-block; + font-weight: 500; + font-style: italic; +} + +#overlay p { + margin: 1em 0 1.2em; + padding: 1.6em 0 .6em; + line-height: 1.5; + font-size: 20px; + border-top: 3px solid #c0c0c0; +} + +#overlay a { + text-decoration: none; + border-bottom: 1px dotted #333; + padding-bottom: .2em; +} + +#overlay a:hover { + border-bottom-color: transparent; +} + +#overlay .begin { + font-size: 24px; + border-bottom: none; + font-weight: bold; +} + +#overlay .begin:after { + content: '›'; + padding-left: .1em; +} diff --git a/static/js/main.js b/static/js/main.js index a62a7b0..d25dd50 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -19,8 +19,19 @@ $.getJSON('/articles/') .fail(console.error.bind(console)) .then(function (response) { console.log('Got data successfully!') + console.log(response.length) visualization = new Visualization(map, response, colors) .setupCategoryFilter('.category-filter') .setupYearFilter('.year-filter') .displayMarkers() - }); + }) + +$('.begin').on('click', function (e) { + $('#overlay') + .fadeOut(700) + .then(function() { $(this).remove() }) + + e.preventDefault() + e.stopPropagation() + return false +}) diff --git a/static/js/visualization.js b/static/js/visualization.js index b41423f..0978a51 100644 --- a/static/js/visualization.js +++ b/static/js/visualization.js @@ -33,6 +33,11 @@ class Visualization { map.openPopup(popup) }) + this.oms.addListener('spiderfy', (marker) => { + this.map.setCenter(marker.getLatLng()) + this.map.setZoom(20) + }) + // set up markers this._markers = new Map() this.setupMarkers() diff --git a/views/index.tpl b/views/index.tpl index 99d7fc5..9814ba3 100644 --- a/views/index.tpl +++ b/views/index.tpl @@ -2,12 +2,23 @@ - Visualization of Hate Crime in Berlin + A mad world - Rechte Übergriffe in Berlin 2005 bis 2014 - + + +
+
+

A mad world

+

+ Jeder Punkt dieser Karte steht für einen Übergriff im Zeitraum von Januar 2005 bis November 2014.
+ Die Chronik wurde erstellt von ReachOut Berlin. Analyse und Visualisierung von Joshua Widmann und Arne Schlüter. +

+ Beginnen +
+