Solved

Google Map javascript asp.net Ajax

Posted on 2011-03-04
16
723 Views
Last Modified: 2012-05-11
I have the table having following columns
1. officeName 2. latitude 3. longitude

where latitude and longitude are numbers like 40.23568, -8325645

I have placed a google map on the page. The portion of the map which is seen at a time is called the viewport. so I want only those offices which are within the current viewport.

I have got some code from http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#The_Hello_World_of_Google_Maps

and i am trying the following code to solve the problem:

 var bounds = map.getBounds();
 var southWest = bounds.getSouthWest();
 var northEast = bounds.getNorthEast();
 var lngSpan = northEast.lng() - southWest.lng();
 var latSpan = northEast.lat() - southWest.lat();

so whenever i make a move or zoom in or out the map, the viewport changes and so the respective offices also needs to be shown.

Please help!
0
Comment
Question by:Dinesh Kumar
  • 10
  • 6
16 Comments
 

Author Comment

by:Dinesh Kumar
ID: 35035239
if we know a range of the points then I can make a ajax call where I can query the data table to get only those offices which are within the current viewport. But how to get that range is the big question for me!

http://en.googlemaps.subgurim.net/ejemplos/ejemplo_995000_GLatLngBounds.aspx
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35035327
I'm not very sure at this moment, but I think that there's a method on gmap API classes that returns true when a lat/long pair is within current viewport or not.

Check APIs documentation, there should be the answer to your problem

http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html
0
 

Author Comment

by:Dinesh Kumar
ID: 35035560
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35035646
Seems like google.maps.LatLngBounds.contains should do the trick for your problem, isn't it?
0
 

Author Comment

by:Dinesh Kumar
ID: 35036416
I am trying with the following code which is called whenever the moveend event gets fire in the map:

 [System.Web.Services.WebMethod]
        public static clsoffice[] bindgrd(Double EastLat, Double EastLon, Double WestLat, Double WestLon)
        {

            var office = CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString"));

            var officeContext = new clsofficeDataContext(office.TableEndpoint.ToString(), office.Credentials);
            List<clsoffice> offices = officeContext.office.ToList();

            List<clsoffice> officeList = (from n in offices
                                              //where (Convert.ToDouble(n.Latitude) <= EastLat && Convert.ToDouble(n.Latitude) >= WestLat)
                                              select n).ToList();
            DataTable dataTB = ConvertTo(officeList);

            DataView dv = new DataView(dataTB);
            // dv.RowFilter = "Latitude <= '" + Convert.ToString(EastLat) + "' and Latitude >=" + Convert.ToString(WestLat);
            dv.RowFilter = "Latitude <=" + EastLat.ToString(); //39.1645684

            DataTable newDT = dv.ToTable();
            List<clsoffice> list = (List<clsoffice>)ConvertToList<clsoffice>(newDT);
            //List<clsoffice> officeList = (from n in offices
            //                                  where (Convert.ToDouble(n.Longitude) >= EastLon && Convert.ToDouble(n.Longitude) <= WestLon)
            //                                  select n).ToList();

            return list.ToArray();
        }


0
 

Author Comment

by:Dinesh Kumar
ID: 35036435
And the values which i am supplying to this method from aspx page are:

GEvent.addListener(map, "moveend", function () {
 var bounds = map.getBounds();
                    var southWest = bounds.getSouthWest();
                    var northEast = bounds.getNorthEast();

var data = "EastLat: " + northEast.lat() + ", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();
..................
...........

0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35037373
Personally I think it would be easier to pass your lat/long values to client through hidden inputs inside the page and use API's code to directly retrieve true/false when the lat/long pairs are inside/out of the viewport. Any server reload could be made through AJAX.
0
 

Author Comment

by:Dinesh Kumar
ID: 35046261
1. you mean to say that suppose I have 200 offices with their respective latitudes and longitudes then I should pass them one by one to the javascript. it means whenever the viewport changes i need to send all these values to the javascript.
2. what i am currently doing is creating a web method inside the c# calling it whenever the viewport changes the function is called from the provided code using addListener method.

I am confused how I will implement the condion in the code bethind using the following parameters which i am sending

 var data = "EastLat: " + northEast.lat();
+", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();

becuse in the backend I am having all the offices records.

3. I am thinking over your advice also of using the contains function by  passing lat/long values because i have already worked a lot on my code.

so still working .. on ... it

GEvent.addListener(map, "moveend", function () {
                    var bounds = map.getBounds();
                    var southWest = bounds.getSouthWest();
                    var northEast = bounds.getNorthEast();

                    var hdnnorthEastLat = document.getElementById("<%=hdnnorthEastLat.ClientID %>");
                    hdnnorthEastLat.value = northEast.lat();
                    var hdnnorthEastLon = document.getElementById("<%=hdnnorthEastLon.ClientID %>");
                    hdnnorthEastLon.value = northEast.lng();

                    var hdnsouthWestLat = document.getElementById("<%=hdnsouthWestLat.ClientID %>");
                    hdnsouthWestLat.value = southWest.lat();
                    var hdnsouthWestLon = document.getElementById("<%=hdnsouthWestLon.ClientID %>");
                    hdnsouthWestLon.value = southWest.lng();

                    var data = "EastLat: 40" + ", EastLon: " + northEast.lng() + ", WestLat: " + southWest.lat() + ", WestLon: " + southWest.lng();

                    $.ajax({
                        type: "POST",
                        url: "Default3.aspx/bindgrd",
                        data: "{" + data + "}",
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            var html = "";
                            html += "<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">";
                            html += "<tr>";
                            html += "<td>officeName</td><td>Latitude</td><td>Longitude</td>";
                            html += "</tr>";
                            for (var i = 0; i < data.d.length; i++) {
                                html += "<tr><td>" + data.d[i].officeName+ "</td>";
                                html += "<td>" + data.d[i].Latitude + "</td>";
                                html += "<td>" + data.d[i].Longitude + "</td></tr>";
                            }

                            html += "</table>";
                            
                            $("#<%=MapInfo.ClientID %>").html(html);
                        }
                    })
                });

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Dinesh Kumar
ID: 35046262
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35046688
1. you mean to say that suppose I have 200 offices with their respective latitudes and longitudes then I should pass them one by one to the javascript. it means whenever the viewport changes i need to send all these values to the javascript.

Not really. You can use a JSON object to pass the whole list of offices to client code. When the viewport changes you don't need to pass again that object, as the client code already has it, you only need to pass to your function the coordinates of the new viewport.
0
 

Author Comment

by:Dinesh Kumar
ID: 35053306
Can you please confirm me the coordinates of the new viewport.?
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35053951
I assume that when you move you viewport from one point to another it's main class coordinates are automatically updated by the event.
0
 

Author Comment

by:Dinesh Kumar
ID: 35054310
main class coordinates?
0
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 250 total points
ID: 35054947
Yes... you should have a map loaded. This map is referenced through API's map class, this class has a method getBounds that returns you a LatLngBounds object with the boundaries of the current viewport, so when you drag over the map, this method getBounds will return you the current NE-SW corners of the viewport.

LatLngBounds object has the contains method, wich returns you true or false if any lat/long pair you pass it as param is within it's boundaries.

So everytime you can get the boundaries of your current viewport through your map's main class, and the boundaries object has a direct method to know if your points are within it.
0
 

Accepted Solution

by:
Dinesh Kumar earned 0 total points
ID: 35188837
In the Viewport, I have two points like Hypotinues (drawn as  / )

This has two points say (x1, y1) and on the upward side (x2,y2)

So the filtering condition is that longitude lies between x2 and x1 whereas latitude lies between y2 and y1

the aspx page is:

    <div id="ajaxBusy" style="position: absolute; top: 1px; left: 1px; z-index: 9999;
        color: Red; background-color: #ffffff;padding-left:450px;">
        loading offices...
    </div>
    <div class="contact-map" id="map" style="height: 300px">
    </div>
    <div style="float:left;padding-left:250px; color:Red;"><i>--Please move or zoom the Viewport to get the respective Buildings--</i></div>
    <br />
    <p style="padding-top: 10px; padding-left:400px;">
        <b>ViewPort Buildings</b></p>
   
    <div id="MapInfo" style="float:left; width:550px; padding-left:250px;">
    </div>

and add the following script in Head:

  <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=ABQIAAAAEHnh-dmpMnltiXAxYqriPRSs43Q4t0AFmKdH3Ny4Q9xgN9pv1xRD-7RfJ68ctWfXAzR89AiJrcpRXw"
        type="text/javascript"></script>

Please see the attached file where data is being sent to c# using JSON

the C# code is:

    [System.Web.Services.WebMethod]
        public static clsBuilding[] bindgrd(Double EastLat, Double EastLon, Double WestLat, Double WestLon)
        {
            List<clsBuilding> buildingList = null;
            try
            {
                var building = CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString"));

                var buildingContext = new clsBuildingDataContext(building.TableEndpoint.ToString(), building.Credentials);
                List<clsBuilding> buildings = buildingContext.Building.ToList();

                buildingList = (from n in buildings                 where Convert.ToDouble(n.Longitude) >= WestLon && Convert.ToDouble(n.Longitude) <= EastLon &&
                                 Convert.ToDouble(n.Latitude) >= WestLat && Convert.ToDouble(n.Latitude) <= EastLat
                                select n).ToList();

                return buildingList.ToArray();
            }
            catch (Exception ex)
            {
                return buildingList.ToArray();
            }      
        }


jsCode.js
0
 

Author Closing Comment

by:Dinesh Kumar
ID: 35308364
Thanks
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now