Are you familiar with the concept of geographical coordinates? Take for example these two points:
point1 = {lat: 40.6974034,
lng: -74.1197636}
point2 = {lat: 42.694034,
lng: -75.117636}
My goal is to find the distance between these two points in miles using NextJs. Do you know of any packages that could help me achieve this?
const location1 = {
latitude: 40.6974034,
longitude: -74.1197636
};
const location2 = {
latitude: 42.694034,
longitude: -75.117636
};
const calculateDistance = (lat1, lon1, lat2, lon2, unit) => {
if ((lat1 === lat2) && (lon1 === lon2)) {
return 0;
}
const radlat1 = Math.PI * lat1 / 180;
const radlat2 = Math.PI * lat2 / 180;
const theta = lon1-lon2;
const radtheta = Math.PI * theta / 180;
let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist);
dist = dist * 180/Math.PI;
dist = dist * 60 * 1.1515;
if (unit === "K") { dist = dist * 1.609344 };
if (unit === "N") { dist = dist * 0.8684 };
return dist;
};
console.log('Miles', calculateDistance(location1.latitude, location1.longitude, location2.latitude, location2.longitude,'M'));
console.log('Kilometers', calculateDistance(location1.latitude, location1.longitude, location2.latitude, location2.longitude,'K'));
console.log('Nautical miles', calculateDistance(location1.latitude, location1.longitude, location2.latitude, location2.longitude,'N'));This function can be utilized to determine the distance between two points by specifying the units as N for nautical miles, M for miles, and K for kilometers.
I'm currently exploring the possibility of implementing dynamic routes in a Nuxt SPA. While I am familiar with using dynamic routes in Universal Mode and generating them during build time through functions, I am searching for a solution that does not ...
Having trouble displaying array data in a customized way. Here is how my array structure looks: array:2 [▼ "folder1" => array:5 [▼ 0 => "4.png" 1 => "2.png" 2 => "1.png" 3 => "3.png" 4 => "5.png" ] "folder2" ...
Working with GCP Document AI using Node.js and react.js, I have created a JSON structure (var jsonResult) in the provided code. In the for loop, I am extracting key and text value data by using console.log(key); and console.log(textValue);. However, my g ...
I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issue where it only gets bigger and d ...
I've been working on integrating Highcharts into my Next.js project to create a column chart, but I'm facing an issue where the pattern-fill chart is not displaying. Removing the color: {} from the code below will make the chart visible. I'v ...
My array contains a series of functions and is structured as shown below: var all_questions = [ show_question(1, 1), show_question(2, 1), show_question(3, 1), ]; I'm interested in executing those functions within the array in a random or ...
Is there a way to use multiple selectors in YUI (YUI 2) similar to jQuery? $('h1, h2, el1, el2, .content, .title').css('color', 'red'); How can I achieve the same in YUI without having to individually add classes using YAHOO ...
In the given situations, I am providing a child Component with a property that is updated later through an RxJs Observable subscription. Angular fails to detect changes when not using an anonymous function or binding the this context. // Situation 1 // C ...
My dilemma is finding a way to apply styles to a component using props, specifically default tailwind colors like black and white. The styles are not being generated as expected. Can anyone provide guidance on how to achieve this? I am happy to share the c ...
One issue I am facing involves sending data to a Spring Boot Controller through an AJAX Query and then loading a new JSP page. When I send data to the url in the AJAX Query, which matches the URL in my controller class, it executes the code within that met ...
I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...
When using ajax to send data from page A to the server, the spring controller returns welcome page B. This process works correctly on Firefox and Internet Explorer, but on Chrome, there is an issue where after successfully sending the data via ajax, the de ...
I'm currently working on automating webpage navigation with Selenium in Python. My goal is to click on an HTML button that triggers JavaScript code to validate if the button is focused during the onclick action. Although I can successfully select a v ...
I have scoured various online forums for a solution to this issue, but none of the suggestions seem to work. Although I managed to position the cursor at the beginning of the text, it did not shift the focus accordingly. Here is the code snippet for the co ...
Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...
Here is a sample HTML code: <section class="correspondence"> <header> <div class="from">{{ message.from }}</div> <div class="when">{{ message.when }}</div> </header> <div class="content"> { ...
I am currently facing a challenge in implementing a websocket server within my Next.js application: import { Server, Socket } from 'socket.io' import { txsDisplay } from '../worker-callback/route'; import { useSession } from 'next- ...
While using typescript with nextjs, I encountered an issue as illustrated in the image. When I try to use a component as a JSX element, typescript displays the message: ProtectRoute' cannot be used as a JSX component. import { PropsWithChildren } from ...
Having trouble with my jQuery button code that is supposed to toggle associated checkboxes but ends up freezing the browser. I am in need of the following functionalities: 1) Clicking on "select all" should select all checkboxes. 2) Clicking on "select all ...
I have been working on improving my "contenthandler" function. It currently changes different articles when I click different buttons, which I am satisfied with. However, I believe there may be a better approach to this and would appreciate any advice on h ...