Projects

World Heritage South West map web application

We designed and built an interactive mapping application for the South West World Heritage and UNESCO sites,  to promote green tourism in the region. It is a rich web application tather than a traditional website  and  made full use of the technologies used to build it, including the Google Maps API.

South West World Heritage and UNESCO Mapping Application

Client

World Heritage Sites South West (Project Managed by Dorset County Council)

URL

http://www.worldheritagesouthwest.org.uk

Technologies

Django, a mapserver, Python, Postrgres, CSS, XHTML, AJAX, JavaScript

Go Live date

October 2009

Project description:

We built this web based interactive map application to showcase World Heritage sites in the South West and promote green tourism.  Starting with the Google Maps API, the application uses  overlays of polygon, polyline and point data data from various sources and in a number of formats.  The user interface was designed to keep navigation as simple as possible with all the controls and information on a single screen where possible; making it more like a desktop application than a traditional website.

The application was built using a range of technologies including: the Google maps API; the PostgreSQL database server with the PostGIS geospatial extensions; the GIS enabled web development framework, a map server and the mootools JavaScript library.

The Challenge - for the nerds amongst you

The first challenge was installing the development framework, PostGIS and their dependencies. This was compiled from the source code. After a bit of debugging we were ready to start our project and begin to build the application.

Modelling, Importing Data and Administration

All the data and content in the application is modelled using django models. Data was supplied in a variety of formats including csv, xml, and geospatial data files. A mixture of custom management commands and an auto-generated django admin interface was used to import the data into the system.

Building the Front End

Building the front end of the application involved writing several django views and a lot of JavaScript code. When the page loads, the basic html and is displayed then the JavaScript runs which:

• Initializes the google map and sets the initial map position and zoom level.
• Initializes the information tabs and the right hand navigation widget.
• Fires off an ajax request to retrieve the initial map data in json format.
• When the initial request returns, point and polyline overlays are added to the map based on the response data.
• Event listeners are attached so that when the user zooms or pans the map, a request is made for data at the new map state.
• The key controls for showing and hiding data on the map are initialized.

Performance

Initially we drew the site boundary polygons using the Google Maps API. Even with  best practice optimisation it gave less than ideal performance, and the boundaries could not be displayed at a very high level of detail. To rectify this we set up the map server as a custom tile layer provider. Once we'd  installed this we were able to draw the site boundaries. This resulted in substantial performance gains. We were also very pleased with how well the mapserver rendered detail geospatial data, for example the pink Bath overlay on http://www.worldheritagesouthwest.org.uk/#/site/6.

• < Prev
• Next >