Add link to see map on House location

src/components/molecules/House.svelte

@@ -16,6 +16,7 @@
     export let ratio: number
     export let date: string = undefined
     export let city: string = undefined
+    export let location: string
 </script>
 
 <div class="house grid">
@@ -25,7 +26,10 @@
         </h2>
         <p class="info text-info">
             {#if city}
-                <Icon class="icon" icon="map-pin" label="Map pin" /> {city} <span class="sep">·</span>
+                <a href="https://www.openstreetmap.org/search?query={title}, {city} {location}" target="_blank" rel="noopener noreferrer">
+                    <Icon class="icon" icon="map-pin" label="Map pin" /> {city}
+                </a>
+                <span class="sep">·</span>
             {/if}
             {#if date}
                 <time datetime={dayjs(date).format('YYYY-MM-DD')}>

src/routes/[country]/[location]/index.svelte

@@ -275,6 +275,7 @@
                     photoAlt={alt}
                     url="/{params.country}/{params.location}/{slug}"
                     {city}
+                    location={location.name}
                     ratio={width / height}
                     date={date_taken}
                     index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}

src/style/molecules/_house.scss

@@ -6,7 +6,7 @@
         grid-column-start: 3;
     }
 
-    a {
+    & > a {
         display: block;
         width: 100%;
         height: 100%;
@@ -57,6 +57,15 @@
             & > * {
                 display: inline-block;
             }
+            a {
+                text-decoration: none;
+                color: currentColor;
+
+                &:hover {
+                    color: $color-secondary;
+                    text-decoration: underline;
+                }
+            }
             :global(svg) {
                 width: 1em;
                 height: 1em;