Merge pull request #376 from BeniRupp/feature/location-section

Add location section that shows active Hackergarten locations

Author: madmas

css/main.css

@@ -80,3 +80,10 @@ span.reason {
     height: 100px;
     width: 100px;
 }
+
+#map {
+    height: 350px;
+}
+#map .location-marker {
+    font-size: 16px;
+}

index.html

@@ -20,6 +20,10 @@
     <link href="ng-dialog/css/ngDialog.min.css" rel="stylesheet">
     <link href="ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
 
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+          integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+          crossorigin=""/>
+
     <link href="css/main.css" rel="stylesheet">
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@@ -74,6 +78,14 @@
                 </div>
             </div>
 
+            <!-- locations -->
+            <div class="panel panel-default">
+                <div class="panel-heading">Locations</div>
+                <div class="panel-body">
+                    <div id="map"></div>
+                </div>
+            </div>
+
             <!-- past events -->
             <div class="panel panel-default">
                 <div class="panel-heading">Past Events</div>
@@ -252,12 +264,16 @@ <h4><strong>Hack {{ngDialogData.title}}.</strong></h4>
 <script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-xss/0.3.3/xss.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+        crossorigin=""></script>
 
 <script src="ng-dialog/js/ngDialog.js"></script>
 
 <script src="scripts/hgMainPage.js"></script>
 <script src="scripts/eventlist.js"></script>
 <script src="scripts/github.js"></script>
+<script src="scripts/locations.js"></script>
 
 <script src="scripts/mastodon.widget.js"></script>
 <script>

scripts/locations.js

@@ -0,0 +1,43 @@
+$(document).ready(function () {
+    var map = L.map("map");
+    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        maxZoom: 19,
+        attribution:
+            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(map);
+
+    var markers = locations.map((location) =>
+        L.marker([location.lat, location.lon]).bindPopup(
+            '<span class="location-marker">' + location.venue + "</span>"
+        )
+    );
+    markers.forEach((marker) => {
+        marker.addTo(map);
+    });
+
+    var group = new L.featureGroup(markers);
+    map.fitBounds(group.getBounds());
+});
+
+var locations = [
+    {
+        venue: "Quatico Solutions AG",
+        lat: 47.3925495,
+        lon: 8.507826793619888,
+    },
+    {
+        venue: "codecentric AG",
+        lat: 48.72592,
+        lon: 9.1144,
+    },
+    {
+        venue: "CSS Versicherung",
+        lat: 47.0435895,
+        lon: 8.315118,
+    },
+    {
+        venue: "Karakun AG",
+        lat: 47.5487602,
+        lon: 7.5879349,
+    },
+];