Merge pull request #125 from ZeusWPI/feature/104/show-map-on-location-page

#104 adds a map to the locations

README.md

@@ -22,7 +22,8 @@ This will create a virtual environment, install the necessary dependencies and w
 If you are using a database other then sqlite you will first need to configure the correct uri to the database in the generated 'config.py' file.
 Afterwards upgrade the database to the latest version using 
 
-    python app/haldis.py db upgrade
+    cd app
+    python haldis.py db upgrade
     
 You can now still seed the database by running
 

app/static/css/main.css

@@ -3,6 +3,10 @@ body {
   padding-top: 70px;
 }
 
+.padding-top {
+  padding-top: 10px;
+}
+
 .darker {
    background-color: #fafafa;
    margin-top: 10px;
@@ -23,6 +27,21 @@ body {
     padding-left: 20px;
 }
 
+
+@media(min-width: 768px) and (max-width: 991px){
+    /* Make sure the small map in the location page has the same with as the block above */
+    .sm-no-side-padding {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+}
+
+@media(min-width: 992px){
+    .md-no-right-padding {
+        padding-right: 0px;
+    }
+}
+
 .showcase .product {
     font-size: 16px;
 }

app/static/css/map.css

@@ -1,4 +1,9 @@
-#mapid {
+.large-map {
     min-height: 400px;
     height: 600px;
-}
+}
+
+.small-map {
+    min-height: 150px;
+    height: 250px;
+}

app/static/js/map.js

@@ -1,11 +1,11 @@
-var map = L.map('mapid').setView([
-    51.0231119, 3.7102741
-], 14);
+var map = L.map('mapid');
 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);
 
 
+let base_request_uri = "https://photon.komoot.de/api/?limit=1&q=";
+
 function performRequest(url, location, success_callback) {
     var request = new XMLHttpRequest();
     request.open('GET', url, true);
@@ -52,6 +52,10 @@ let callback = function OSMCallBack(location, data) {
         marker.on('mouseout', function(env) {
             marker.closePopup();
         });
+
+        if (location.center) {
+            map.setView([lat, lon], 14);
+        }
     } else {
         console.log(`Location ${JSON.stringify(location, null, 2)} returned no features, are you sure this is a valid address?`);
     }
@@ -59,7 +63,7 @@ let callback = function OSMCallBack(location, data) {
 
 function loadmap(locations) {
     for (let loc of locations) {
-        let request_uri = "https://photon.komoot.de/api/?limit=1&q=" + loc.address;
+        let request_uri = base_request_uri + loc.address;
         performRequest(request_uri, loc, callback);
     }
 }

app/templates/location.html

@@ -5,15 +5,20 @@
 
 {% block container %}
 <div class="row" xmlns="http://www.w3.org/1999/html">
-    <div class="col-md-push-1 col-md-10 darker">
-        <h3>Location: {{ location.name }}</h3>
-        <span class="glyphicon glyphicon-home"></span>: {{ location.address }} <br/>
-        <span class="glyphicon glyphicon-phone"></span>: {{ location.telephone }} <br/>
-        <span class="glyphicon glyphicon-link"></span>: <a href="{{ location.website}}">{{ location.website }}</a> <br/>
+    <div class="col-md-push-1 col-md-5 darker">
+        <h3>{{ location.name }}</h3>
+        <span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/>
+        <span class="glyphicon glyphicon-phone"></span> {{ location.telephone }} <br/>
+        <span class="glyphicon glyphicon-link"></span> <a href="{{ location.website}}">{{ location.website }}</a>
         {% if not current_user.is_anonymous() %}
             <a href="{{ url_for("order_bp.orders", location_id=location.id) }}" class="btn btn-primary btn-sm">Create order</a>
         {% endif %}
     </div>
+    <div class="col-md-push-1 col-md-5 padding-top sm-no-side-padding md-no-right-padding">
+        {% if location.address %}
+            <div class="small-map" id="mapid"></div>
+        {% endif %}
+    </div>
 </div>
 <div class="row">
     <div class="col-md-push-1 col-md-10 darker">
@@ -34,3 +39,31 @@
     </div>
 </div>
 {% endblock %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}">
+<link rel="stylesheet" href="{{url_for('static', filename='css/map.css')}}">
+{% endblock %}
+
+{% block scripts %}
+{{super()}}
+
+{% if location.address %}
+  <script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
+  <script src="{{ url_for('static', filename='js/map.js' ) }}"></script>
+  <script>
+      let locations = [];
+
+      loc = {
+          "address": "{{location.address}}",
+          "name": "{{location.name}}",
+          "url": "{{location.website}}",
+          "center": true,
+      };
+      locations.push(loc);
+
+      loadmap(locations);
+  </script>
+{% endif %}
+{% endblock %}

app/templates/maps.html

@@ -4,7 +4,7 @@
 {% import "utils.html" as util %}
 
 {% block container %}
-<div id="mapid"></div>
+<div id="mapid" class="large-map"></div>
 {% endblock %}
 
 {% block styles %}
@@ -28,13 +28,15 @@
     loc = {
         "address": "{{loc.address}}",
         "name": "{{loc.name}}",
-	"url": "{{ url_for('location', id=loc.id) }}"
+        "url": "{{ url_for('location', id=loc.id) }}"
     };
     locations.push(loc);
 
     {% endif %}
 {%- endfor %}
 
+map.setView([51.0231119, 3.7102741], 14);
+
  loadmap(locations);
 </script>
 {% endblock %}