From 8b073f7054f4c825bdd934696201661fd7a58d3e Mon Sep 17 00:00:00 2001
From: hannes-kl <hannes.klinckaert@ugent.be>
Date: Wed, 28 Nov 2018 20:26:08 +0100
Subject: [PATCH] move leaflet map to partial

---
 layouts/eventpost.erb     | 63 +--------------------------------------
 layouts/partials/_map.erb | 62 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 62 deletions(-)
 create mode 100644 layouts/partials/_map.erb

diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb
index 8633a46..3ead2ca 100644
--- a/layouts/eventpost.erb
+++ b/layouts/eventpost.erb
@@ -78,72 +78,11 @@
       <div class="content has-text-justified is-medium-responsive">
         <%= yield %>
       </div>
-
-      <!-- MAPS -->
-      <div class="map-wrapper box">
-          <div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
-              Could not find location. Please create an issue on github.
-          </div>
-          <div id="map" style="height:100%;"></div>
-      </div>
+      <%= render '/partials/_map.erb', location: item[:locationlink] %>
     </div>
   </div>
 </section>
 
-<script>
-var map = L.map('map');
-
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-}).addTo(map);
-
-function performRequest(url, success_callback) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url, true);
-
-    request.onload = function() {
-      if (this.status >= 200 && this.status < 400) {
-        // Success!
-        var data = JSON.parse(this.response);
-        success_callback(data);
-      } else {
-        // We reached our target server, but it returned an error
-
-      }
-    };
-
-    request.onerror = function() {
-      // There was a connection error of some sort
-    };
-
-    request.send();
-}
-
-performRequest("https://photon.komoot.de/api/?limit=1&q=<%= URI::encode(item[:locationlink]) %>", function(data) {
-    var lat, lon;
-    if(data.features.length < 1) {
-        lat = 51.0538286;
-        lon = 3.7250121;
-
-        var className = 'is-invisible';
-        var el = document.getElementById('map-error');
-
-        if (el.classList)
-          el.classList.remove(className);
-        else
-          el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-    } else {
-        var place = data.features[0].properties;
-        lat = data.features[0].geometry.coordinates[1];
-        lon = data.features[0].geometry.coordinates[0];
-
-        L.marker([lat, lon]).addTo(map)
-            .bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
-            .openPopup();
-    }
-    map.setView([lat, lon], 18);
-});
-</script>
 
 <!-- SPONSORED BY -->
 <% if item[:sponsors] %>
diff --git a/layouts/partials/_map.erb b/layouts/partials/_map.erb
new file mode 100644
index 0000000..9759a71
--- /dev/null
+++ b/layouts/partials/_map.erb
@@ -0,0 +1,62 @@
+      <!-- MAPS -->
+      <div class="map-wrapper box">
+          <div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
+              Could not find location. Please create an issue on github.
+          </div>
+          <div id="map" style="height:100%;"></div>
+      </div>
+
+<script>
+var map = L.map('map');
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+function performRequest(url, success_callback) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url, true);
+
+    request.onload = function() {
+      if (this.status >= 200 && this.status < 400) {
+        // Success!
+        var data = JSON.parse(this.response);
+        success_callback(data);
+      } else {
+        // We reached our target server, but it returned an error
+
+      }
+    };
+
+    request.onerror = function() {
+      // There was a connection error of some sort
+    };
+
+    request.send();
+}
+
+performRequest("https://photon.komoot.de/api/?limit=1&q=<%= URI::encode(@location) %>", function(data) {
+    var lat, lon;
+	if(data.features.length < 1) {
+		        lat = 51.0538286;
+		        lon = 3.7250121;
+
+		        var className = 'is-invisible';
+		        var el = document.getElementById('map-error');
+
+		        if (el.classList)
+			          el.classList.remove(className);
+		        else
+			          el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+		    } else {
+			            var place = data.features[0].properties;
+			            lat = data.features[0].geometry.coordinates[1];
+			            lon = data.features[0].geometry.coordinates[0];
+
+			            L.marker([lat, lon]).addTo(map)
+			                .bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
+			                .openPopup();
+			        }
+	    map.setView([lat, lon], 18);
+});
+</script>