${product._source.title}
No products found.
');
}
}
function renderSuggestions(suggestions) {
let suggestionBox = $('.suggestion-links');
suggestionBox.empty();
if (suggestions?.length) {
let suggestionLinks = suggestions.slice(0, 5).map(suggestion => `
No suggestions found.
');
// suggestionBox.html('');
}
}
function productURL(product) {
let slug = product._source.title.replace(/\//g, '-').toLowerCase().split(' ').join('-');
// Get base URL fr om a hidden Blade variable or directly hardcode if known
let baseUrl = "https://ww.comparethebuild.com/product";
return `${baseUrl}/${slug}/${product._id}`;
}
// Use event delegation to handle dynamically created links
$(document).on('click', '.suggestion-link', function() {
let productName = $(this).data('title');
$('#search-bar').val(productName);
$('#search-child-form').submit();
$('.search-dropdown').hide(); // Hides the search box
});
});
function searchFormSubmit() {
$('#search-child-form').submit();
}
-->
', container);
// if (!map) {
// showMap();
// map = new mapboxgl.Map({
// container: container,
// style: 'mapbox://styles/mapbox/navigation-day-v1',
// center: coordinates,
// zoom: 10,
// });
// }
// Update user location marker
// if (userMarker) {
// userMarker.setLngLat(coordinates);
// } else {
// userMarker = new mapboxgl.Marker(createUserCustomMarker())
// .setLngLat(coordinates)
// .setPopup(new mapboxgl.Popup().setHTML(`
//
${store.store_name}
`))
.addTo(map);
storeMarker.getElement().addEventListener("click", function() {
getDirectionsToMultipleStores(startLat, startLong, store);
});
storeMarkers.push(storeMarker);
$(".range-updated-message").show();
setTimeout(() => {
$(".range-updated-message").hide();
}, 5000);
}
} else {
showMessage(`Stores are not within ${storeData.radius} miles.`);
}
} catch (error) {
console.error('Error:', error);
// alert('Failed to fetch location. Please try again.');
}
}
// document.getElementById('location-input').addEventListener('input', function() {
// const location1 = document.getElementById('location-input').value;
// getLocationByPostalCode(location1);
// });
function submitPostalCode() {
const location1 = document.getElementById('location-input').value.replace(/\s+/g, '');
getLocationByPostalCode(location1);
}
// Function to get directions from user's location to the store
function getDirections(userLat, userLong, storeLat, storeLong) {
const directionsUrl =
`https://api.mapbox.com/directions/v5/mapbox/driving/${userLong},${userLat};${storeLong},${storeLat}?geometries=geojson&access_token=pk.eyJ1IjoiY29tcGFyZXRoZWJ1aWxkIiwiYSI6ImNtNm00ZmhnMjBmdnkya3M1a2xzNzlhNTUifQ.zywKzFbxfqER2Tf-lTiCGg`;
fetch(directionsUrl)
.then(response => response.json())
.then(data => {
const route = data.routes[0].geometry.coordinates;
const routeCoordinates = route.map(coord => [coord[0], coord[1]]);
const userLocation = {
latitude: userLat,
longitude: userLong,
}
const storeLocations = [{
latitude: storeLat,
longitude: storeLong,
}];
// displayRoute(routeCoordinates, userLocation, storeLocations);
displayRoute(routeCoordinates, false, storeLocations);
displayRoute(routeCoordinates);
})
.catch(error => {
console.error('Error fetching directions:', error);
alert('Could not fetch directions. Please try again later.');
});
}
// Function to display the route on the map
// function displayRoute(routeCoordinates) {
// // If the map is already initialized
// if (!map) {
// console.error("Map not initialized.");
// return;
// }
// // Add the route as a line to the map
// map.on('load', () => {
// map.addSource('route', {
// 'type': 'geojson',
// 'data': {
// 'type': 'Feature',
// 'properties': {},
// 'geometry': {
// 'type': 'LineString',
// 'coordinates': routeCoordinates
// }
// }
// });
// map.addLayer({
// 'id': 'route',
// 'type': 'line',
// 'source': 'route',
// 'paint': {
// 'line-width': 5,
// 'line-color': '#3887be',
// 'line-opacity': 0.75
// }
// });
// // Add markers for user and store
// new mapboxgl.Marker()
// .setLngLat([userLong, userLat])
// .addTo(map);
// new mapboxgl.Marker()
// .setLngLat([storeLong, storeLat])
// .addTo(map);
// });
// }
// Function to get directions from user's location to the store
// function getDirections(userLat, userLong, storeLat, storeLong) {
// const directionsUrl = `https://api.mapbox.com/directions/v5/mapbox/driving/${userLong},${userLat};${storeLong},${storeLat}?geometries=geojson&access_token=pk.eyJ1IjoiY29tcGFyZXRoZWJ1aWxkIiwiYSI6ImNtNm00ZmhnMjBmdnkya3M1a2xzNzlhNTUifQ.zywKzFbxfqER2Tf-lTiCGg`;
// fetch(directionsUrl)
// .then(response => response.json())
// .then(data => {
// const route = data.routes[0].geometry.coordinates;
// const routeCoordinates = route.map(coord => [coord[0], coord[1]]);
// displayRoute(routeCoordinates);
// })
// .catch(error => {
// console.error('Error fetching directions:', error);
// alert('Could not fetch directions. Please try again later.');
// });
// }
function getDirectionsToMultipleStores(userLat, userLong, stores) {
// const coordinates = [`${userLong},${userLat}`, ...stores.map(store => `${store.long},${store.lat}`)].join(';');
const coordinates = `${userLong},${userLat};${stores.long},${stores.lat}`;
console.log('coordinates', coordinates);
console.log('stores', stores);
// Create the full URL with the user's location as the starting point
const directionsUrl =
`https://api.mapbox.com/directions/v5/mapbox/driving/${coordinates}?geometries=geojson&access_token=pk.eyJ1IjoiY29tcGFyZXRoZWJ1aWxkIiwiYSI6ImNtNm00ZmhnMjBmdnkya3M1a2xzNzlhNTUifQ.zywKzFbxfqER2Tf-lTiCGg`;
fetch(directionsUrl)
.then(response => response.json())
.then(data => {
if (data.routes.length > 0) {
const route = data.routes[0].geometry.coordinates; // Get the route coordinates
const routeCoordinates = route.map(coord => [coord[0], coord[1]]);
// const storeLocations = stores.map(store => {
// latitude: store.lat,
// longitude: store.long,
// })
const storeLocations = [{
latitude: stores.lat,
longitude: stores.long,
}];
const userLocation = {
latitude: userLat,
longitude: userLong,
}
console.log('storeLocations', storeLocations);
// Display the route that starts at the user's location and visits all stores
// displayRoute(routeCoordinates, userLocation, storeLocations);
displayRoute(routeCoordinates, false, storeLocations);
// displayRoute(routeCoordinates);
} else {
console.warn('No routes found.');
}
})
.catch(error => {
console.error('Error fetching directions:', error);
// alert('Could not fetch directions. Please try again later.');
});
}
let routeLayer = null; // Variable to hold the route layer (geometry)
// Function to display the route on the map
function displayRoute(routeCoordinates, userLocation, storeLocations) {
// Check if the map is initialized
if (!map) {
console.error("Map not initialized.");
return;
}
// Remove the previous route if it exists
if (routeLayer) {
if (map.getLayer(routeLayer)) {
map.removeLayer(routeLayer); // Remove the route layer
}
if (map.getSource(routeLayer)) {
map.removeSource(routeLayer); // Remove the route source
}
}
routeLayer = 'routeLayer'; // Unique identifier for the route layer
// Add the route as a new source and layer to the map
map.addSource(routeLayer, {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: routeCoordinates // The route's coordinates
}
}
});
map.addLayer({
id: routeLayer,
type: 'line',
source: routeLayer,
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-width': 5,
'line-color': '#3887be',
'line-opacity': 0.75
}
});
// Remove existing markers if needed
// (Optional, implement a separate storeMarkers array for store/user markers)
// Add marker for the user's location
console.log('userLocation-->', userLocation);
console.log('storeLocations-->', storeLocations);
// if (userLocation) {
// new mapboxgl.Marker({
// color: '#1E90FF'
// }) // Blue marker for the user
// .setLngLat([userLocation.longitude, userLocation.latitude])
// .setPopup(new mapboxgl.Popup().setHTML(`
// 
