Refactoring/tobias 117 convert leaflet to js

Gemfile

@@ -50,9 +50,6 @@ gem 'tod'
 # Libraries
 #
 
-# Leaflet for map functionality
-gem 'leaflet-rails', git: "git://github.com/Finn-HPI/leaflet-rails.git"
-
 #
 # Gems that are loaded depending on the environment (development/test/production)
 #

Gemfile.lock

@@ -1,10 +1,3 @@
-GIT
-  remote: git://github.com/Finn-HPI/leaflet-rails.git
-  revision: 340f65cbc163dcc3523c43592831d43a65381296
-  specs:
-    leaflet-rails (1.7.4)
-      rails (>= 4.2.0)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -369,7 +362,6 @@ DEPENDENCIES
   factory_bot_rails
   httparty
   jbuilder (~> 2.7)
-  leaflet-rails!
   listen (~> 3.3)
   omniauth
   omniauth_openid_connect

app/assets/constants/buildings.rb

@@ -335,9 +335,9 @@ def self.transform_leaflet_letters(hpi_letters)
     hpi_letters.map do |hpi_letter|
       {
         latlng: hpi_letter[:coordinate],
-        div_icon: {
+        divIcon: {
           html: hpi_letter[:letter],
-          class_name: "building-icon"
+          className: "building-icon"
         }
       }
     end

app/assets/stylesheets/application.scss

@@ -49,8 +49,6 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 // CSS partials
 @import "components/navbar";
 
-@import "leaflet";
-
 body {
   padding-top: 4rem;
 }

app/helpers/routing_helper.rb

@@ -45,9 +45,9 @@ def self.transform_route_to_time_marker(route)
     start = route["geometry"]["coordinates"][0]
     [{
       latlng: [start.second, start.first],
-      div_icon: {
+      divIcon: {
         html: walking_time,
-        class_name: "time-icon"
+        className: "time-icon"
       }
     }]
   end
@@ -68,9 +68,9 @@ def self.transform_target_to_marker(point)
 
     [{
       latlng: coordinates,
-      div_icon: {
+      divIcon: {
         html: "<img src='/assets/pin.png'>",
-        class_name: "target-pin"
+        className: "target-pin"
       }
     }]
   end

app/javascript/packs/application.js

@@ -18,7 +18,8 @@ import 'bootstrap';
 // Fontawesome: https://fontawesome.com/
 import "@fortawesome/fontawesome-free/js/all";
 
-import * as L from "leaflet"
+import * as L from "leaflet";
+import "leaflet/dist/leaflet.css";
 
 Rails.start()
 Turbolinks.start()

app/views/building_map/index.html.erb

@@ -58,14 +58,40 @@
 </datalist>
 
 <div class="container-fluid">
-  <%= map(
-        center: BuildingMapHelper.leaflet_center(@start),
-        polygons: BuildingMapHelper.leaflet_polygons,
-        polylines: BuildingMapHelper.leaflet_polylines(@route),
-        markers: BuildingMapHelper.leaflet_markers(@route, @target))
-  %>
+  <div id="map"></div>
 </div>
 
+<script>
+  const view = <%= raw BuildingMapHelper.leaflet_center(@start).to_json %>;
+  const polygons = <%= raw BuildingMapHelper.leaflet_polygons.to_json %>;
+  const markers = <%= raw BuildingMapHelper.leaflet_markers(@route, @target).to_json %>;
+  const polylines = <%= raw BuildingMapHelper.leaflet_polylines(@route).to_json %>;
+
+  const map = L.map('map').setView(view["latlng"], view["zoom"]);
+
+  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    maxZoom: 19,
+  }).addTo(map);
+
+  markers.forEach((marker) => {
+    marker['divIcon']['iconSize'] = [];
+    marker['divIcon']['iconAnchor'] = [0, 0];
+    marker['divIcon']['popupAnchor'] = [0, 0];
+    var icon = L.divIcon(marker['divIcon']);
+    L.marker(marker['latlng'], {icon: icon}).addTo(map);
+  });
+
+  polygons.forEach(polygon => {
+    L.polygon(polygon['latlngs'], polygon['options']).addTo(map);
+  });
+
+  polylines.forEach(polyline => {
+    L.polyline(polyline['latlngs'], polyline['options']).addTo(map);
+  });
+
+</script>
+
 <script>
     let currentLocation;