APIMASH Quakes & Astronomy

A bit overdue, but I just realized I never really announced the APIMASH project we’ve been working on.  It’s up on github.   The purpose of the project is to illustrate how to go about constructing a mashup application from a variety of data sources.  We’re adding to the project all the time, and have both Windows 8 and Windows Phone app starter kits to get you going.  What makes the APIMASH concept so fun, to me, is that we’re consuming real-world data.   Whether you use one of our APIs we consume in the kits, or find one through a site like Mashery, Programmable Web, the Azure Datamarket, or others, mashup applications are a LOT of fun to create.  Because many mashup applications use similar patterns, consume similar JSON data, etc., you’ll see it’s easy to adapt the code to just about any scenario. I’ve got a couple of examples in the APIMASH project, and more to come soon.  The first one is an earthquake sample that illustrates how to consume a data feed from the USGS that contains earthquake information for a given time frame.  That data is then plotted on a Bing map.   This starter kit is available as both a Windows 8 app and Windows Phone app.   The starter kits are very bare-bones (intentionally) – a more complete version based off these templates is available in the Windows Store as an app called Earthquake Explorer.   Conceptually, the apps are the same, but the finished app in the store illustrates what you can do by adding a bit of polish to the app.  You can read more about creating a great mashup using this app as an example here in these blog posts. Starter Kit: Completed app: The other project I created in the APIMASH project is called Messier Sky Objects, which is available in the Windows Store as Messier Object Explorer.   This is a mashup (of sorts) that combines Worldwide Telescope with the data of all Messier objects, a collection of objects like nebulae, galaxies, clusters, et. al.  By using the Worldwide Telescope JavaScript API, it’s simple to create great-looking astronomy apps (in fact, many of my apps, listed in my side-bar on my home page, use this as a template). So what’s next?  I just released Brew Finder for Windows 8.   This app uses the brewerydb.com API to show local breweries and is available in the Windows Store here.   I hope to have a nice sample in the APIMASH project soon based on this project. Have another sample you’d like to see?  Leave a comment and we’ll review it on the next team meeting!

Building for Cost Part 2

In the last post, we looked at ways to separate content using different pieces of Windows Azure for the benefit of creating a more cost-effective solution using Windows Azure Web Sites (WAWS) and Windows Azure Storage for storing images and other binary/static files.   Although we’re looking at this just for cost efficacy, frankly that approach just makes sense from an availability and performance aspect, too. Another fantastic service is Windows Azure Mobile Services (WAMS), but unsurprisingly, it has its own cost structure outlined here: Similar to WAWS, you can have up to 10 services for free.  But, the way these services are metered are completely different, and it might change the way we build an application. First, let’s discuss the free tier.  The current metering, limited to 100 devices, means that using an authenticated client (that is, any client using the SDK) renders this tier useless for anything other than testing.  For example, here’s my low-use application: We’re not really incurring many API calls, but our device count is pretty high.  When I designed the app, these meters weren’t in place, but if they were I’d design the app differently.  Hopefully, we’ll see some changes in this as the current plan is a bit inflexible.  What this means, though, is that for my app to keep working, I need to upgrade to the $25/mo plan.  By making a few specific decisions early on, we can build the application to take advantage of both WAMS and WAWS.  For example, in WAMS, custom API calls can be made and invoked over HTTP.  I leveraged this in Brew Finder for several items: brewerydb’s callback, live tiles, and web services that don’t require authentication.  Because these calls are made from “non-devices,” the usage looks like so: I’m not exactly sure why this is showing zero bytes out (it could be for the time duration shown in this graph, it’s not significant enough), but the 0 devices and API calls count is accurate.  We also have the option to deploy another WAWS with node.js, if we’d like to stick with server-side javascript.  Remember, the database that is used can certainly be shared by any number of WAWS, WAMS, etc.  So, if you need to curb back on your API calls, offload that work to a WAWS instead where the calls are not metered if you don’t need WAMS specific features (like authentication).  Summary The biggest challenge in developing a cloud backed app is guesstimating the usage.  The first step, though, is to understand what is being measured – API calls, devices, bandwidth, CPU time, etc.   Keeping the application architecture spread across multiple services for different functions (authentication, live tiles, etc.) is a great way to make the application flexible so you can take advantage of the way each service is metered, bearing in mind this is always subject to change. Having trouble estimating or getting started?  Drop me a note or leave a comment on this post.  I’d be happy to help you work through some ideas. 

