diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 99413083..44044af0 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -10,55 +10,27 @@ export default class extends Controller {
     var markers = JSON.parse(this.element.dataset.coordinates)
     var center = markers[markers.length - 1] || JSON.parse(this.element.dataset.center)
     var center = (center === undefined) ? [52.516667, 13.383333] : center;
-    var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '© OpenStreetMap'
-    });
-
-    var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
-    });
-
-    var baseMaps = {
-      "OpenStreetMap": osm,
-      "OpenStreetMap.HOT": osmHOT
-  };
 
     var map = L.map(this.containerTarget, {
-      layers: [osm, osmHOT]
+      layers: [this.osmMapLayer(), this.osmHotMapLayer()]
     }).setView([center[0], center[1]], 14);
 
-
-    var markersArray = []
-
-    for (var i = 0; i < markers.length; i++) {
-      var lat = markers[i][0];
-      var lon = markers[i][1];
-
-      var popupContent = this.popupContent(markers[i]);
-      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
-
-      markersArray.push(circleMarker.bindPopup(popupContent).openPopup())
-    }
-
+    var markersArray = this.markersArray(markers)
     var markersLayer = L.layerGroup(markersArray)
-    markersLayer.addTo(map);
 
     var polylineCoordinates = markers.map(element => element.slice(0, 2));
     var polylineLayer = L.polyline(polylineCoordinates)
-    polylineLayer.addTo(map);
 
     var controlsLayer = {
       "Points": markersLayer,
       "Polyline": polylineLayer
     }
 
-    var layerControl = L.control.layers(baseMaps, controlsLayer).addTo(map);
+    var layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(map);
 
     this.addTileLayer(map);
-    // var markersLayer = this.addMarkers(map, markers);
-    // this.addPolyline(map, markers);
+    markersLayer.addTo(map);
+    polylineLayer.addTo(map);
     this.addLastMarker(map, markers);
   }
 
@@ -66,6 +38,50 @@ export default class extends Controller {
     this.map.remove();
   }
 
+  osmMapLayer() {
+    return L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap'
+    })
+  }
+
+  osmHotMapLayer() {
+    return L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
+    })
+  }
+
+  baseMaps() {
+    return {
+      "OpenStreetMap": this.osmMapLayer(),
+      "OpenStreetMap.HOT": this.osmHotMapLayer()
+    }
+  }
+
+  controlsLayer() {
+    return {
+      "Points": this.markersLayer,
+      "Polyline": this.polylineLayer
+    }
+  }
+
+  markersArray(markers_data) {
+    var markersArray = []
+
+    for (var i = 0; i < markers_data.length; i++) {
+      var lat = markers_data[i][0];
+      var lon = markers_data[i][1];
+
+      var popupContent = this.popupContent(markers_data[i]);
+      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
+
+      markersArray.push(circleMarker.bindPopup(popupContent).openPopup())
+    }
+
+    return markersArray
+  }
+
   popupContent(marker) {
     return `
       <b>Timestamp:</b> ${this.formatDate(marker[4])}<br>