This commit is contained in:
Omar Najjar 2024-07-21 04:48:48 +10:00
parent f27126e0a2
commit 4ad992a6eb

View file

@ -68,6 +68,7 @@
mapboxgl.accessToken = 'pk.eyJ1IjoiamVubnlmcm9tdGhhYmxvY2siLCJhIjoiY2x5dWQwa3dwMTI1aTJscHVtOHR1ZmUxdyJ9.NZSYIPeI4A96tF6sWSIRvQ';
let startPoint = [];
let destinationPoint = [];
let map;
let directions;
@ -103,81 +104,111 @@
console.log(`Starting Point: ${startPoint}, Distance: ${distance} meters, Round Trip: ${roundTrip}, Hills: ${hills}, Stores: ${stores}`);
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: startPoint,
zoom: 14
});
map.on('load', async () => {
map.addLayer({
'id': 'hillshading',
'source': {
'type': 'raster-dem',
'url': 'mapbox://mapbox.terrain-rgb'
},
'type': 'hillshade'
if (!map) {
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: startPoint,
zoom: 14
});
new mapboxgl.Marker()
.setLngLat(startPoint)
.addTo(map);
directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/walking'
});
map.addControl(directions, 'top-left');
let routeFound = false;
let attempts = 0;
const maxAttempts = 10;
while (!routeFound && attempts < maxAttempts) {
const angle = Math.random() * Math.PI * 2;
const dx = Math.cos(angle) * (roundTrip ? distance / 2 : distance);
const dy = Math.sin(angle) * (roundTrip ? distance / 2 : distance);
const waypoint = [startPoint[0] + dx / (111320 * Math.cos(startPoint[1] * Math.PI / 180)), startPoint[1] + dy / 110540];
directions.setOrigin(startPoint);
directions.setDestination(roundTrip ? startPoint : waypoint);
const route = await new Promise((resolve) => {
directions.on('route', (e) => {
resolve(e.route[0]);
});
map.on('load', () => {
map.addLayer({
'id': 'hillshading',
'source': {
'type': 'raster-dem',
'url': 'mapbox://mapbox.terrain-rgb'
},
'type': 'hillshade'
});
if (route.distance >= distance * 0.8 && route.distance <= distance * 1.2) {
routeFound = true;
if (hills) {
map.setLayoutProperty('hillshading', 'visibility', 'visible');
} else {
map.setLayoutProperty('hillshading', 'visibility', 'none');
}
console.log(`Route distance: ${route.distance} meters`);
new mapboxgl.Marker()
.setLngLat(startPoint)
.addTo(map);
directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/walking'
});
map.addControl(directions, 'top-left');
});
}
let routeFound = false;
let attempts = 0;
const maxAttempts = 10;
while (!routeFound && attempts < maxAttempts) {
const angle = Math.random() * Math.PI * 2;
const dx = Math.cos(angle) * (roundTrip ? distance / 2 : distance);
const dy = Math.sin(angle) * (roundTrip ? distance / 2 : distance);
const waypoint = [startPoint[0] + dx / (111320 * Math.cos(startPoint[1] * Math.PI / 180)), startPoint[1] + dy / 110540];
if (stores) {
const store = await findNearestStore(startPoint);
if (store) {
directions.setOrigin(startPoint);
directions.addWaypoint(0, store.center);
directions.setDestination(roundTrip ? startPoint : waypoint);
destinationPoint = store.center;
} else {
console.log("Route distance does not meet the requirement. Adjusting...");
attempts++;
alert("No convenience stores found nearby.");
return;
}
} else {
directions.setOrigin(startPoint);
directions.setDestination(roundTrip ? startPoint : waypoint);
destinationPoint = roundTrip ? startPoint : waypoint;
}
if (!routeFound) {
alert("Unable to find a suitable route. Please try again.");
const route = await new Promise((resolve) => {
directions.on('route', (e) => {
resolve(e.route[0]);
});
});
if (route.distance >= distance * 0.8 && route.distance <= distance * 1.2) {
routeFound = true;
if (hills) {
map.setLayoutProperty('hillshading', 'visibility', 'visible');
} else {
map.setLayoutProperty('hillshading', 'visibility', 'none');
}
console.log(`Route distance: ${route.distance} meters`);
} else {
console.log("Route distance does not meet the requirement. Adjusting...");
attempts++;
}
});
}
if (!routeFound) {
alert("Unable to find a suitable route. Please try again.");
}
});
async function findNearestStore(startPoint) {
const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/convenience%20store.json?proximity=${startPoint[0]},${startPoint[1]}&limit=1&access_token=${mapboxgl.accessToken}`);
const data = await response.json();
return data.features.length ? data.features[0] : null;
}
document.getElementById('open-google-maps').addEventListener('click', () => {
const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&origin=${startPoint[1]},${startPoint[0]}&destination=${startPoint[1]},${startPoint[0]}&travelmode=walking`;
if (startPoint.length === 0 || destinationPoint.length === 0) {
alert("Please generate a route first.");
return;
}
const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&origin=${startPoint[1]},${startPoint[0]}&destination=${destinationPoint[1]},${destinationPoint[0]}&travelmode=walking`;
window.open(googleMapsUrl, '_blank');
});
document.getElementById('open-apple-maps').addEventListener('click', () => {
const appleMapsUrl = `http://maps.apple.com/?saddr=${startPoint[1]},${startPoint[0]}&daddr=${startPoint[1]},${startPoint[0]}&dirflg=w`;
if (startPoint.length === 0 || destinationPoint.length === 0) {
alert("Please generate a route first.");
return;
}
const appleMapsUrl = `http://maps.apple.com/?saddr=${startPoint[1]},${startPoint[0]}&daddr=${destinationPoint[1]},${destinationPoint[0]}&dirflg=w`;
window.open(appleMapsUrl, '_blank');
});
</script>