It turns out that sexy Silverlight based maps are a bit like buses, you don’t see any for a while and then two come along at once! Regardless of lame metaphors regarding the frequency of public transport we’ve got another mapping application which has just gone live:

Summer Cabinet Map 2009

Quick Video:

While the DWQR Map we published earlier in the week was more about the presentation and dissemination of information – pretty much a one way flow - the Summer Cabinet Map is much more about trying to engage with a community and provide an online destination where the distribution of information can become the start point for a conversation with users.

The Scottish Cabinet is holding five meetings outside Edinburgh over the Parliament's summer recess period, starting in Dundee and continuing through Melrose, Stornoway, Aberdeen and Glasgow. This follows on from last year's ground-breaking Summer Cabinet programme where several hundred people attended events in Dumfries, Inverness, Pitlochry and Skye. The Summer Cabinet Map shows each of these destinations and has the following features:

1. Zooms to show Scotland as a start point
2. Smooth zooming and panning with more detail seamlessly brought into view
3. Select a location zooms to that location and the pin changes to show more detail, including date and location name
4. When selected each location exposes a panel which offers various information and media

The Information Panel

The information panel allows users to easily browse a range of information and media relating to that location. It offers the following:

• When and Where – Shows the date, time and location of each of the events (Cabinet, Homecoming and National Conversation) at that location
• Media
  • Podcasts – Over the course of the events the Scottish Government will produce podcasts which will then appear in this section. Clicking on a podcast plays it in place using the maps own MP3 player.
  • Images – The map is automatically updated via a number of other websites and in the case of Images Flickr is monitored for particular tags and relevant images for the given location brought in. Thumbnails are shown and when clicked on a larger version is brought into view with slideshow functions to browse the other images. The photo’s title and description are also brought in from Flickr and displayed.
  • YouTube – As with images YouTube is monitored for a range of tags and relevant videos are brought in and displayed a links within the map. At present when clicked YouTube is opened in another window, in the future we intend to include the ability to watch videos in place within the mapPlayer.
• News and Noise
  • Articles – Any number of RSS feeds can be pulled into this area and the headlines displayed as links. In future we intend to introduce a mini-RSS reader so that content can also be read in situ within the map interface.
  • Twitter – Twitter is monitored for a range of keywords relating to the location in question and relevant tweets brought in and displayed in a list. Clicking on a tweet will take you to that location on Twitter.
• Links and Resources
  • Links – A list of hyperlinks to further relevant information for each location
  • Resources – A list of hyperlinks to further relevant downloads for each location
• Comments – A quick and easy way for the public to give feedback on each location

Hooking this map up to third party services like Flickr, YouTube and Twitter is a great way of enriching the content and allowing the map to grow and update either automatically or guided by the client without any further technical input. In the case of the Scottish Government they already had Flickr, YouTube and Twitter accounts and so were able to leverage existing skills and processes to manage and interact with the map.

This approach also allows the public at large to join in with the conversation using tools and channels that they may already have accounts and familiarity with rather than asking them to learn the workings of yet another application or website.

It’s going to be fascinating to see the content and conversation grow around this map. If you’ve got geographically relevant data you’d like to expose alongside this sort of media and social interaction why not give us a call:

Bob Thomson
Telephone: +44 (0)131 260 3506
Email: bob@stormideas.com

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:

1. Year to Date results, as a grid
2. Last Years results, as a grid
3. 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

This post is part of a loose series about some recent Silverlight, DeepZoom and DeepEarth work I’ve been doing, see:

Silverlight DeepZoom as an Ad Unit (MPU)
Silverlight data visualisation – SIMD Prototype
Silverlight Visual Car Search – Using DeepZoom for Search

For the others.

I was excited to hear at MIX09 that Microsoft were releasing a Silverlight control for the client side interaction with Virtual Earth. We’ve been doing some interesting work on Silverlight mapping over the last few weeks, see:

http://dwqr.live.stormid.com

For an example (should be the subject of another blog post soon). I think there’s a real opportunity in this area because:

