Basic code, still needs some layout changes

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([
+var map = L.map('mapid');
-    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);
 
 
+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,12 +5,19 @@
 
 {% block container %}
 <div class="row" xmlns="http://www.w3.org/1999/html">
-    <div class="col-md-push-1 col-md-10 darker">
+    <div class="col-md-push-1 col-md-5 darker">
-        <h3>Location: {{ location.name }}</h3>
+        <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>
     </div>
+    <div class="col-md-push-1 col-md-5 darker">
+        {% 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">
         <h3 id="order-title">Products</h3>
         <table class="table table-hover table-condensed">
@@ -29,3 +36,30 @@
     </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}}",
+          "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 %}