Merge pull request #102 from ZeusWPI/fix_map

move script to separate js file, add logging for bad adresses

app/static/js/map.js

@@ -0,0 +1,61 @@
+var map = L.map('mapid').setView([
+    51.0231119, 3.7102741
+], 14);
+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, location, 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(location, data);
+        } else {
+            // We reached our target server, but it returned an error
+        }
+    };
+    request.onerror = function() {
+        console.log("Error requestion location coordinates");
+        // There was a connection error of some sort
+    };
+    request.send();
+}
+
+let marker_icon = L.icon({
+    iconUrl: "/static/images/marker-icon.png",
+    shadowUrl: "/static/images/marker-shadow.png"
+});
+
+let callback = function OSMCallBack(location, data) {
+    var lat, lon;
+    if (data.features.length >= 1) {
+        var place = data.features[0].properties;
+        lat = data.features[0].geometry.coordinates[1];
+        lon = data.features[0].geometry.coordinates[0];
+
+        let marker = L.marker([lat, lon], {
+                icon: marker_icon
+            }).addTo(map)
+            .bindPopup(location.name + ', ' + location.address);
+
+        marker.on('mouseover', function(env) {
+            marker.openPopup();
+        });
+        marker.on('mouseout', function(env) {
+            marker.closePopup();
+        });
+    } else {
+        console.log(`Location ${JSON.stringify(location, null, 2)} returned no features, are you sure this is a valid address?`);
+    }
+};
+
+function loadmap(locations) {
+    for (let loc of locations) {
+        let request_uri = "https://photon.komoot.de/api/?limit=1&q=" + loc.address;
+        performRequest(request_uri, loc, callback);
+    };
+}

app/templates/maps.html

@@ -18,74 +18,19 @@
 {% block scripts %}
 {{super()}}
 <script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
-
+<script src="{{ url_for('static', filename='js/map.js' ) }}"></script>
 <script>
-    var map = L.map('mapid').setView([
+ let locations = [];
-                    51.0231119,3.7102741], 14);
+ let loc = {};
-    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);
 
-
+ {% for loc in locations -%}
-    function performRequest(url, location, success_callback) {
+    loc = {
-        var request = new XMLHttpRequest();
+        "address": "{{loc.address}}",
-        request.open('GET', url, true);
+        "name": "{{loc.name}}"
-        request.onload = function () {
-            if (this.status >= 200 && this.status < 400) {
-                // Success!
-                var data = JSON.parse(this.response);
-                success_callback(location, 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();
-    }
-
-    let marker_icon = L.icon({
-        iconUrl: "{{url_for('static', filename='images/marker-icon.png')}}",
-        shadowUrl: "{{url_for('static', filename='images/marker-shadow.png')}}"
-    });
-
-    let callback = function OSMCallBack(location, data){
-            var lat, lon;
-            if (data.features.length >= 1 ) { 
-                var place = data.features[0].properties;
-                lat = data.features[0].geometry.coordinates[1];
-                lon = data.features[0].geometry.coordinates[0];
-                
-                let marker = L.marker([lat, lon], {icon: marker_icon}).addTo(map)
-                    .bindPopup(location.name + ', '  + location.address);
-
-                marker.on('mouseover', function(env) {
-                        marker.openPopup();
-                    });
-                marker.on('mouseout', function(env){
-                    marker.closePopup();
-                });
-            }
     };
+ locations.push(loc);
+ {%- endfor %}
 
-
+ loadmap(locations);
-    let locations = [];
-    let loc = {};
-    {% for loc in locations -%}
-
-        loc =  { "address" : "{{loc.address}}",
-                     "name" : "{{loc.name}}"
-        }; 
-
-        locations.push(loc); 
-
-    {%- endfor %}
-
-    for (let loc of locations) {
-        performRequest("https://photon.komoot.de/api/?limit=1&q=" + loc.address, loc,  callback)
-    };
-
-
 </script>
 {% endblock %}