Building for Cost using Windows Azure

One of the great advantages of having a green field cloud-based infrastructure is being able tailor the app using specific features of the platform.  Sometimes, cost isn’t an issue.  But, many times – particularly for indie devs – it is.  Scale isn’t the foremost concern here, and often times dependability isn’t, either.  Rather, it’s flexibility and cost.  In this post, I’m going to dissect a few ways to take advantage of Azure and save some coin in the process.  Estimating Azure costs continues to be one of the most frequent questions I’m asked. First a couple of housekeeping issues:  Windows Azure has a pricing calculator that shows the current prices and allows you to turn the knobs and dials to forecast the price.  I’m writing this blog post on 7/24/2013, and since prices are dynamic, this post will be dated as prices modulate so keep that in account.  Also, I’m doing rough math to keep this simple, and picking zone 1 for bandwidth costs (which is everywhere except East/Southeast Asia where rates are slightly higher). What hat are you wearing today? I’m approaching this as an indie dev who wants to create application services and host content without incurring a big expense.  I need reasonable reliability (no under the desk servers, but I don’t need geoloadbalancing, either), and I’m not willing to pay for 2+ servers for an SLA.  In short, my apps currently don’t make enough money.  These data points below are taken from my current apps you can see on my blog sidebar. Windows Azure Virtual Machines cost $0.02/hr or about $15/mo.  If you’re the kind of person who likes to install all kinds of stuff, this might be for you.  It’s a good option to keep in mind because unlike most other offerings, this is completely customizable.  I could load up this server and support all my apps, if I wanted to, but for now, this isn’t anything I’m interested in. First, let’s look at Windows Azure Web Sites (WAWS).  With WAWS, you can easily deploy web sites and apps, but lose some of the customization.  You can either spin up an app based off an image (like Wordpress) or deploy your own web site.   You can host up to 10 sites for free, or upgrade to shared mode -- required for custom domains and costs about $10/mo.  If we stick with Free, we’re metered to about 1 hour of CPU time per day (which means deploying your own chess engine might be a bad idea).  This is also sub-metered to make sure we’re not gobbling up too much in any given block of time – here’s an image of the dashboard for my Dark Skies / Windows 8 app: File system storage and memory usage you generally don’t have to worry about.  Your app is unlikely to change its size footprint, and you’d have to have a specialized case to warrant memory concerns.  The free tier is also limited to 165MB/day of outbound bandwidth per day.   This is the one we need to watch.  More users often mean more CPU, and can mean higher memory usage, but certainly will linearly impact the bandwidth our app uses.  In addition, I can see most of these values plotted for the last week on the dashboard: This WAWS has a very predictable usage pattern.  I’m not concerned about the outbound bandwidth yet, but that’s by design.  By knowing this value is metered strictly, it’s best to keep images and other static files (such as JS files) elsewhere, such as in blob storage, as those will tear up the 165 MB/day limit.  So let’s take a step back for a moment.  What is this WAWS doing?  It’s serving Windows 8 live tiles for Dark Skies, like so: The ASP.NET MVC based site has an engine that determines the moon’s rise/set times, and passes this down to a view which looks like: <tile> <visual> <binding template="TileWideSmallImageAndText03" branding="name"> <image id="1" src="http://lightpollution.blob.core.windows.net /icons/80/waning_gibbous.png" alt="moon phase"/> <text id="1">Waning Gibbous Rises at 09:43 p.m. Sets at 09:41 a.m.⁺</text> </binding> <binding template="TileSquarePeekImageAndText04" branding="name"> <image id="1" src="http://lightpollution.blob.core.windows.net /icons/150/waning_gibbous.png" alt="moon phase"/> <text id="1">Waning Gibbous Rises at 09:43 p.m., sets at 09:41 a.m.⁺</text> </binding> </visual> </tile> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } There are a number of tiles that get served from this site, and at this point in time, it’s all it does.  Pretty simple for an entire website.  All of the moon images are stored in blob storage instead of in the WAWS.  This image is pulled by every Windows 8 app updating its live tile, which is about 1,100 requests per hour.  The outbound text adds up to about 20MB/day, or about 600MB/mo.  If we assume that each one of those requests are displaying a 10 KB image like in the tile above, that’s 1,100 x 24= 26,400 requests * 10 KB = 264,000 KB/day, or 264 MB/day.  Ouch!   Remember, we’re limited to 165MB/day – so we can keep within those limits by placing the images in blob storage.  Blob storage isn’t free, so this would present a decision: do you put the images in blob storage, or keep them in the WAWS but upgrade to the shared tier?  Here’s a quick look at the shared tier: Using a Shared WAWS There’s no limiting of bandwidth, and we’ll simply pay for what we use.  In our above example, 264MB/day is about 7.5 GB/mo.  If we look at the data transfer rate page, the first 5 GB/mo is free, followed by $0.12 / GB.   Since our total outbound including the raw text puts us at 8 GB/mo, we’re only charged on 3 GB, and spending $0.36/mo on bandwidth.  Remember, too, that we upgraded to Shared mode to unlock the restrictions, which is $9.68/mo. All said, we’re looking at $10.04/mo if we’d like to put the entire site in a single WAWS. Using Storage In this example, let’s break out the images (as it currently is in production) and compare costs.  Our WAWS is free, and looking at the meters, we’re comfortable within the usage restrictions.   The only thing we need to worry about is our blob storage account.   Blob storage, if you aren’t familiar with it, is a service that holds any kind of binary data, like files, images, and documents.  It’s scalable and an easy way to separate the code of a website from the content, and compares to Amazon’s S3. Looking at the storage pricing page, our images consume a a few MB at most, so we need to round this cost down to $0.01 as it’s just impossibly small at this scale.   Transactions are incurred for every get request, at the cost of $0.01 per 100,000 transactions.  Since we’ve got 26,400 requests/day, that’s 792,000 requests/mo, or about $0.08.   The outbound bandwidth remains unchanged. All said, we’re looking at $0.36/mo for bandwidth and $0.09/mo for storage, for a total of $0.45/mo. Conclusion Obviously it’s a big cost savings to stick with the free Windows Azure web site and offload the assets into blob storage.   We don’t have an SLA on the free tier, but then, if a request fails, it’s a silent fail as the tile skips that update.  The user isn’t likely going to notice.  The difference gets a little more interesting when looking at Windows Azure Mobile Services, and I’ll do that in the next post…

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: http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/36,-79/2?mapSize=310,100&pushpin=36,-79;48&key={your_api_key} 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 = "http://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: }  .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } (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!

