Wo ist Wachseldorn?
Im Kanton Bern gibt es 337 politische Gemeinden. Knapp 80 davon gehören zur Verwaltungsregion Oberland. Dieses Gebiet erstreckt sich von Gsteig bei Gstaad im Westen bis Innertkirchen im Osten. Die interaktive Karte gibt dir einen Überblick über die 79 Gemeinden.
Seit 2010 ist der Kanton Bern in fünf Verwaltungsregionen gegliedert. Gemessen an der Fläche ist das Oberland die grösste Verwaltungsregion. Hier befinden sich touristische Ziele wie das Jungfraujoch, der Thunersee oder ein gewisser Steg in Iseltwald (was es damit auf sich hat, kannst du zum Beispiel hier nachlesen).
Aber auch unscheinbarere Orte, wie Boltigen, Därligen oder Gurzelen, liegen in der Verwaltungsregion Oberland. Vielleicht wohnst du selbst irgendwo in diesem Gebiet, vielleicht aber auch in einem ganz anderen Teil der Schweiz. Wie dem auch sei, Orte zu erkunden, die man noch nicht kennt, lohnt sich allemal. Ein Blick auf die interaktive Karte verrät dann auch, wo denn nun Wachseldorn ist.
Hier geht’s zur Karte.
(bas)
Ausgangslage
Beim Lesen von Beiträgen auf News-Portalen begegne ich immer wieder Karten oder Infografiken, die mit einem Hover-Effekt versehen sind. Sobald man über einen bestimmten Bereich fährt, werden weitere Informationen angezeigt. Weil ich das eine gelungene Art finde, um Wissenswertes anzuzeigen, wollte ich das selbst in einem Projekt einsetzen.
Ich wohne seit einiger Zeit in der Region Thun und habe Verwandte in verschiedenen Orten im Berner Oberland. Daneben gab es bisher viele Gemeinden, die ich vielleicht dem Namen nach kannte, aber geografisch nicht zuordnen konnte. So machte ich die Verwaltungsregion Oberland zum Inhalt der interaktiven Karte, um mich zukünftig selbst besser orientieren zu können.
Umsetzung
Als erstes brauchte ich das passende Kartenmaterial im richtigen Format. Weil ich keine bestehende Karte der Verwaltungsregion Oberland als SVG fand, erstellte ich sie selbst. Dafür zog ich mir eine Karte des Gebiets in Adobe Illustrator und zeichnete die Gemeindegrenzen als Pfade nach. Bei 79 Gemeinden ergab das ziemlich viele Punkte. Die Pfade benannte ich mit dem Gemeindenamen, um sie später mit JavaScript ansprechen zu können.
Mit HTML und CSS baute ich die Struktur der Website auf. Den Code der SVG-Datei kopierte ich dann direkt in die HTML-Datei. Die Karte wurde nun also bereits angezeigt, die interaktive Funktionalität fehlte aber noch.
Diese kam dann durch JavaScript ins Spiel: Mit verschiedenen EventListeners und Funktionen sorgte ich dafür, dass beim Hovern über eine Gemeinde eine Infobox mit einigen Fakten erscheint, diese jeweils neben dem Cursor angezeigt wird und wieder verschwindet, wenn der Cursor nicht mehr auf einer Gemeinde platziert ist.
Die Fakten der Gemeinden sammelte ich in einer weitere JS-Datei, die so als Datenbank diente. Diese stellte ich von Hand zusammen, was viel Tipparbeit bedeutete. Als Quelle dienten mit die Wikipedia-Seiten der Gemeinden sowie das Postleitzahlverzeichnis der Schweizerischen Post. Eine Funktion sorgte dann jeweils dafür, dass beim Hovern über eine Gemeinde die dazu passenden Fakten erscheinen.
Um die interaktive Karte auch auf mobilen Geräten brauchbar zu machen, war neben etwas Styling in CSS eine weitere Funktion in JS nötig, die die Fenstergrösse überprüft und die Infobox jeweils entsprechend platziert.
Erkenntnisse
Wenn man eine Karte im SVG-Format hat, lässt sie sich relativ einfach interaktiv machen. In meinem Fall war ziemlich viel «Handarbeit» nötig – zum einen, um die Karte zu zeichnen und zum anderen, um die Daten zusammenzustellen. Gerade letzteres könnte vereinfach werden, indem die Daten von geeigneten Quellen «gescraped» werden oder eine API angezapft wird.
Unter dem Strich
Die interaktive Karte kombiniert Fakten, die man so zum Beispiel auf Wikipedia findet, mit einer übersichtlichen Darstellung. So sieht man auf einen Blick, welche Gemeinde wo liegt, wie gross sie im Verhältnis zu den anderen ist und wie viele Leute dort leben. Ich hoffe, wer sie betrachtet, kann das eine oder andere entdecken, das bisher noch unbekannt war.