If you’re after an example of just how powerful Silverlight can be for online mapping scenarios look no further than:
http://www.dwqr.org.uk/map
A project we’ve recently completed for Drinking Water Quality Regulator for Scotland. This application sits within a redesign of their main public facing site with the intention of making the statistics that they collect much more visible and easy to access for the public. It also provides a useful tool for them to present at conferences and meetings.
Quick Video:
What we did
The client supplied us with a shape file describing their regions and some CSV files containing the associated data. We imported these into a SQL Server 2008 database and wrote a server side ASP.NET application to expose the data via an API. The main bulk of the work when then writing a Silverlight mapping application to combine the regions and their data together over an interactive map of Scotland. Each region is clickable and when the user does so a panel is opened which displays the associated data over three tabs:
- Year to Date results, as a grid
- Last Years results, as a grid
- Results compared to National Average, as a chart (even has the DWQR logo as a background watermark!)
Hovering over a particular parameter in the grid also brings up a small window explaining some background information on that particular parameter. The data can all be managed by the client via a small admin application that we integrated into the main CMS used for their website.
Here’s how things look when a zone is selected:
A challenge
One of the issues we had to address what that trying to map so many regions can be quite difficult in terms of performance. Using Silverlight not only provided us with the ability to produce a richer user experience but also dramatically increased the number of polygons we could show at any one time. However it still wasn’t enough and we had to implement some smoothing and caching in order to get the map performing as we wanted.
From the user’s perspective what this means that as they zoom into the map, the polygons become smoother and smoother, removing jagged edges and increasing in detail. This feature is very useful as it allows the user to see clear borders between regions when zoomed in, but not have these minute details clogging up the map when at lower zoom levels and keeping performance at an acceptable level.
The other option would have been to rasterize the boundries of the regions and use images instead but while this is more performant it introduces problems with selection and it can take some time for the more detailed tiles to make their way in.
Rich, fast-loading detail
In keeping with the same theory as above, as the user zooms in, the level of detail on the underlying map itself increases. For example, when viewing at 100%, only the major cities will be cited on the map. But once you move in to view a particular county, then most towns, rivers and landmarks will be displayed. All this happens very smoothly, and allows an appropriate level of detail depending on the zoom.
This is a direct benefit of using Silverlight and the excellent open source project DeepEarth for the mapping application as it can use DeepZoom technology to smoothly introduce more detailed tiles as you zoom in.
For us this smooth panning and zooming around the map is simply the best way currently available of navigating data that is geographically related.
There's also the option to toggle between a street and a terrain map, which can be extended to allow switching between any number of different underlying maps.
Location search
As well as navigating around the map to find a particular region, users can also enter a postcode or place name into the “Go to” box.
When the “Go” button is clicked this location is displayed on the map and the view pans and zooms to place it at the centre of the visible area. The system also works out which, if any, of the water regions the location is within and selects that region, showing the relevant statistics.
Users can add multiple locations, which will all be saved as blue dots on the map during their current session.
In addition, find a zone lets users search through the various water regions before finding the one they want using an autocomplete search. Try entering “far” and then keying down through the list one at a time!
Easy, intuitive navigation
The navigation controls in this app are very similar to those of Google, Yahoo and Bing maps. You can use the mouse to drag the location of the map and to control the zoom, as well as using control buttons to the top left of the viewer. There's also the option to reset the view to the starting position, or toggle full screen mode.
These controls have been nicely customised to fit in with the overall look and feel of the application and the DWQR brand as a whole.
Maps + Data
Using a rich interactive maps to present and navigate your data is an excellent way of opening it up via the web. We’ve got a lot of experience in this area, and can offer unique applications like DWQR so if you’ve got some data you think could benefit for this approach why not drop me a line to discuss:
Bob Thomson
Telephone: +44 (0)131 260 3506
Email: bob@stormideas.com