Microsoft DevRadio: (Part 2) APIMASH – Earthquake and Messier Sky Object API Starter Kit for Windows Store Apps

My latest DevRadio episode has been published – here are the details! Abstract: In today’s episode Brian Hitney demos for us the Messier Sky Object Explorer and Earthquake Starter Kits for your Windows 8 apps. Tune in as he walks us through both APIs and show us how easy it is get started building for Windows 8. Check out all the APIMASH Starter Kits here Download Earthquake APIMASH Starter Kit Download the Messier Sky Object Explorer APIMASH Starter Kit Next Steps: Step #1 – Download the Tools for Windows 8 App Development Step #2 – Download Visual Studio Express for Windows 8 Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes, Windows Phone Marketplace,  or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Blogs & Articles: Brian Hitney’s blog APIMASH Starter Kits (all) APIMASH on Channel 9 Download the Earthquake APIMASH Starter Kit Download the Messier Sky Object Explorer APIMASH Starter Kit Download the Earthquake Explorer app for Windows 8 Videos: 7 Part Series – Using Windows Azure to Build Back-End Services for Windows 8 Apps Virtual Labs: Windows 8  Virtual Labs Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)

Creating a Great Mashup using Windows Azure

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. Creating a mashup is pretty easy in Windows 8 – creating a great one requires a bit more work.   In this case, I'm working with the USGS earthquake GeoJSON feeds, a very easy-to-use feed that contains earthquake information for either the past hour, day, week, or month.   Overall, it’s a pretty ideal feed.  But, if you search for and install virtually any earthquake app in the store, you’ll see the limitations quickly.  While some apps allow some lightweight filtering of the data, there really isn’t a concept of search, pagination, and server-side filtering. To solve these limitations, we’d typically need to build out a fairly robust back-end server; fortunately, Windows Azure Mobile Services makes this really easy so let’s get started. First thing you need is a Windows Azure account (here’s a link to get a free trial).  To get the pricing stuff out of the way first:  Windows Azure Mobile Services currently offers a free tier (even beyond your trial), however, quite likely you’ll want to use a database behind the scenes, and that starts at $4.95/mo.  EDIT:  Good news!  SQL Databases now offers a free tier for up to 20MB databases. Multiple Mobile Services can share the same database as they are all schematized.  With your account ready to go, log in to the Windows Azure portal and select  Mobile Services in the left nav.   Next, click the New button in the bottom left to create a new Mobile Service (which I’ll just refer to as WAMS).  The New flyouts are context aware, so it should be ready to create a new WAMS but, just to verify, you should see something like this: After a few moments your service is set up and ready to go.  You will need to create a new SQL Database if you don’t already have one.  The default page of your WAMS should look like this, and it’s full of great info for creating new or leveraging WAMS in existing apps: Let’s click on the data link highlighted above to create a table to store our data.  We’ll call it ‘earthquake’, and we’ll also make it so only scripts and admins can modify the table, all users can read the table, like so: By default, WAMS is configured with dynamic schema, which means we can start inserting right away and the columns will be added dynamically to fit the objects we pass in.  This is perfect for development.  The next thing we’ll want to do is go over to the scheduled jobs page: After clicking create a scheduled job, give it a name like ‘fetchquakes’ and leave it run on demand only.   The job will be created and if you are looking at the details of the job by clicking on it, you’ll see a fairly empty screen – we don’t care about the configuration and schedule right now, we simply want to add a script that runs as part of our job.  Click the script button: Let’s start with a simple script.   Ideally we’ll go out to the service and use live data, but this will get us started: function fetchquakes() { var eq = {place: "Los Angeles", mag: 5.3, timestamp: new Date()}; var quakesTable = tables.getTable('earthquake'); quakesTable.insert(eq); }   .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } If we run this script (by clicking the Run Once button near the bottom/middle of the screen) and then navigate over to our table in the Data tab, we’ll see the row in the table: The nice part about this, too, is that it did a good job of figuring out the column types: However, we could go into the database itself and change the column definition if we wanted to.  We’ll wrap up the post here to keep this from becoming a book, but in the next post we’ll dive a bit deeper into consuming the live feed and storing that in the database.

