You are here

Converting TCEC Outage Maps from Silverlight to HTML5/Javascript

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!

Using HTML5, Javascript and CSS, we can craft a responsive design that takes the same functionality and allows it to work on all devices, in all orientations and sizes, without any plug-ins. That was our goal as we recently worked with TCEC to convert their custom Silverlight web application to use this more flexible approach.

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:

Even if modern mobile devices supported Silverlight within their browsers, the screen size would be too small and the application wouldn't scale correctly. Our goal was not only to convert the application to use the ArcGIS API for Javascript, but also to design the new application in such a way that no functionality would be lost on mobile devices with very little screen real estate.

Coming into this project, converting the logic to use the Javascript API was, at a high level, reasonably comfortable. Now, this is definitely still a full-on, time-consuming code conversion, as the language and the execution are definitely different between Javascript and Silverlight. But both APIs do have a lot of similarities that made the process significantly less taxing.

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!