Bing Maps Silverlight Control With Traffic Cams
So there is a CTP of the Bing Maps Silverlight SDK out there and with the discontinuation of the asp.net version it looks like this is the direction that Redmond is moving. I’ve been playing with the controls for a few weeks now and thought I’d do a little tutorial on a practical use. One of the many awesome things about using Silverlight for this is that it don’t bog down with lots of pins / objects on the map and we don’t have to deal with a lot of the AJAX and postback issues we would doing the same thing in a traditional ASP.net app.
So despite the bad things that people in PA have to say about PennDot, they do have a ton of public traffic cams up on the major roads so an enterprising user can check conditions if they are going anywhere around the city.
In this app we’re going to generate a map and pins for each cam which will pop their image into a modal child window for the user to view and refresh the image every 5 seconds
That done, the first thing we need to do is add a ref to the map assembly.
You can do it like this.
Then in the xaml on the main page we need to add the reference thus:
We also add the object to the grid and give it a name. If you run the app now you should get a normal map. For this we’re going to need a Child Window to show the image in, so lets add one to the silverlight project.
Now that it’s added, lets go mess with the xaml a bit.
It has it pretty well setup for us to begin with but we want to bump up the size a bit to make the images more visible and add an Image object to the grid. We don’t need to set its Grid.Row property explicitly since it’s the only one there and will fall into place on its own. Give it a name and jump to the code view.
I’m giving you all the code at once so lets just step through and see whats going on here. First we’re taking a string in the constructor which we’ll see come in handy later and throwing it into a class variable. We’re also setting up a DispatcherTimer which is almost exactly like an old school timer. We preload the image and start the timer ticking every 5 seconds and instruct the callback to reload the pic each time.
We can also see that loading the pic is super easy. Its important however to make sure we’re not caching the image or it’ll never change. In most cases this wouldn’t be an issue as Silverlight does this to save resources, in this case we need the opposite.
Now lets jump back to the main window.
I grabbed the data off the pennDot website and put it into a nice little xml file. It looks like this:
With that added we need to start creating pins for the user to click to see the camera footage.
Now lets do this with LINQ to XML, we’ll need to import the assembly because it doesn’t preload with Silverlight.
That done we can write a little query to grab the data we need.
Now we’ve got an anon collection we can loop through and add our pins. We’ll want to put them all into a new MapLayer to make it easy to clear them all later if we decide to give the user the option to remove the pins and it’ll simplify placement.
For this example I’m just making little green Ellipses for pins but you could do something nicer with ease. You can see that the URL to the different images is predictable if we know the camera ID so we set that up and create an anon method that will run when the user clicks on an Ellipse. The event will create an instance of our child window and point it at the camera URL the user just clicked on. When the user is done it will release the mouse.
Now we add the ellipse to the new MapLayer we created and place it in the correct location. The loop complete we add the new layer to the map. One last change. We’ll do the user a favor and center the map near our cameras and zoom it in so that they’re pretty well visible.
Now lets see how we did.
And the camera
You can check out a live version here