• Online mapping is a powerful application and the trend is towards ever richer interactivity
• When you try and implement a lot of richness and then push large amounts of data over the map traditional mapping solutions (basically AJAX / Javascript) grind to a halt.
• For some reason Flash mapping didn’t really take off to fill this gap – perhaps because of a lack of hard core developers or perhaps because Google are so committed to AJAX, although it’s noticeable that the much heralded SteetView is using Flash for the client side UI.
• More and more people and things (cars, packages etc) are transmitting their location and these locations are becoming more available via public APIs (see initiatives like Yahoo FireEagle)
• Silverlight DeepZoom is perfectly suited to bringing map tiles in and out of view in a smooth manner

All this suggests to me that there’s a real opportunity for Siverlight to become the premier technology for the client side of GIS systems. In this example I’m using the Guided Navigation control I built for the previous prototype (Visual Car Search) but instead of using it to filter DeepZoom collections I’m doing so to display and filter the display of adverts (red dots) on a map.

I’m also using the map to display car Dealerships (blue dots). You can get a good idea from this video:

Clicking on a dealership or an advert displays it’s details with a link through to it’s page on the main site.

As you can see at the end you can also set your location, represented by a green dot.

If you’re brave enough you can also check out the live version here, YMMV:

http://rrsl.stormideas.com/Map.html

The possibilities here are pretty compelling:

• Increase the amount of data and images you display for an advert or a dealership. For example click on a dealership and flick through the cars on offer via a coverflow like interface.
• Allow users to submit enquires direct from the application rather than requiring them to click through to the main site
• Once you have entered your location then whenever a dealership or advert is selected show the route to that location and a panel with directions
• Pick up parameters from the querystring or from InitParams that allow the application to boot up with certain restrictions or a predefined search. For example only showing cars and dealerships from Arnold Clark
• Some adverts also have an associated video – bring that in and display it too

I should note that we are not actually using the Microsoft control – we’re leveraging the superb DeepEarth project for a number of reasons:

• We can customise the source
• It allows us to use other tile sets – we are using Yahoo because their terms and conditions allow us to use their tiles more freely
• The Microsoft control is not licensed for production use (not a problem here, but a definite problem for DWQR above)

Actually on that point, I’d make mention that we have a really positive relationship with Microsoft but in this case I felt that their licensing didn’t make sense and we couldn’t seem to make any headway with it. For Virtual Earth you’re looking at a cost in the low thousands per year which doesn’t lend itself to use on small but very innovative projects like DWQR or to prototyping projects like the one above.

Considering that this kind of work is really showing off the possibilities of using Silverlight for mapping I would think it would make sense to be showcasing Virtual Earth within that context rather than a rival.

To be fair, the Microsoft Silverlight Virtual Earth control gives you free access until some point later this year but as that is not licensed for production it leaves smaller players like me, who want to put out innovative production Silverlight mapping applications having to use an inferior (sorry Yahoo but it’s accurate) competitor.

I understand that in a large organisation you’re going to get these mismatches but considering that Microsoft are trying to engage with smaller innovators through programmes like BizSpark I was surprised to find that Virtual Earths licensing structure did not have a space to encourage them.

This post is part of a loose series about some recent Silverlight, DeepZoom and DeepEarth work I’ve been doing, see:

Silverlight DeepZoom as an Ad Unit (MPU)
Silverlight data visualisation – SIMD Prototype
Silverlight mapping – Using DeepEarth and guided nav

For the others.

In this example we use a combination of RoadRecord search and Guided Navigation along with a DeepZoom collection of images in order to browse a large number of used car adverts in a very visual manner.

It’s quite an interesting approach, inspired by this excellent piece of Silverlight development:

http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspx

In our case we’ve got a few key problems that these guys didn’t have to deal with. They have 320 or so images in their collection, and as they are models this collection does not change that often. We have around 13,000 adverts live at any one time and the make-up of these adverts changes on a daily basis! I tried some initial experiments with DeepZoom collections of 13,000 subimages and unsurprisingly performance began to deteriorate.

What this means is that I have to reduce the result set in some way before presenting the visual search – this can be done across any axis (Make, Dealership, Year etc etc), in the case of this example I’ve introduced a TreeMap control (got the code from the excellent Descry samples) at the top level in order to select by Make before we enter the visual search.

Here’s video of the prototype in action:

You can see how you make an initial selection of make via a TreeMap and then filter down the DeepZoom collection using Guided Navigation on the left hand side. You can zoom, pan and select items in the main area so the user can get right up to the detail in the images.

When an image is clicked on a small panel appears which provides some additional data and links through to the main site.

This prototype is also live at, be warned YMMV:

http://rrsl.stormideas.com/Search.html

Notes:

• You must select “BMW” from the TreeMap in order to see results at the next stage
• You can’t reset at the moment, you have to refresh the page
• Some times things don’t work, this is a prototype!

It’s really interesting to think how this kind of search could be used, both within the context of the RoadRecord site and beyond. Basically anyone who has large collections of images they would like to improve the access and navigation of could benefit from something like this, people like Getty Images immediately spring to mind!

In terms of improvements to this prototype I’m thinking:

• Make advert display panel more detailed and allow users to contact the seller from within this application rather than asking them to click through
• Add metrics to record each new car displayed in the details panel as an advert view, important commercially
• Add querystring or InitParams which allow the start point of the control to be set – for example to a specific make or dealership.
• A dealership specific version makes a lot of sense – introduce their details and logo, restrict the search to only within that dealership. This control would then be hosted on the dealerships page within the site and could also be offered up for embedding on other sites.
• Stick this whole thing in Azure and use Azure Storage instead of the filesystem to serve up the images.

If you think you've got a need for this sort of this, get in touch!

This post is part of a loose series about some recent Silverlight, DeepZoom and DeepEarth work I’ve been doing, see:

Silverlight DeepZoom as an Ad Unit (MPU)
Silverlight mapping – Using DeepEarth and guided nav
Silverlight Visual Car Search – Using DeepZoom for Search

For the others.

The Scottish Index of Multiple Deprivation identifies small area concentrations of multiple deprivation across all of Scotland in a fair way. They provide loads of information and data via their website that just looked too good not to try and visualise.

I’d been waiting for a chance to use the Descry codebase and thought this might be an ideal dataset to try out their TreeMap control. I downloaded an Excel file from the SIMD site and focused on the first table of data within it. For the purposes of this example I’ve included a screenshot of this data when you first load up the visualisation, simply clicking this will reveal the real deal underneath.

Here's a quick video:

What’s exciting is that this little sample only touches a tiny proportion of their data, apparently they’ve got somewhere in the region of 9TB of this stuff!

You can check out the live version at:

http://simd.stormideas.com/

I’m really excited by the possibilities that Silverlight opens up for performing rich data visualisation and navigation over large datasets. In this particular case a map driven UI for the majority of the data would work well (watch this space!) with particular angles on the data ripe for being picked out and being presented as an interactive visualisation.

A good example of the kind of thing that could be done is another on of the Descry examples:

http://www.visitmix.com/labs/descry/theobesityepidemic/

This sort of issue based page is ideal for drawing attention to a particular set of values from an underlying dataset. It also gives you something that is ideal for PR purposes, as it gives the press something nice and visual to grasp as well as something interesting to link to.

Scotland as a country has traditionally struggled on health related issues (if you are a male from certain areas of Scotland your life expectancy can be the same as in many third world countries) and as such in recent years there has been a real push to draw attention to these issues through campaigns in the press. I’m thinking that this sort of visualisation could be a valuable tool in this area – you may also want to extend it to allow users to interact even more – for example entering your weight and location would then show you how you compare to the average for your region and to the national average, with links to relevant health information based on the results.

Interesting, does anyone know where I can get the statistics on the rise of binge drinking in Scotland over the last 20 years and a link to the AA affiliate scheme? ;)

Let me know what you think!

Silverlight Visual Car Search – Using DeepZoom for Search
Silverlight data visualisation – SIMD Prototype
Silverlight mapping – Using DeepEarth and guided nav

For the others.

We’re big fans of Silverlight DeepZoom and are keen to continue exploring the possibilities it opens up. Inspired by a video interview with Jose Fajardo and DeepZoom Obama we've created a prototype MPU for RoadRecord.co.uk (an extensive ASP.NET used car search developed by our sister company StormID).

You can check out the MPU (on the right hand side of the page) in place on a demo site at:

http://roadrecord.stormideas.com

Or check out the following video:

The MPU itself presents an image of a F1 car which in turn is made up of hundreds of images of cars which have been uploaded to the RoadRecord site. In place of the drivers visor is another image, this time of the RoadRecord logo, which is again made up of images which have been uploaded to the site.

If the user does not interact with the unit it zooms in to the second image from the first after 10 seconds and continues to loop like this until the user interacts. The user can pan, zoom and go fullscreen on the image using their mouse.

Clearly we need to add more interactivity and actually link through to the target site. We’re thinking around the following extensions:

1. Build in some simple engagement metrics
2. Make into a quiz or sort of treasure hunt style game by hiding clues / steps inside the DeepZoom images
3. Expand the MPU viewport on rollover
4. Add additional interactivity such as links to specific pages on the RoadRecord site

Do you think this sort of MPU has a future or are people suffering from so much banner blindness that it doesn’t matter?!

We’re heading out to MIX09 in Las Vegas tomorrow so I thought I’d post up a bit of an overview off some of the cool stuff we’re going to be promoting while we’re out there.

new storm ideas site

We’ve just released a new Silverlight site today for storm ideas, in preparation for MIX09. You can check it out at:

http://www.stormideas.com

There's a nice activity feed on the homepage that aggregates my blog posts, google reader shared items and tweets (could be any combination of RSS feeds) I love the way that Silverlight can weave together services and data from all round the web and present it well.

Check out the labs section for links to some Silverlight bits and bobs.

More details on this one here.

DeepZoom and colaab

We've had a busy couple of months since we got back up and running after the Christmas break this year. Since then, we’ve added some key features that truly set colaab apart from the rest of the field; and one which I’m really excited to announce to you is the integration of Silverlight DeepZoom into colaab.

What this means is that users can review and collaborate on extremely large images without having to wait for them to download – when working with these images they can comment, annotate, pan and zoom without losing quality and without the wait!

To get an idea of how this works check out this blog post:

http://blog.stormideas.com/archive/2009/03/05/colaab-ndash-view-large-images-instantly-with-deepzoom-integration.aspx

This shows a quick video where I view a 9MB image, a 12MB image and a 160MB image without having to download them first – accessing each one is almost instant. Once open I am able to zoom in with incredible resolution and detail.

This is a key difference that DeepZoom brings to the table and is something that really differentiates colaab – no one else is currently offering this functionality and this is thanks to our choice of Silverlight for the front-end.

We’ve also been hard at work on a range of other improvements too, the main one of which is the “Actions” tab which allows to you jump from comment to comment, making colaab easier and more efficient to use. For a full lowdown on these features check out this blog post:

http://blog.stormideas.com/archive/2009/02/19/new-release-of-colaab-has-gone-live.aspx

