Many utilities currently leverage custom Silverlight components in order to host maps and custom functionality that can be accessible from the web. But the longer that this functionality remains, the greater our need for something more arises. Mobile options are becoming more desirable and more necessary, and Silverlight isn't going to see any new releases. Because of this, Silverlight map applications may seem a little obsolete.
But we can rebuild them. We have the technology. We can make them better than they were. Although the reference stops there, because it doesn't cost six million dollars!
The existing Silverlight-based OMS outage map allowed users to see zip codes with affected customers using landbase features and data from Responder™ OMS. Viewers could zoom to each affected zip code and see details about the affected area. The customer list and map had a manual refresh button if new data was needed. Here's what that previous outage map looked like.
Now, here's that same website as viewed on a mobile device:
We ended up building the UI shell first so that we could convert the code, add requested new features, and add UI interactions properly all in one fell swoop. Here's a view of the functionality on a medium screen, with a few extra features just for good measure, like an optional auto-refresh interval.
The functionality at this point has been completely converted and improved upon from TCEC's original Silverlight code. It does everything that the Silverlight control can do and more. From the previous image, you can tell that it functions well using a medium screen width, but we have some design challenges now that the application will actually work on mobile devices.
The biggest challenge lies with small phones in portrait orientation. We get a measly 320 pixels wide for all of that functionality, in some cases. Do we really want to take any of that away from the map size?
To quickly and much more easily tackle responsive design, we implemented the Bootstrap design framework, which gives us a free and open way to design responsive web applications at every scale.
Using this framework, we built out and designed a page structure that would keep the map large when possible, but still allow room for the zip code table and controls. On very small screens, like phones, the map takes up the whole width of the screen, but a button appears that lets you "peek" over at the zip code controls. When you're done, you can click the button again to return to the full-screen map.
This ultimately creates a very usable application on any screen that supports modern web standards. Phones, tablets, desktops, and laptops are all supported.
If you have any interest in new web application functionality or a conversion of an existing Silverlight application, please let us know!