mapRoute – Creating a web application

Starting out

One morning I woke up with an idea. Wouldn’t it be great to have a web application that allowed me and other walkers/hikers to plan routes. mapRoute was born. There are a few similar apps, but they are all pretty limited. I wanted better mapping (UK Ordnance Survey 1:25K), ability to create and edit routes easily, then store them on the server and download them at will so I can load them onto my GPS receiver. As the project progressed my requirements grew and grew, but this was the starting point. The project is about to go live, so I thought I would share the experience over the next few posts.

At the start I had to do some reading and quickly discovered that my minimum requirements would be an understanding of the following:

HTML

A few years ago this was all most web sites had. It’s just a markup language that allows you to create a simply formatted document on the web. I’d used this for years and there’s really not much to it. You can’t create a web app with HTML, but you do need it as a starting point. HTML5 is now available, which provides much more functionality than past versions.

JavaScript

This scripting language runs in your browser and brings a web app to life. JavaScript can interface to databases APIs, variable data and the Document Object Model (DOM), which is really the HTML. I knew a tiny bit of JavaScript, but I would have to learn much more. This was to be my steepest learning curve. Fortunately I saw my brother-in-law the weekend I started and he gave me a recent JavaScript book thick enough to club a bunch of 70′s DJs to death.

CSS

Cascading Style Sheets allow you to format web pages while separating formatting from content. You can do much more than you’d think with it, so it was important that I got to grips with CSS quickly.

AJAX

Ajax is cool. It allows you to communicate with a data source (database, API, web site) without reloading the page. Remember how you used to fill out a form, press submit and the page would re-load. This was the only way to pass data. Now think of when you type something into the Google search engine. After each character the page shows matches with what you’ve typed so far. Ever wondered how it does this? It’s Ajax. Each time a key is pressed Ajax sends the string back to the server, which returns a set of results… all without a submit key or a page re-load. The search button is now superfluous on that page. Another example relevant to my project is Bing maps. As you move the map more tiles automatically load. It’s not magic, it’s Ajax.

PHP

(PHP: Hypertext Preprocessor) is a pretty straightforward server-side language. All of my Ajax calls PHP code. The PHP code makes database calls, gets elevation data or makes calls to APIs. I needed to write some proxy code to allow calls to be make to external domains. As session variables are server-side I also use PHP to deal with these. When I started this site I originally used Perl as my server-side language. Personally I find PHP is much easier and have converted all Perl to PHP on this site now too.

mySQL

This is an open source database manager that is supported by many web hosts, including mine. As I am a SQL Server DBA, this should be a piece of cake for me. At last, an easy bit.

JSON

I am very familiar with XML due to my job, but all GPS users should know some xml, as gpx files are really XML data. It’s a method of representing data in text form, so it’s ideal for passing between applications. JSON is a lightweight and simple substitute for XML. It tends to be more popular for API and web services. It is pretty straight forward to pick up.

APIs and other stuff

Bing Maps 7.0 was chosen because of it’s ability to provide 1:25K OS maps, something that the Ordnance Survey themselves couldn’t do. Geocaching Live API was used to provide calls directly into the geocaching database, currently holding over 2M active geocaches worldwide (150K in UK alone).

There would also be various libraries to provide graphs, date entry and even a little jQuery to enhance the user experience, but I decided to keep this to a minimum.

This entry was posted in Geocaching, GPS and Maps, Walking, Web site. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>