Creating a provider-agnostic online mapping application - Part 3

Posted : Friday, 15 January 2010 17:43:54

This is the last in a three-post series where I exemplify a possible architecture for a web-based provider-agnostic mapping application. In part one I detailed the basic functionality required to load and display a map as well as toggle between different providers. In part two I built on part one to add the functionality to add content to the map. In this post I shall complete the application by creating a simple persistence system whereby when visitors add points to the map, the data is sent back to the server where it will be saved to an xml file such that any time the map loads, any previously added points will be re-plotted.

So in order to add some server-side functionality to this application I created a new ASP.NET MVC Web Application project. I chose MVC as I wanted something quick and easy to implement and more crucially i wanted to be able to wire up jQuery ajax calls to a serside method with the minimum amount of fuss - MVC supplies exactly this. NB If you're unsure or wary of the MVC technology, I cannot recommend highly enough this book by Steven Sanderson, it explains all aspects of the MVC infrastruture in a clear and concise way providing plenty of easy to understand examples. Anyway back to the subject in hand, I created a default MVC project and for the sake of clarity I removed most of the default files created to yield a project structure like that show below.

default MVC project strucure with unneccesary files removed

The next step is to add a method called Map to the Controllers/HomeController.cs (incidentally I deleted all the other methods that were created by default).

   17         public ActionResult Map()

   18         {

   19             return View();

   20         }

Using the default routing configuration of the MVC project, any requests for the URL /Home/Map will be forwarded to this method. The next step is to create a page template (or View to use MVC terminology) for this method. There are a number of ways of doing this, the simplest being to right click anywhere inside the method and select "Add View" from the context menu. You will be presented with a Dialog box, for the top two checkboxes leave the default (unchecked) and uncheck the "Select Master Page" option. This will add an aspx file called "Map.aspx" to the /Views/Home folder. The next step is to add the files created in the previous posts of this series. When everything is added correctly, your project structure should resemble that show below

completed project strucure with all required files added

The last step required to integrate the functionality from the previous posts into this web project is to copy the markup from the default.html file into the new Map.aspx file we just created. Copy everything from the between the <head></head> tags in default.html to the same location in Map.aspx and do the same for everything between the <body></body> tags. To test if everything is working, run the webserver (press F5) and browse to /localhost:xxx/home/map where xxx is the randomly assigned port number that Visual Studio will allocate to this session and is the port under which the development server will be hosted. You should now be able to add pins to the map and tag the locations as outlined in post 2.

So now that everything is running in a hosted we environment we can get to adding the functionality need to save the plotted points. The first thing I did was to add a class to the project to represent an in memory instance of each geotagged point on the map. As this is only a simple blog post I created in inner class of the HomeController class as follows:

   75         public class GeoTag

   76         {

   77             public string Tag { get; set; }

   78             public double Latitude { get; set; }

   79             public double Longitude { get; set; }

   80         }

For speed of implementation, I choose to use Linq to XML for this post. I added a string constant to the controller to represent the location of the xml file that will contain the saved points. I then added the following method which takes a List<GeoTag> and saves them to the specified location:

   57         private void SavePoints(List<GeoTag> points)

   58         {

   59             XDocument xdoc = new XDocument(

   60  &

  • (This will not appear on the site)