APIMASH and Intro to Game Dev Raleigh

I’m really excited to be hosting a few events in the Microsoft Raleigh office focused on Windows 8 development.  The first on revolves around our APIMASH starter kits – a great way to get started building mashup style applications in Windows 8, with templates and examples in both C# and HTML/JS.  The other sessions are intro to gaming, developing some simple games using Construct2, and GameMaker/other frameworks as time allows.   Here are the events/times: APIMASH: Tue 6/4/2013 from 10:00am to 2:00pm and Tue 6/11/2013 from 10:00am to 2:00pm Intro to Gaming: Wed 6/5/2013 from 10:00am to 2:00pm and Wed 6/11/2013 from 10:00am to 2:00pm Here’s a more official description of each event: Game Development for Beginners In this beginner level workshop we will cover the basics of game design, programming and publication. We will build a casual game and publish it to the Windows Store. This workshop is great for students, hobbyists and professional developers who want to learn the basics of game development and publish their first app to the store as no programming skills are required! Windows 8 App Mashup Series In this workshop you will learn how to develop Windows 8 apps based on well-known web service API's such as Twitter, Meetup, ESPN, EchoNest and data from the World Health Organization WHO. Your app could entertain or even change the world. This workshop is great for students, hobbyists and professional developers who want to learn the basics of app development and publish their first app to the store. For more info, stay tuned to the MSDN Events page!

Microsoft DevRadio: (Part 5) Using Windows Azure to Build Back-End Services for Windows 8 Apps – Adding Push Notifications

Abstract: In Part 5 of of their “Using Windows Azure to Build Back-End Services for Windows 8 apps” series Peter Laudati, Brian Hitney and Andrew Duthie  show us how to quickly add the ability to implement push notifications for his GameLeader Service using Azure Mobile Services. Check out the full article here. Watch Part 1 | Part 2 | Part 3 | Part 4 After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)