Regards the DeepZoom integration, there's lots of ways we could take it from here - I've also been working on integrating the DeepEarth (http://www.codeplex.com/deepearth) project into colaab! Early results are very promising - collaborative mapping feels like an interesting area.

In this area (DeepZoom) I'm also working on integrating the DeepZoom Visual Site Search stuff I made for the Show Off competition (http://blog.stormideas.com/archive/2009/03/10/mix09-show-off-entry-deepzoom-visual-site-search.aspx) into colaab - comments and annotations are being a pain, but I'm getting there. You can see a prototype in action at:

http://app.colaab.com/R/d4cade23-c88f-4d7d-9c7a-9bc100963ed1

BrandWatcher on Azure

I've also been playing with Azure and have pushed a small Silverlight application live:

http://brandwatcher.cloudapp.net/

Which takes a search term and returns results from a few different APIs (Twitter, SocialMention, Google news search, Google blog search). It's really just a toy to get my head into Azure but you might find it interesting to see a little Silverlight application weaving together some data and deployed into Azure. Have a search for some basic terms and check out the results.

If you’re going to be at MIX09 please drop us a line, we’d love to meet up!

We’ve just pushed a new version of our storm ideas marketing site live.

http://www.stormideas.com

We’ve developed it using Silverlight 2 to show off our skills in this area and because we love working with the technology! Here’s a screenshot of the homepage (click to visit site):

There are a few interesting touches to the site:

• The background – You’ll agree that crucial to the site is the randomly generated background circles. These arrange differently every time you visit the site, or when you click the background area.
• Latest activity – one the homepage we feature a latest activity widget that displays a combination of our blog posts, tweets and Google Reader shared items. We’re generating new links all the time via these channels so this was a great way to keep the home section fresh. Items are in reverse chronological order but we do lift out our latest 3 blog posts and display them first as they have greater value.
• Labs – The labs section is a place to display prototypes, toys and playthings that we develop. To start with it features:
• Our MIX09 Show Off entry – read more about it here
• A DeepEarth mapping prototype we are working on (more to follow on this in a later post) – view it live here
• A MagicDust plaything that came out of making the randomised background for the Storm Ideas site – view it live here
• An Azure prototype called BrandWatcher – view it live here
• A Twistori inspired Silverlight 2 control which searches Twitter for one of four words “internet”, “web”, “storm” and “ideas”, updating in near real time as new items appear – at the moment you’ll need to visit the labs to see it, in future I’ll break it out into a separate project and post more details
• Blog – It’s so easy to consume and weave together RSS using Silverlight. We display a list of the last 10 entries on our blog to integrate this content a little more with our main site. Clicking on an entry navigates the user to the blog proper.

Check it out and let us know what you think, we’ve also badged it up for MIX09, if you’re going to be in Vegas give me a shout if you want to meet up.

We’ve entered the MIX09 ShowOff competition! In the video we show a prototype application that takes a URL through a front-end Silverlight client, sends it to a WCF service which spiders the URL and any pages on the same domain it links to storing the content of the title, keywords and description metatags along with the pages HTML and a screenshot of the page.

The service then runs these pages through the DeepZoom Composers DeepZoomTools.dll to produce a DeepZoom collection and the root of that is sent back to the client application.

The client the allows viewing of the collection, with pan and zoom enabled. A search box allows searching of the stored title, keywords, description and html of the pages, filtering down the DeepZoom collection as the users types. The user can also enter a slide show mode to view the pages in turn.

Download high quality

We’re still working out exactly where we want to take this and are considering a couple of options:

1. Introduce this as a Resource type in colaab, allowing people to create their own DeepZoom Visual Site Searches (we might need a better title!) and comment and collaborate around them inside colaab.
2. Build a stand-alone Silverlight application and associated back-end service which performs this process and produces a DeepZoom Visual Site Search of a supplied URL. The end result would be available at a given URL and supply an embed code for a length of time, say 30 days – if they wanted to keep this permanently and continue to embed it in blogs etc then they would have to pay a small one off fee – say $5.

What do you think – would people pay a small fee to have one of these produced and kept available for them?

We’re really excited to announce that we’ve just completed the integration of DeepZoom into colaab! What this means for our users is that they can review and collaborate on extremely large images without having to wait for them to download and zoom in without losing quality!

To get an idea of how this works check out this quick video which shows me viewing a 9MB image, a 12MB image and a 160MB image without having to download them first. On each one I zoom in on comment locations in incredible resolution and detail. At the end of the video I upload a 4MB image which is then DeepZoomed behind the scenes and becomes available to me and anyone I choose to share it with without the need to download it and with no loss of quality from the original image.

Zooming and panning is even smoother when viewing the real thing, here’s a public url of an example:

http://app.colaab.com/R/2171fed2-f060-4c2b-b187-9bc10095ec9f

This is the key difference that DeepZoom brings to the table and is something that really differentiates colaab. Giving users and their collaborators quick and detailed access to high resolutions images be they maps, medical imagery, architectural and construction plans or high resolution comps and photographs used in a design project.

It’s a superb was of exposing these images to others to review and collaborate. Commenting, annotations, live chat and more all still work in the same way. Using colaab in this way saves so much time and hassle while presenting your content to others at it’s best.

Current ways of doing this are broken:

• Email filters stop large attachments and collaboration get’s lost in a series of reply-all chains
• Services to transfer large files still mean the recipients have to download the file and have the correct program to view it in – and there are no collaborative functions
• Sending large files or drawings by courier is expensive, time consuming and limits collaboration, resources drift out of date and expensive mistakes are easy to make

We’ve initially set a limit of 50MB per upload while we gather feedback on this latest development, this will rise in the future.

If you have an existing colaab account you can login and try it now here.

If not then what are you waiting for, sign up for free now!