From 24582be4a6c724d03167335c120e68dc5cc3050e Mon Sep 17 00:00:00 2001 From: Jim Martens Date: Tue, 30 Apr 2019 21:07:12 +0200 Subject: [PATCH] Added first version of election map feature Signed-off-by: Jim Martens --- _assets/css/main.scss | 39 ++++++++++++++++++- _assets/javascripts/main.js | 56 +++++++++++++++++++++++++--- _data/bezirkswahl.yml | 35 ++++++++++++++++++ _includes/bezirkskarte.html | 74 +++++++++++++++++++++++++++++++++++++ pages/bezirkswahl.html | 4 ++ 5 files changed, 201 insertions(+), 7 deletions(-) create mode 100644 _data/bezirkswahl.yml create mode 100644 _includes/bezirkskarte.html diff --git a/_assets/css/main.scss b/_assets/css/main.scss index bf6c7e5..167c4d2 100644 --- a/_assets/css/main.scss +++ b/_assets/css/main.scss @@ -1,3 +1,40 @@ @charset "UTF-8"; -// non-critical CSS \ No newline at end of file +// non-critical CSS + +// map of election district feature + +#election_map svg { + height: auto; + width: 100%; + margin: 0 auto; + display: block; +} + +#election_map g { + fill: #ccc; +} + +#election_map g:visited { + /*fill: #fc0 !important;*/ + fill: #fc0; +} +#election_map g:hover { + fill: #228B22; + cursor: pointer; +} + +#election_map g:active { + fill: #fc0; +} + +.info_panel { + background-color: rgba(255,255,255, .8); + /*background-color: rgba(255,204,0, .8);*/ + padding: 5px; + font-size: 10px; + position: absolute; + border: 1px solid #333; + color: #333; + white-space: nowrap; +} diff --git a/_assets/javascripts/main.js b/_assets/javascripts/main.js index c64203a..8ebecb8 100644 --- a/_assets/javascripts/main.js +++ b/_assets/javascripts/main.js @@ -1,6 +1,6 @@ "use strict"; -$(function() { +$(function () { let mainMenu = $("#mainmenuNavbar"); mainMenu.on("show.bs.collapse", function () { $("#submenuNavbar").addClass("invisible"); @@ -34,11 +34,13 @@ $(function() { }); let countdownSpan = $("#countdown"); - countdown.setFormat({singular: " Millisekunde| Sekunde| Minute| Stunde| Tag| Woche| Monat| Jahr| Jahrzehnt| Jahrhundert| Jahrtausend", - plural: " Millisekunden| Sekunden| Minuten| Stunden| Tage| Wochen| Monate| Jahre| Jahrzehnte| Jahrhunderte| Jahrtausende", - last: " und ", - delim: ", "}); - let counterID = countdown(function(timestamp) { + countdown.setFormat({ + singular: " Millisekunde| Sekunde| Minute| Stunde| Tag| Woche| Monat| Jahr| Jahrzehnt| Jahrhundert| Jahrtausend", + plural: " Millisekunden| Sekunden| Minuten| Stunden| Tage| Wochen| Monate| Jahre| Jahrzehnte| Jahrhunderte| Jahrtausende", + last: " und ", + delim: ", " + }); + let counterID = countdown(function (timestamp) { countdownSpan.html(timestamp.toString()); }, new Date(2019, 4, 26, 18, 0), countdown.DAYS | @@ -47,4 +49,46 @@ $(function() { countdown.SECONDS ); + // election map feature + // v0.1 + + let stadtteil_svg = $("#election_map g.stadtteil"); + + stadtteil_svg.mouseenter(function (e) { + const region_data = $(this).data(); + let tooltip = $("
" + region_data.name + "
" + + region_data.platz1 + "
" + + region_data.platz2 + "
" + ); + + let mouseX = e.pageX, //X coordinates of mouse + mouseY = e.pageY; //Y coordinates of mouse + tooltip.appendTo("body"); + tooltip.css({ + top: mouseY - 60, + left: mouseX - (tooltip.width() / 2) + }); + + }); + + stadtteil_svg + // deactivate links for now + /*.click(function (e) { + e.preventDefault(); + const region_data = $(this).data(); + window.location.href = region_data.link; + })*/ + .mouseout(function (e) { + $("#info_panel").remove(); + }) + .mousemove(function (e) { + let mouseX = e.pageX, //X coordinates of mouse + mouseY = e.pageY; //Y coordinates of mouse + let info_panel = $("#info_panel"); + info_panel.css({ + top: mouseY - 60, + left: mouseX - (info_panel.width() / 2) + }); + }); + }); diff --git a/_data/bezirkswahl.yml b/_data/bezirkswahl.yml new file mode 100644 index 0000000..a8f0f25 --- /dev/null +++ b/_data/bezirkswahl.yml @@ -0,0 +1,35 @@ +showMap: true +wahlkreise: + eimsbuettelnord: + name: Eimsbuettel Nord + platz1: Anne-Katrin Warnecke + platz2: Jost Leonhardt Fischer + link: + eimsbuettelsued: + name: Eimsbuettel Süd + platz1: Miriam Putz + platz2: Falk Schmidt-Tobler + stellingen: + name: Stellingen + platz1: Dietmar Kuhlmann + platz2: Nico Thies + eidelstedt: + name: Eidelstedt + platz1: Ali Mir Agha + platz2: Klaus Hoffmann + haro: + name: Harvestehude/Rotherbaum + platz1: Nina Schübel + platz2: Jan Koriath + lokstedt: + name: Lokstedt + platz1: Lisa Kern + platz2: Kevin Köhler + schnelsen: + name: Schnelsen + platz1: Lynne Hunter + platz2: Jim Martens + niendorf: + name: Niendorf + platz1: Sina Demirhan + platz2: Lutz Schmidt diff --git a/_includes/bezirkskarte.html b/_includes/bezirkskarte.html new file mode 100644 index 0000000..6417251 --- /dev/null +++ b/_includes/bezirkskarte.html @@ -0,0 +1,74 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
© Jost Leonhardt Fischer 2019
diff --git a/pages/bezirkswahl.html b/pages/bezirkswahl.html index 733e19f..45fafd3 100644 --- a/pages/bezirkswahl.html +++ b/pages/bezirkswahl.html @@ -5,6 +5,10 @@ description: On this page you can find information about my campaign in the loca sidebarboxes: election-info election_requests events --- +{% if site.data.bezirkswahl.showMap %} + {% include bezirkskarte.html %} +{% endif %} +

Am 26. Mai 2019 findet die kombinierte Wahl des EU-Parlaments und der Bezirksversammlungen in Hamburg statt. Dabei trete ich im Bezirk Eimsbüttel für die GRÜNEN an. Die listenaufstellende Mitgliederversammlung