[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Google Map javascript asp.net Ajax

Posted on 2011-03-04
16
Medium Priority
?
769 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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 1000 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&v=2.x&sensor=false&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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
Suggested Courses
Course of the Month20 days, 3 hours left to enroll

872 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