+
${name}
${description}
+
Category: ${category}
Open: ${hours}
Phone: ${phone}
-
},${position.lng()}&key=${apiKey}&solution_channel=GMP_codelabs_simplestorelocator_v1_a)
+
},${position.lng()}&key=${key}&solution_channel=GMP_codelabs_simplestorelocator_v1_a)
- `;
-
+ `;
+
infoWindow.setContent(content);
infoWindow.setPosition(position);
- infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
+ infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, -30) });
infoWindow.open(map);
});
-
+
// Build and add the search bar
const card = document.createElement('div');
const titleBar = document.createElement('div');
const title = document.createElement('div');
const container = document.createElement('div');
const input = document.createElement('input');
- const options = {
- types: ['address'],
- // componentRestrictions: {country: 'gb'},
- };
-
+ const options = { types: ['address'] };
+
card.setAttribute('id', 'pac-card');
title.setAttribute('id', 'title');
title.textContent = 'Find the nearest store';
@@ -188,79 +88,90 @@ const mapStyle = [{
card.appendChild(titleBar);
card.appendChild(container);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
-
- // Make the search bar into a Places Autocomplete search bar and select
- // which detail fields should be returned about the place that
- // the user selects from the suggestions.
+
const autocomplete = new google.maps.places.Autocomplete(input, options);
-
- autocomplete.setFields(
- ['address_components', 'geometry', 'name']);
-
- // Set the origin point when the user selects an address
- const originMarker = new google.maps.Marker({map: map});
+ autocomplete.setFields(['address_components', 'geometry', 'name']);
+
+ const originMarker = new google.maps.Marker({ map: map });
originMarker.setVisible(false);
let originLocation = map.getCenter();
-
+
autocomplete.addListener('place_changed', async () => {
- originMarker.setVisible(false);
+ if (originMarker) {
+ originMarker.setMap(null); // Remove the previous marker if relevant
+ }
+
originLocation = map.getCenter();
const place = autocomplete.getPlace();
-
+
if (!place.geometry) {
- // User entered the name of a Place that was not suggested and
- // pressed the Enter key, or the Place Details request failed.
- window.alert('No address available for input: \'' + place.name + '\'');
+ window.alert(`No address available for input: '${place.name}'`);
return;
}
-
+
// Recenter the map to the selected address
originLocation = place.geometry.location;
map.setCenter(originLocation);
- map.setZoom(9);
- console.log(place);
-
- originMarker.setPosition(originLocation);
- originMarker.setVisible(true);
-
+
// Use the selected address as the origin to calculate distances
- // to each of the store locations
const rankedStores = await calculateDistances(map.data, originLocation);
- showStoresList(map.data, rankedStores);
-
+
+ // Filter stores by max radius of 60 miles (96,560 meters)
+ const maxRadiusMeters = 96560;
+ const filteredStores = rankedStores.filter(store => store.distanceVal <= maxRadiusMeters);
+
+ // Show the filtered stores in the relevant panel
+ showStoresList(map.data, filteredStores, panelId);
+
+ // Create a new LatLngBounds object to adjust the map bounds
+ const bounds = new google.maps.LatLngBounds();
+
+ // Extend the bounds to include the user's searched location
+ bounds.extend(originLocation);
+
+ // Extend the bounds to include each store location within the max radius
+ filteredStores.forEach((store) => {
+ const storeFeature = map.data.getFeatureById(store.storeid);
+ const storeLocation = storeFeature.getGeometry().get();
+ bounds.extend(storeLocation);
+ });
+
+ // Adjust the map to fit all markers within the bounds
+ map.fitBounds(bounds);
+
return;
});
- }
-
- /**
- * Use Distance Matrix API to calculate distance from origin to each store.
- * @param {google.maps.Data} data The geospatial data object layer for the map
- * @param {google.maps.LatLng} origin Geographical coordinates in latitude
- * and longitude
- * @return {Promise
} n Promise fulfilled by an array of objects with
- * a distanceText, distanceVal, and storeid property, sorted ascending
- * by distanceVal.
- */
- async function calculateDistances(data, origin) {
- const stores = [];
- const destinations = [];
-
- // Build parallel arrays for the store IDs and destinations
- data.forEach((store) => {
- const storeNum = store.getProperty('storeid');
- const storeLoc = store.getGeometry().get();
-
- stores.push(storeNum);
- destinations.push(storeLoc);
- });
-
- // Retrieve the distances of each store from the origin
- // The returned list will be in the same order as the destinations list
- const service = new google.maps.DistanceMatrixService();
- const getDistanceMatrix =
- (service, parameters) => new Promise((resolve, reject) => {
+ });
+}
+
+/**
+ * Use Distance Matrix API to calculate distance from origin to each store.
+ * @param {google.maps.Data} data The geospatial data object layer for the map
+ * @param {google.maps.LatLng} origin Geographical coordinates in latitude
+ * and longitude
+ * @return {Promise} A promise fulfilled by an array of objects with
+ * a distanceText, distanceVal, and storeid property, sorted ascending
+ * by distanceVal.
+ */
+async function calculateDistances(data, origin) {
+ const stores = [];
+ const destinations = [];
+
+ // Build parallel arrays for the store IDs and destinations
+ data.forEach((store) => {
+ const storeNum = store.getProperty('storeid');
+ const storeLoc = store.getGeometry().get();
+
+ stores.push(storeNum);
+ destinations.push(storeLoc);
+ });
+
+ // Retrieve the distances of each store from the origin
+ // The returned list will be in the same order as the destinations list
+ const service = new google.maps.DistanceMatrixService();
+ const getDistanceMatrix = (service, parameters) => new Promise((resolve, reject) => {
service.getDistanceMatrix(parameters, (response, status) => {
- if (status != google.maps.DistanceMatrixStatus.OK) {
+ if (status !== google.maps.DistanceMatrixStatus.OK) {
reject(response);
} else {
const distances = [];
@@ -268,7 +179,7 @@ const mapStyle = [{
for (let j = 0; j < results.length; j++) {
const element = results[j];
-
+
// Check if distance is available before accessing it
if (element.distance) {
const distanceText = element.distance.text;
@@ -288,60 +199,52 @@ const mapStyle = [{
}
});
});
-
+
const distancesList = await getDistanceMatrix(service, {
origins: [origin],
destinations: destinations,
travelMode: 'DRIVING',
- unitSystem: google.maps.UnitSystem.$MeasurementUnit,
+ unitSystem: google.maps.UnitSystem.$unit,
});
-
- distancesList.sort((first, second) => {
- return first.distanceVal - second.distanceVal;
- });
-
- return distancesList;
+
+ distancesList.sort((first, second) => {
+ return first.distanceVal - second.distanceVal;
+ });
+
+ return distancesList;
+}
+
+// Function to show the list of stores in the specified panel
+function showStoresList(data, stores, panelId) {
+ if (stores.length == 0) {
+ console.log('No stores found');
+ return;
}
-
- /**
- * Build the content of the side panel from the sorted list of stores
- * and display it.
- * @param {google.maps.Data} data The geospatial data object layer for the map
- * @param {object[]} stores An array of objects with a distanceText,
- * distanceVal, and storeid property.
- */
- function showStoresList(data, stores) {
- if (stores.length == 0) {
- console.log('No stores found');
- return;
- }
- // Reference the existing panel in the HTML
- let panel = document.getElementById('panel');
+ let panel = document.getElementById(panelId);
- // Ensure the panel is visible
+ if (panel) {
panel.style.display = 'block';
- // Clear any previous content
while (panel.lastChild) {
- panel.removeChild(panel.lastChild);
+ panel.removeChild(panel.lastChild);
}
- // Populate the panel with the list of stores
stores.forEach((store) => {
- const name = document.createElement('p');
- name.classList.add('place');
- const currentStore = data.getFeatureById(store.storeid);
- name.textContent = currentStore.getProperty('name');
- panel.appendChild(name);
+ const name = document.createElement('p');
+ name.classList.add('place');
+ const currentStore = data.getFeatureById(store.storeid);
+ name.textContent = currentStore.getProperty('name');
+ panel.appendChild(name);
- const distanceText = document.createElement('p');
- distanceText.classList.add('distanceText');
- distanceText.textContent = store.distanceText;
- panel.appendChild(distanceText);
+ const distanceText = document.createElement('p');
+ distanceText.classList.add('distanceText');
+ distanceText.textContent = store.distanceText;
+ panel.appendChild(distanceText);
});
- // Add 'open' class to the panel (optional for custom styling or animations)
panel.classList.add('open');
-
- }
\ No newline at end of file
+ } else {
+ console.log(`Panel with ID ${panelId} not found`);
+ }
+}
\ No newline at end of file
diff --git a/src/Control/ElementLocationsController.php b/src/Control/ElementLocationsController.php
index 9184768..033936b 100644
--- a/src/Control/ElementLocationsController.php
+++ b/src/Control/ElementLocationsController.php
@@ -9,8 +9,6 @@
use SilverStripe\View\Requirements;
use SilverStripe\Control\Controller;
use SilverStripe\Core\Config\Config;
-use SilverStripe\Control\HTTPRequest;
-use Dynamic\SilverStripeGeocoder\GoogleGeocoder;
use DNADesign\Elemental\Controllers\ElementController;
/**
@@ -39,18 +37,12 @@ protected function init()
{
parent::init();
- $key = $this->getKey();
- $link = $this->Link('json');
-
- Requirements::javascriptTemplate(
- 'dynamic/silverstripe-elemental-locations: dist/js/map.js',
- [
- 'key' => $key,
- 'link' => $link,
- 'format' => $this->data()->MeasurementUnit,
- ]
+ Requirements::javascript(
+ 'dynamic/silverstripe-elemental-locations: dist/js/map.js'
);
+ $key = $this->data()->getKey();
+
Requirements::javascript(
'//maps.googleapis.com/maps/api/js?key=' . $key . '&libraries=places&callback=initMap&solution_channel=GMP_codelabs_simplestorelocator_v1_a',
[
@@ -60,6 +52,9 @@ protected function init()
);
}
+ /**
+ * @return string
+ */
public function json()
{
$this->getResponse()->addHeader("Content-Type", "application/json");
@@ -70,14 +65,6 @@ public function json()
return $data->renderWith('Dynamic/Elements/Locations/Data/JSON');
}
- /**
- * @return string
- */
- public function getKey()
- {
- return Config::inst()->get(GoogleGeocoder::class, 'map_api_key');
- }
-
/**
* @return ArrayList|DataList
*/
@@ -108,27 +95,4 @@ public function setLocations()
return $this;
}
-
- /**
- * @param string $action
- *
- * @return string
- */
- public function Link($action = null): string
- {
- $id = $this->element->ID;
- $segment = Controller::join_links('element', $id, $action);
- $page = Director::get_current_page();
-
- if ($page && !($page instanceof ElementController)) {
- return $page->Link($segment);
- }
-
- if ($controller = $this->getParentController()) {
- return $controller->Link($segment);
- }
-
- return $segment;
- }
-
}
diff --git a/src/Element/ElementLocations.php b/src/Element/ElementLocations.php
index 85adfde..4101279 100644
--- a/src/Element/ElementLocations.php
+++ b/src/Element/ElementLocations.php
@@ -5,7 +5,7 @@
use SilverStripe\ORM\ArrayList;
use SilverStripe\Forms\FieldList;
use SilverStripe\TagField\TagField;
-use SilverStripe\View\Requirements;
+use SilverStripe\Control\Controller;
use SilverStripe\Core\Config\Config;
use Dynamic\Locations\Model\Location;
use SilverStripe\ORM\FieldType\DBField;
@@ -79,6 +79,25 @@ public function getCMSFields(): FieldList
return parent::getCMSFields();
}
+ /**
+ * @return string
+ */
+ public function getKey()
+ {
+ return Config::inst()->get(GoogleGeocoder::class, 'map_api_key');
+ }
+
+ /**
+ * @return string
+ */
+ public function getJSONLink()
+ {
+ $controller = Controller::curr();
+ $segment = Controller::join_links('element', $this->ID, 'json');
+
+ return $controller->Link($segment);
+ }
+
/**
* return ArrayList
*/
@@ -97,18 +116,38 @@ public function getLocationsList()
return $locations;
}
+ /**
+ * create a list of assigned categories
+ */
+ public function getCategoryList()
+ {
+ if ($this->Categories()->count()) {
+ return implode(', ', $this->Categories()->column('Title'));
+ }
+
+ return '';
+ }
+
/**
* @return string
*/
public function getSummary(): string
{
- $count = $this->getLocationsList()->count();
- $label = _t(
- Location::class . '.PLURALS',
- '1 Location|{count} Locations',
- [ 'count' => $count ]
- );
- return DBField::create_field('HTMLText', $label)->Summary(20);
+ $categories = $this->getCategoryList();
+ $count = $this->Categories()->count();
+ if ($count > 0) {
+ $label = _t(
+ ElementLocations::class . '.CategoriesLabel',
+ $categories
+ );
+ } else {
+ $label = _t(
+ ElementLocations::class . '.AllLocationsLabel',
+ 'Showing all locations'
+ );
+ }
+ //Debug::dump($label);
+ return DBField::create_field('HTMLText', $label)->Summary(30);
}
/**
diff --git a/templates/Dynamic/Elements/Locations/Data/JSON.ss b/templates/Dynamic/Elements/Locations/Data/JSON.ss
index 011a46f..3c92484 100644
--- a/templates/Dynamic/Elements/Locations/Data/JSON.ss
+++ b/templates/Dynamic/Elements/Locations/Data/JSON.ss
@@ -12,7 +12,7 @@
},
"type": "Feature",
"properties": {
- <% if $Categories %>"category": "$Categories.First.Title.XML",<% end_if %>
+ <% if $Categories %>"category": "$CategoryList.XML",<% end_if %>
<% if $Hours %>"hours": "10am - 6pm",<% end_if %>
<% if $Content %>"description": "$Content.XML",<% end_if %>
<% if $Title %>"name": "$Title.XML",<% end_if %>
diff --git a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss
index 1f5152f..ded1acf 100644
--- a/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss
+++ b/templates/Dynamic/Elements/Locations/Elements/ElementLocations.ss
@@ -7,13 +7,13 @@
-
+
Location Search Results
-
-