Currently, I am in the process of developing a Vue application that incorporates a map feature. The main functionality involves determining whether a given position on the map is over water or land. If the position is over water, I want to iterate through random nearby positions until I find one over land and return those coordinates. This is a simplified version of the code snippet I am using for testing:
snippet from template
<mapbox-marker :lngLat="getPositionOverLand([0,5])" />
corresponding code
const getPositonOverLand = (coords: any, tries=100) => {
const newCoords = [coords[0], coords[1]] as [number, number];
let thisTry = 0;
while(isOverWater(newCoords) && thisTry < tries){
newCoords[0] = coords[0] + (Math.random() - 0.5)*0.5
newCoords[1] = coords[1] + (Math.random() - 0.5)*0.5
thisTry++;
}
if(thisTry === tries)
throw new Error('No position on land nearby could be found');
coords[0] = newCoords[0];
coords[1] = newCoords[1];
}
After debugging the algorithm, it seems to be working well. It usually finds a position on land after a few attempts and returns the coordinates. I have also included a parameter for maximum attempts to avoid infinite loops when trying to find land positions.
The issue I am facing in Vue is that if I change the coordinates within my function, regardless of whether I use a return statement or modify the array directly, the function keeps triggering itself, resulting in an infinite loop.
Is there a way to prevent this behavior and ensure the algorithm runs only once, or have I overlooked something else? Interestingly, just returning the provided coordinates for testing does not lead to an infinite loop.