Using XML, LINQ and jQuery for a Google Maps Store Locator


For my current school project we have to make a store locator, where we display the nearest stores to the visitor. We choose to make this with Google Maps, our school requires us to make it in .NET.

Case: http://msdn.microsoft.com/en-us/library/cc296196%28SQL.90%29.aspx

The objective is to make a Store Locator with a good architecture. The maintainability and expandability is of great importance, also should it work on all platforms. The widget should be easily portable to HTML/ pyton/ php, so we choose to make the presentation layer in javascript, which all of these languages support.

When you use to make something in javascript you should definetly take a look at jQuery a javascript library, which will make your life much easier. You won’t have to think about cross browser support and your coding will be much more readable.

We came with the basic 3 tier architecture: View(Presentation Layer), BL(Business Logic) , DAL(Data Access Layer).

3 Tier Architecture

I was responsible for making the DAL(Data Access Layer) and the Business Logic, which in our case is a Web Service outputting XML, which the Presentation Layer can use. In the end I also made the biggest part of the presentation layer with jQuery.

So to sum everything up this is how I made the project:

Implementing DAL with LINQ

This is actually really simple, I didn’t spent much time on it. Although you can make this as complex as you want by extending the partial classes. If  you need more customization on the entities LINQ generated.

DAL Generated with LINQ to SQL drag and drop from Server Explorer.

I basically generated this in about 20 minutes a complete DAL.

Implementing Business Logic / Web Service

In the business logic web service layer we had a reference to our DLL, which was a class application library. This is where we made our custom queries with LINQ so we could use the data in our presentation layer.

This is the webmethod we are using to generate XML we use in the presentation layer:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public XmlDocument GetStoresInfo()
{

using (AWCDataContext awcDC = new AWCDataContext())
{

XElement stores = new XElement(“stores”,
from s in awcDC.Stores
join ca in awcDC.CustomerAddresses
on s.CustomerID equals ca.CustomerID
join co in awcDC.StoreContacts
on s.CustomerID equals co.CustomerID
where ca is CustomerAddress &&
/*AdressTypeID3 = main office */
(ca.AddressTypeID == 3/* && ca.Address.GeoCode.Latitude != “0” && ca.Address.GeoCode.Longitude != “0”*/)
select new XElement(“store”,
new XAttribute(“id”, s.CustomerID),
new XElement(“name”, s.Name),
new XElement(“address”,
new XElement(“postalcode”, ca.Address.PostalCode),
new XElement(“addressline1″, ca.Address.AddressLine1),
new XElement(“addressline2″, ca.Address.AddressLine2),
new XElement(“city”, ca.Address.City),
new XElement(“state”, ca.Address.StateProvince.Name),
new XElement(“country”, ca.Address.StateProvince.CountryRegionCode),
new XElement(“latitude”, ca.Address.GeoCode.Latitude),
new XElement(“longitude”, ca.Address.GeoCode.Longitude)
),
new XElement(“contact”,
new XElement(“firstName”, co.Contact.FirstName),
new XElement(“middleName”, co.Contact.MiddleName),
new XElement(“lastName”, co.Contact.LastName),
new XElement(“phone”, co.Contact.Phone))));

XmlDocument storesxml = new XmlDocument();
storesxml.Load(stores.CreateReader());
return storesxml;

}

}

This code does several joins in LINQ to SQL and puts the result in an XElement. This is done because the IQueryable is not serializabe… In my opinion they should make it serializable

Implementing the Presentation Layer

We first made the Presentation Layer with a .NET Google Maps control, but this would make our widget only usable in ASP.NET. So we had to think about a way to make the widget available to use in PHP/HTML/python etc.

We chose to use javascript with jQuery because nearly every platform supports this.

This is the javascript/jQuery code I used to retreive the xml with jSON:

$(document).ready(function() {

var map = new GMap2($(“#map”).get(0));
var burnsvilleMN = new GLatLng(44.797916, -93.278046);
map.setCenter(burnsvilleMN, 8);

$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8″,
url: “WebService/StoreService.asmx/GetStoresInfo”,
//data: “{}”,
dataType: “xml”,
error: function(XMLHttpRequest, textStatus, errorThrown) {
$(“#output”).append(XMLHttpRequest.responseText + “<br />TextStatus: ” + textStatus + “<br />ErrorThrown: ” + errorThrown);
},
success: function(xml) {
// hier wordt de xml uitgelezen
$(xml).find(“store”).each(function() {
var storename = $(this).find(“name”).text();
var latitude = $(this).find(“latitude”).text();
var longitude = $(this).find(“longitude”).text();
var point = new GLatLng(latitude, longitude);
var marker = new GMarker(point);

map.addOverlay(marker);

});
map.setUIToDefault();

}
});

Resources used:

http://api.jquery.com/jQuery.ajax/

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

If you have questions I gladly answer them if possible. Thank you for reading.

About these ads

One Response to Using XML, LINQ and jQuery for a Google Maps Store Locator

  1. van bach says:

    Hi, Sam

    I am a student from Viet Nam. Well, I am really interested in the project and want to learn from it the way to work with Google Map .

    I am glad if you could send me the source code of this project.

    Thank you .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: