Creating a Great Mashup Part 3
This post details features used by Earthquake Explorer , a Windows 8 app that displays earthquake information on Bing maps. Earthquake Explorer was based off of the Earthquakes mashup starter kit on github . Read part 1 here. Read part 2 here.
We left off Part 2 talking about creating a compelling live tile in Windows 8. This really is a must-do feature in Windows 8 – primarily because a live tile creates a more compelling app experience. It encourages the user to keep the live tile ‘pinned-left’ (that is, more likely on their primary screen), and encourages the user to open the app more frequently. That equals higher app usage, higher ad impressions, etc.
Because the earthquake app is consuming earthquake data on our backend using Windows Azure Mobile Services, it’s trivial to send notifications when new earthquakes are detected. We can send a nice live tile that looks like so:
Clearly, this is better than displaying _nothing_, and the map adds a professional look to it. We can also combine this with badges – for example, in Dark Skies, I do something similar when users add new locations to the map, adding a badge notification that displays how many new locations are nearby:
The first step in doing this is to determine which tile template to use. Because the map is the main image, this is a pretty simple as we’d want the map to take up the main tile. The place to look is the tile template catalog on MSDN. In this case, TileWideImageAndText02 seems to fit the bill for wide tiles, and TileSquareImage is the bet bet for smaller, square-sized tiles. From the template page:
The key here is the tile XML – it’s the same if we’re doing a push notification, if the app is updating its own tile, or if Windows is updating the tile using the TileUpdater using periodic updates. To get the image, we’ll use the Bing Maps REST API, which requires a valid Bing Maps key from the portal site.
For a wide tile, we can get a static map using a URL like so, specifying the zoom level (2), centered location (36 latitude, –79 longitude), pushpin location (also at 36 latitude, –79 longitude), and a size of 310x100:
Which returns an image like so:
From the Windows Azure Mobile Service, it’s fairly simple to send a notification with some code like the below. I’m removing some of the dynamic text to shorten it up a little, but realistically we’d be setting the location of the pin(s) and text of the tile itself dynamically:
1: function sendNotification(channelUri) {
2:
3: var baseImageUrl = "https://dev.virtualearth.net/" +
4: "REST/v1/Imagery/Map/Road/36,-79/2?[mapsize]" +
5: "&pushpin=36,-79;48&key={your_api_key}";
6:
7: var smallImage = baseImageUrl.replace("[mapsize]", "mapSize=150,150");
8: var bigImage = baseImageUrl.replace("[mapsize]", "mapSize=310,100");
9:
10: var payload = "<tile><visual><binding template='TileWideImageAndText02'>" +
11: "<image id='1' src='" + xmlEscape(bigImage) + "' alt='map'/>" +
12: "<text id='1'>Some top line text here</text>" +
13: "<text id='2'>Some bottom line text here</text>" +
14: "</binding>" +
15: "<binding template='TileSquareImage' branding='none'>" +
16: "<image id='1' src='" + xmlEscape(smallImage) +
17: "' alt='map'/></binding></visual></tile>";
18:
19: var theTag = 'some_identifier';
20: push.wns.send(channelUri, payload, 'wns/tile',
21: {
22: client_id: 'your ms-app:// id',
23: client_secret: 'your client secret',
24: headers: { 'X-WNS-Tag': theTag }
25: },
26: function (error, result) {
27: if (error) {
28: console.log("(" + error.statusCode + ") Error sending notification");
29: }
30: }
31: );
32: }
(Note: the xmlEscape method is omitted, but is a simple method that escapes special characters for the XML document.) What we’re doing here is using the push.wns (Windows Notification Service) object to send the tile XML directly. If you review the script reference, it is certainly simpler to use the push.wns.sendTileWideImageAndText02 method, but I generally prefer to build the XML directly as done above. The reason is that it allows you to bundle multiple notifications together – such as including both the wide and narrow tile versions. (The other side benefit is that this allows you to enter the application package ID and secret, which should allow a single WAMS to send notifications to multiple applications.)
We’ll look at other mashup examples in future posts!