Add openstreetmap to locations and Wrap blog tag filters in nav element for accessibility

bakerydemo/locations/models.py

@@ -199,13 +199,24 @@ def is_open(self):
             return False
 
     # Makes additional context available to the template so that we can access
-    # the latitude, longitude and map API key to render the map
+    # the latitude and longitude to render the OpenStreetMap embed
     def get_context(self, request):
         context = super(LocationPage, self).get_context(request)
         context["lat"] = self.lat_long.split(",")[0]
         context["long"] = self.lat_long.split(",")[1]
-        context["google_map_api_key"] = settings.GOOGLE_MAP_API_KEY
         return context
 
     # Can only be placed under a LocationsIndexPage object
     parent_page_types = ["LocationsIndexPage"]
+
+    @property
+    def lat(self):
+        if self.lat_long:
+            return self.lat_long.split(",")[0].strip()
+        return None
+
+    @property
+    def long(self):
+        if self.lat_long:
+            return self.lat_long.split(",")[1].strip()
+        return None

bakerydemo/static/css/main.css

@@ -34,10 +34,9 @@ each detail view
   --dark-orange: #833701;
   --font--primary: 'Marcellus', serif;
   /* stylelint-disable */
-  --font--secondary:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
-    'Helvetica Neue', Arial, sans-serif, Apple Color Emoji, 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font--secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
+    Roboto, 'Helvetica Neue', Arial, sans-serif, Apple Color Emoji,
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   /* stylelint-enable */
   --font-sm: 1rem;
   --font-md: 1.125rem;
@@ -933,6 +932,18 @@ footer {
   }
 }
 
+/* Location index map */
+.location-index-map {
+  margin-bottom: 40px;
+}
+
+.location-index-map__note {
+  font-size: var(--font-sm);
+  color: var(--dark);
+  margin-top: 10px;
+  font-style: italic;
+}
+
 /* Location detail page */
 .location__meta-title {
   font-family: var(--font--primary);
@@ -955,6 +966,21 @@ footer {
   display: block;
 }
 
+.location-map {
+  margin-top: 10px;
+}
+
+.location-map__link {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: var(--font-sm);
+  color: var(--orange);
+}
+
+.location-map__link:hover {
+  color: var(--dark-orange);
+}
+
 /* ---- Blog Index Page ---- */
 .blog-tags {
   list-style: none;

bakerydemo/templates/blog/blog_index_page.html

@@ -27,12 +27,14 @@ <h1 class="index-header__title">Blog</h1>
         {% endif %}
 
         {% if page.get_child_tags %}
-            <ul class="blog-tags">
-                <li><span class="blog-tags__pill blog-tags__pill--selected">All</span></li>
-                {% for tag in page.get_child_tags %}
-                    <li><a class="blog-tags__pill" aria-label="Filter by tag name {{ tag }}" href="{{ tag.url }}">{{ tag }}</a></li>
-                {% endfor %}
-            </ul>
+            <nav aria-label="Blog tag filters">
+                <ul class="blog-tags">
+                    <li><span class="blog-tags__pill blog-tags__pill--selected">All</span></li>
+                    {% for tag in page.get_child_tags %}
+                        <li><a class="blog-tags__pill" aria-label="Filter by tag name {{ tag }}" href="{{ tag.url }}">{{ tag }}</a></li>
+                    {% endfor %}
+                </ul>
+            </nav>
         {% endif %}
 
         <div class="blog-list">

bakerydemo/templates/locations/location_page.html

@@ -46,6 +46,23 @@ <h2 class="location__meta-title">Operating Status</h2>
                             <h2 class="location__meta-title">Address</h2>
                             <address>{{ page.address|linebreaks }}</address>
 
+                            {% if page.lat_long %}
+                                <h2 class="location__meta-title">Map</h2>
+                                <div class="location-map">
+                                    <iframe
+                                        width="100%"
+                                        height="250"
+                                        frameborder="0"
+                                        scrolling="no"
+                                        marginheight="0"
+                                        marginwidth="0"
+                                        src="https://www.openstreetmap.org/export/embed.html?marker={{ lat }},{{ long }}&layer=mapnik"
+                                        style="border: 1px solid #ccc; border-radius: 4px;">
+                                    </iframe>
+                                    <a href="https://www.openstreetmap.org/?mlat={{ lat }}&mlon={{ long }}#map=15/{{ lat }}/{{ long }}" target="_blank" rel="noopener noreferrer" class="location-map__link">View on OpenStreetMap</a>
+                                </div>
+                            {% endif %}
+
                             {% if page.operating_hours %}
                                 <h2 class="location__meta-title">Opening hours</h2>
                                 {% for hours in page.operating_hours %}

bakerydemo/templates/locations/locations_index_page.html

@@ -6,6 +6,26 @@
     {% include "base/include/header-index.html" %}
 
     <div class="container">
+        {% if locations %}
+            {% with locations.0 as first_location %}
+                {% if first_location.lat_long %}
+                    <div class="location-index-map">
+                        <iframe
+                            width="100%"
+                            height="350"
+                            frameborder="0"
+                            scrolling="no"
+                            marginheight="0"
+                            marginwidth="0"
+                            src="https://www.openstreetmap.org/export/embed.html?marker={{ first_location.lat_long }}&layer=mapnik"
+                            style="border: 1px solid #ccc; border-radius: 4px;">
+                        </iframe>
+                        <p class="location-index-map__note">View all locations on the map by visiting each location page.</p>
+                    </div>
+                {% endif %}
+            {% endwith %}
+        {% endif %}
+
         <div class="location-list-page">
             {% for location in locations %}
                 {% include "includes/card/picture-card.html" with page=location portrait=False %}