As we enter into the 4th industrial revolution, many have been afraid of losing their jobs because of modernization of the new technological world. Some say the best thing to do is to get to know the latest trends and be able to accept change however some are against the new trends and prefer to stick to the manual methods of doing their day-to-day activities. We have seen a massive development in the digital space.

Programming nowadays is one of the essential skills in the future of work. With programming you can be able to reach a decision point in the shortest time possible. Think about automation, critical analysis of data and to the most minimum level, calculations.

There are a lot of advantages that come with the ability to code. In this guide we are going to learn how to develop a basic JavaScript based Surveying Application to calculate a Join. I’m sure you are familiar with the word Join. Now lets get to the basics.

What is JavaScript?

JavaScript (JS) – is a scripting or programming language that allows you to implement complex features on web pages. In our case we are going to be using JS to calculate a join based on a set of two coordinates.


So given two sets of coordinates and we are going to call these 1 & 2, we are required to calculate a Join from point 1 to point 2. This basically we need to know the distance(d) between 1 & 2 and the direction from 1 to 2. But we will dwell more on that later. Right now we need to create a space where our page visitor can input all this information to enable this calculation and for that we need to use HTML (Hyper-text Markup Language). This is the most basic building block of the Web. It defines the meaning and structure of web content (for example the page you are currently reading this from was structured in this way using HTML. You can learn more about HTML here.

The code below displays the basic structure of our HTML page which the user will see upon loading our web page:

<!DOCTYPE html>
<html>
<head>
<title>Basic JavaScript for Surveying Applications</title>
</head>
<body>
<h1>JOIN</h1>
  
              
    <h3>Starting Point</h3>
    <input type="text" id="startName">
    <br>
    <br>
    Y-coordinate
    <input type="text" id="yStart" required="true">
    X-coordinate
    <input type="text" id="xStart" required="true">
    <br/><br>
    <h3>Ending Point</h3>
    <input type="text" id="endName">
    <br>
    <br>
    Y-coordinate:
    <input type="text" id="yEnd">
    X-coordinate
    <input type="text" id="xEnd">
    <br />
    <br />
    <input type="submit" id="calculate" onclick="polar ()"  
         value=" Compute " title="Click here to find the Distance and Direction">

    <input type="submit" id="Sequential" onclick="Sequential ()" 
         value=" Sequential " title="Click to make the next calculation">
    <input type="submit" id="Radial" onclick="Radial ()"  
         value=" Radial " title="Click here to make a radial join">

    <br><br><br><br>
    
    Distance
    <input type="number" id="distance"  readonly="true"> m
    <br><br><br>
   
    Direction
    <input type="number" id="deg"  readonly="true">&deg;
    <input type="number" id="mm" readonly="true">'
    <input type="number" id="ss" readonly="true">''
</body>
</html>

Here are some basic explanations to the code above: (in addition to the comments on the code)

  • the <input> tag is where the user while place the required values in order to perform the calculation
  • the <br> tag is used to space the lines. We could have used the <p> tag instead
  • where there is require=”true” it basically means the result will not be displayed unless that box is filled
  • be sure to learn more about types of input in HTML on W3Schools
  • at the bottom we added a readonly statement, this is where we intend to display the answer that comes out after the user clicks the calculate button
The code above will display a user interface like this one. Don’t mind the colors it was an additional CSS (Cascading Style Sheets) code.

Now that our visitors have a user interface, we need to add some functionality to our page and this is where we need some JS. Just before the closing </body> tag is where we are going to add our JS code.

<script>

function polar()
    {
//this is where our code will be
    }

We started off by creating a function named polar. This will contain all the code that will be executed when the user clicks on the Compute button which we placed above in the HTML code. Inside the function we need to write some few lines of code in-order for the results to be displayed. Add the code below between the curly-braces {} within the function.

 var x = Number(document.getElementById('xStart').value);
 var y = Number(document.getElementById('yStart').value);
 var x2 = Number(document.getElementById('xEnd').value);
 var y2 = Number(document.getElementById('yEnd').value);
 var startName1 = Number(document.getElementById('startName').value);
 var endName1 = Number(document.getElementById('endName').value);

Here we are declaring variables in JS by using the var statement. In this case we have declared variables named x, y, x2, y2, startName1 and endName1. Always remeber that JS is case-sensitive. These declared variables will get their values from the HTML id which we had initiated in the HTML code. So the variable x will store the value which we got from the input under id=”xStart”.

The basic formula to calculate a Join is:

Δx = x2 – x1 Δy = y2 – y1 Then to get the distance between the points, distance (d) =  √(Δx²+Δy²)

In JS this can be written as: (add the code to the existing function)

var x_difference = x2-x;
var y_difference = y2-y;
var join = Math.sqrt(Math.pow(y_difference , 2) + Math.pow(x_difference ,2));

//DISPLAYING THE DISTANCE AS OUTPUT
    var distance = document.getElementById('distance');
    distance.value = join;

This piece of code performs the same function that we all do with our calculators when calculating the distance between two points. The comments denoted with the (//) prefix contain some explanation of the code used. Commenting your code will always remind you whenever you need to make a quick fix especially when writing huge amounts of code for a huge project. Its always good practice to comment on your code.

Now that our distance can be calculated, we need to calculate the direction from point 1 to point 2 now and it is also done within the same function. The code below displays how this can be achieved.

//***DEALING WITH DIRECTION NOW*******************

    var radBearing = Math.atan(y_difference/x_difference);
     /*introduce a constant for rad to degrees which is 57.29577951
         * this constant multiples the rad answer and converts it into decimal degrees
         */
        var radConstant = 57.29577951;
      
        var bearing = radBearing*radConstant;
        var bearingFinal;
      
    //converting Decimal degrees into D.M.S
   //these are the declared variables for later conversion use in the program
        
        var Degrees ;
        var unroundedMinutes;
        
        var Minutes;
        var Seconds ;
        var roundedSeconds;
        
        //cater for special conditions first 
        if(y_difference 0 && x_difference0)
        //FOURTH QUADRANT
        {
             bearingFinal=bearing+360;
             Degrees = Math.floor(bearingFinal);
             unroundedMinutes = (bearingFinal - Degrees)*60; 
             Minutes = Math.floor(unroundedMinutes);
             Seconds = (unroundedMinutes - Minutes)*60;
             roundedSeconds = Math.ceil(Seconds);
            
            //DISPLAYING THE OUTPUT IN THE BOX
            var deg = document.getElementById('deg');
            deg.value = Degrees;

            var mm = document.getElementById('mm');
            mm.value = Minutes;

            var ss = document.getElementById('ss');
            ss.value = roundedSeconds;


        }
        else 
        //FIRST QUADRANT
                    
        {
             Degrees = Math.floor(bearing);
             unroundedMinutes = (bearing - Degrees)*60;
             Minutes = Math.floor(unroundedMinutes);
             Seconds = (unroundedMinutes - Minutes)*60;
             roundedSeconds = Math.ceil(Seconds);

             if(Minutes > 59 || roundedSeconds > 59)
             {
              Degrees = Degrees+1;
              Minutes = Minutes-60;

              Minutes = Minutes+1
              roundedSeconds = roundedSeconds-60;
             }
             
            
            //DISPLAYING THE OUTPUT IN THE BOX
            var deg = document.getElementById('deg');
            deg.value = Degrees;

            var mm = document.getElementById('mm');
            mm.value = Minutes;

            var ss = document.getElementById('ss');
            ss.value = roundedSeconds;

        }
    }

 }

