From 4ad992a6ebfe39a0090cdec77ac58c726336258e Mon Sep 17 00:00:00 2001 From: Omar Najjar Date: Sun, 21 Jul 2024 04:48:48 +1000 Subject: [PATCH] x --- index.html | 149 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 90 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index 061103e..149a183 100644 --- a/index.html +++ b/index.html @@ -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'); });