Bing Maps Mashup in Dark Skies

I’ve gotten a few requests about how to do a mashup in Dark Skies … so, thought I’d do a blog post on how it was put together.  First, what’s a mashup?   A mashup is an application that combines data from multiple sources into what is, hopefully, a more useful or interesting way to view the data.  They are often done as web applications because the data is often pulled from online sources.  But, mashups are ideal for Windows 8 and Windows Phone apps, too.  Dark Skies is simply a mashup that combines 3 main sources of data.  maps (from Bing), light pollution data (from sources like these: Save The Night, NOAA, and P. Cinzano), and favorite astronomy viewing locations and looks like so: What makes this interesting is the level of zooming, so you get really specific: Specific is good, but add in data sharing and you, hopefully, have an ideal mashup experience. Overlaying pins is easy as the map.  In fact, there’s a small sample on putting pins on a map here.   The harder part is storing the data, and for this, Windows Azure Mobile Services works really well.  I’ve talked about that in previous posts. The light pollution data is available from a variety of sources but in this case, a high res version with a color that can be made transparent (black) is ideal.  Credit: P. Cinzano, F. Falchi (University of Padova), C. D. Elvidge (NOAA National Geophysical Data Center, Boulder). Copyright Royal Astronomical Society. Reproduced from the Monthly Notices of the RAS by permission of Blackwell Science.   There are two fundamental problems in overlaying the two: first, the image should be sliced into small tiles to make it bandwidth sensitive (the uncompressed TIF file is 200MB).   The second is that the image doesn’t exactly line up.  It’s close, but there are subtle errors that get introduced despite both maps appearing to be Mercator projections.  There are a number of tools that can help you solve this problem, but in this case, I used MapCruncher.  It’s from Microsoft, and it hasn’t been updated since 2007, but … it works.  The idea is that MapCruncher can both transform/skew an image to fit the projection of the map, and carve it up into nice, little tiles.  Let’s take the following image: If I want to overlay this image at a specific point on the map. Let’s say that the two eyes should be where Lake Superior and Lake Huron are.  In MapCruncher, we’d bring in the image as an asset, and start defining matching points in the image, like so:     It’s not until we hit the lock button near the bottom left that the image is scaled/skewed/transformed to fit.  The closer an image is to being the same scale, the better/few points are required to get it look right.  Once you hit the Render button in the bottom left, it will go to town and slice and dice the image up, based on the zoom depth requested.  More on that in a second. In this case, it generated some 92 tiles.  When we preview the results, we can see the data is overlaid nicely: The tiles produced are laid out and named format known as quadkeys.   You can read a lot more about it here, but in short, each tile is scaled to fit the appropriate dimensions based on the current zoom level:   The pattern to this approach makes it very easy to know exactly what tile you need, and at what zoom level (detail).  Additionally, all of these files can be stored in a flat data structure (like a folder) which makes storage quite simple.  The best part is, Bing maps already knows how to build a quad key, so all you have to do is create a tile layer, and specify the quadkey as a parameter by putting it in curly braces, like so: MapTileLayer pollutionTileLayer = new MapTileLayer(); pollutionTileLayer.TileSource = "myurl.com/{quadley}.png";   But, this isn’t quite ideal.  One problem that I ran into is that if there are a large number of quad keys you don’t have (which is the case even in my app), there are a HUGE number of 404’s because the app has no way of knowing there isn’t a tile available for a specific quad key.  While the user doesn’t directly see this, it’s a lot of wasted traffic and just not clean.  The way to solve that is to roll your own GetTileUri handler. In my next post, I’ll detail the steps involved in setting that up!

Microsoft DevRadio: (Part 2) Using Windows Azure to Build Back-End Services for Windows 8 Apps

Abstract: Peter Laudati, Brian Hitney and Andrew Duthie are back for part 2 of their series and in today’s episode Andrew shows us how to deploy the OData Service for his Windows 8 app to Windows Azure as well as outlines the advantages and disadvantages to building back-end services via this approach. After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)

My Apps

Dark Skies Astrophotography Journal Vol 1 Explore The Moon
Mars Explorer Moons of Jupiter Messier Object Explorer
Brew Finder Earthquake Explorer Venus Explorer  

My Worldmap

Month List