Wow! That was some really long piece of code there. Let me explain it piece by piece below:

  • initially all programming languages use radians when dealing with trigonometrical functions so we need to convert back into degrees format and in order to do this we multiply by 180/π and hence the constant we declared 57.29577951.
  • when we get direction, it normally comes in decimal degrees and hence we need to convert it into Degrees Minutes and Seconds (DMS) this is where we remove the degrees and remain with the decimal part in order for us to get both the minutes and the seconds
  • we have four quadrants and each of these quadrants has specific conditions, the change in x-direction and y-direction determine the quadrant in which our direction lies hence we need to test for these conditions and then get the correct answer.
  • 60 seconds are equivalent to 1 minute and hence we need to add minutes whenever seconds are > 59 seconds

Now we are only left with the last piece of the puzzle which is the output. There are various methods to produce output in JS but in this example we already created an output box using our HTML. Add the few lines of code below:

document.getElementById('calculate').addEventListener('click', polar);

/*when the user clicks on the button this listener is activated to perfom and run the code above hence producing output in the output box.*/


Finally we have completed our Join Calculation Application. This example was only for straight polar. After this guide we are definite you can challenge yourself to complete the Radial and Sequential polar. If you face any challenges kindly navigate to our GitHub repository and get a glimpse of the code. We would love you to also contribute to this repository and add more calculations.

You can also check our web application, Surveying-Online-Calculations on this site too to see how web based applications can make life easier for a surveyor. Discussion is also open on the Surveyors Community Ask platform

1 Comment

  1. Learning made easy, thanks for the easy explanation

Leave a Reply