CODEWITHSUNDEEP
javascriptajaxhtml
Bobaker Madi
Bobaker Madi

Reputation: 11

How to read file by using javascript and show data on page

I am working on code that show some point on Google map and make line from one point to the other points. AS shown in the code I should enter the user position and after that I connect the user with the other points which are web service positions.

My question is how can I read text file has longitude and latitude for any user and show them on map instead of entering them manually.

For example the file has data like this:

    longitude                latitude       webS1   webS2   webS3

    40.44390000000001   -79.9562         45      12       78

    37.79499999999999   -122.2193        78      69       45 

    36.0                    138.0            42      89       75 

    52.19999999999999   0.1167869        38      74       65

what I need is such this:

Enter user index:-----

After insertion the index of user we can use longitude and latitude of this user to show position on the map. Also show the values of webS.

Example

Enter user index:1

the result should show the position on the map and show the values of webs on the page like this

webS1=45
webS2=12
webs3=78

I am a new on a java script and HTML coding . who can give me any suggestion on doing like this style.

this is the code I am working on: ----------------------------------- <%-- Document : index Created on : Apr 5, 2013, 8:59:13 PM Author : Bobaker --%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
<head>
<title>Show Google Map with Latitude and Longitude </title>

<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
        var lat = document.getElementById('txtlat').value;
        var lon = document.getElementById('txtlon').value;

        var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
        var mapOptions = {
            center: myLatlng,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            marker: true
        };
        var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
        <!--  --!>
        var userPosition=new google.maps.LatLng(lat,lon);
        var WebServicePosition1=new google.maps.LatLng(43,-98);
        var WebServicePosition2=new google.maps.LatLng(58,93);
        var WebServicePosition3=new google.maps.LatLng(-16,26);

        var myTrip1=[userPosition,WebServicePosition1];
        var myTrip2=[userPosition,WebServicePosition2];
        var myTrip3=[userPosition,WebServicePosition3];

        var flightPath1=new google.maps.Polyline({
            path:myTrip1,
            strokeColor:"#00000F",
            strokeOpacity:0.9,
            strokeWeight:3
        });
        var flightPath2=new google.maps.Polyline({
            path:myTrip2,
            strokeColor:"#ff0000",
            strokeOpacity:0.9,
            strokeWeight:3
        }); 

        var flightPath3=new google.maps.Polyline({
            path:myTrip3,
            strokeColor:"#0000FF",
            strokeOpacity:0.9,
            strokeWeight:3
        });


        flightPath1.setMap(map);
        flightPath2.setMap(map);
        flightPath3.setMap(map);

        var marker = new google.maps.Marker({
            position: myLatlng
        });
        marker.setMap(map);
    }
</script>
</head>
<body >

    <form id="form1" runat="server">
        <table >
            <tr>
                <td>Enter Latitude:</td>
                <td><input type="text" id="txtlat" value="40.44390000000001" /> </td>
            </tr>
            <tr>
                <td>Enter Longitude:</td>
                <td><input type="text" id="txtlon" value="-79.9562" /> </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Submit" onclick="javascript:initialize()" /> </td>
            </tr>
        </table>
        <div id="mapcanvas" style="width: 500px; height: 400px">


        </div>

    </form>

</body>
</html>

Thanks in advance

Upvotes: 1

Views: 1233

Answers (1)

Hugo Tunius
Hugo Tunius

Reputation: 2879

In general you don't want to store data in plain text if you are not forced to do so. You should use the json format because it works well with javascript and is structured.

Loading external resources is done via AJAX in client side javascript. AJAX simply sends a HTTP request in the background without reloading the page.

This thread here on stack overflow demonstrates an AJAX request with raw javascript. There are countless tutorials on AJAX on the internet a simple google search for javascript AJAX request will give you tons of results.

For the structure of your file I recommend something like this

{
    "users" : [{
        "id" : 1,
        "positions" : [{
            "longitude" :  40.44390000000001,
            "latitude"  : -79.9562,
            "webS1"     : 45,
            "webS2"     : 12,
            "webS3"     : 78 
        }]
    }]
}

You can then use JSON.parse to parse this file into a normal javascript object.

This wikipedia entry on JSON explains the syntax.

EDIT: So if you have a resource on your server somewhere, let's assume it's in the same folder as your page, called data.json. Given a method performAjaxRequest() which sends a GET message to a resource. You can do the following.

performAjaxRequest("data.json", function(result) {
   var data = JSON.parse(result);
   //Now data will contain the .json file 
   //parsed as a javascript object
   data.users[0];//The first user
   //The first position for the first user
   data.users[0].positions[0];

});

The implementation of performAjaxRequest you'll have to implement yourself by reading the information I linked about AJAX or by finding a library such as jQuery that lets you do AJAX requests. performAjaxRequest takes two arguments the url and a callback function to be be called when the result is fetched. It's important to understand that AJAX is most commonly an asynchronous operation. The A in AJAX actually stands for Asynchronous.

Upvotes: 1

Related Questions