Solved

Google Map javascript asp.net Ajax

Posted on 2011-03-04
16
754 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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&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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
why JSON Array data not binding on Model ASP.NET ? 1 29
How can I do Unit Testing with Session ? 1 23
Need help with another query 10 38
c#, case, if 4 19
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

749 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