diff --git a/website/components/LocationDetails.vue b/website/components/LocationDetails.vue index 88a14c6806..0c1c3a79d9 100644 --- a/website/components/LocationDetails.vue +++ b/website/components/LocationDetails.vue @@ -55,8 +55,18 @@ name: store.properties.provider_brand_name, }) }} - + + + + + {{ $t("Get Directions") }} + +
@@ -105,6 +115,12 @@

+

+ + {{ $t("Get Directions") }} + + +

@@ -151,6 +167,20 @@ export default { return rel; }, + + directionsLink() { + return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent( + [ + this.store.properties.address, + this.store.properties.city, + [this.store.properties.state, this.store.properties.postal_code] + .filter((value) => !!value) + .join(", "), + ] + .filter((value) => !!value) + .join(", ") + )}`; + }, }, }; diff --git a/website/components/LocationMap.vue b/website/components/LocationMap.vue index 40d84f0c03..96122abd3d 100644 --- a/website/components/LocationMap.vue +++ b/website/components/LocationMap.vue @@ -178,8 +178,12 @@ export default { }); this.map.on("click", "locations", (e) => { - const coordinates = e.features[0].geometry.coordinates.slice(); - const store = e.features[0]; + const store = e.highlightLocationId + ? e.features.find( + (feature) => feature.properties.id === e.highlightLocationId + ) + : e.features[0]; + const coordinates = store.geometry.coordinates.slice(); // Nested JSON data in the properties is represented as JSON strings // (rather than actual objects) when fetching the object from the click @@ -255,6 +259,28 @@ export default { this.mapBoundsAnimate = true; } }, + + highlightLocation(store) { + const [lng, lat] = store.geometry.coordinates; + this.map.panTo( + { + lon: lng, + lat, + }, + { + duration: 250, + } + ); + setTimeout(() => { + this.map.fire("click", { + lngLat: { + lng, + lat, + }, + highlightLocationId: store.properties.id, + }); + }, 500); + }, }, }; diff --git a/website/components/Store.vue b/website/components/Store.vue index 9be8568b05..55bb998800 100644 --- a/website/components/Store.vue +++ b/website/components/Store.vue @@ -4,7 +4,13 @@

- {{ title }} + {{ title }} - + + {{ fullAddress }} +
{{ $t("{distance} miles", { distance: store.distance }) }} @@ -37,7 +43,6 @@ export default { ) { title += ` - ${this.store.properties.name}`; } - title += ` - ${this.fullAddress}`; return title; }, diff --git a/website/pages/_state.vue b/website/pages/_state.vue index 44959dd008..c8b7abdd02 100644 --- a/website/pages/_state.vue +++ b/website/pages/_state.vue @@ -17,7 +17,7 @@
- +
@@ -58,6 +58,9 @@ v-for="store in filteredLocationsPage" :key="store.properties.id" :store="store" + @highlight-location=" + $refs.locationMap.highlightLocation($event) + " >