Traffic Tile for Microsoft Band 2

This project is an offspin of another one I did using the Particle Photon

https://www.hackster.io/saka/traffic-station-9dc882

I'm going to paste and copy the relevant sections form that project.

Get Traffic info Using Bing Maps API

I used Bing maps API. It is a relatively simple API to get a route. The response- and one can see that in text format just submitting that call through a web browser, comes as JSON. It has the traffic info, including how long it takes with and without the traffic between the two specified points. While the resulting response is still very long, Microsoft Band offers a functionality called Web Tile:

https://developer.microsoftband.com/WebTile

It can in a very simple way extract the relevant fields from a JSON response. We look at setting that up in the next section, for now let's set up the Bing route.

Get a Bing App Key

• Sign to the Bing Developer portal using your MS account: https://www.bingmapsportal.com/
• Go to “My account -> Create or view keys”

• Create a new key, you can do a basic or trial

• Leave url blank

• App type could be a mobile app

• I created a trial key: Aq5fFoOJFcc-gd1-hid04YMbwgD96I5EpehLEv0v9TC4vFkiCOHOl08x_yjA4Veo

Bing Route

Using Bing route REST API: https://msdn.microsoft.com/en-us/library/ff701717.aspx

This is the call in the project:

http://dev.virtualearth.net/REST/V1/Routes/Driving?wp.0=3720+159th+Avenue+NE%2C+Redmond%2C+WA+98052&wp.1=11200+SE+6th+St,+Bellevue,+WA+98004,+United+States&avoid=minimizeTolls&key=Aq5fFoOJFcc-gd1-hid04YMbwgD96I5EpehLEv0v9TC4vFkiCOHOl08x_yjA4Veo

Tip: Formatting the From-To Addresses. It is relatively straightforward and you can guess by the above example. However, one alternative is to do a route on Google maps in the web browser- you could see the address properly formatted in the URL once you run the route.

Setting up the Web Tile

Now we can start setting up the web tile. Go to

https://developer.microsoftband.com/WebTile

and start a new tile project.

In the layout select "Single page tile" and "Header, primary and secondary content"

Next paste the URL generated in the previous section:

When you press next, you should see in the right side window a properly formatted JSON response from Bing maps.

Find the field:

resourceSets[0].resources[0].routeLegs[0].endLocation.name

it is somewhere towards the beginning of the JSON response. Drag and drop this to the Header field. This will be the displayed destination address/ name.

Scroll almost to the end of the JSON and find the field:

resourceSets[0].resources[0].trafficCongestion

Drag and drop to the primary content field.

Few fields down there is the field:

resourceSets[0].resources[0].travelDurationTraffic

that shows the total trip duration. Drag and drop to the secondary content.

You can skip setting up notification:

In the next steps put all the info. You can use a default icon, one that I created (can be downloaded from this project), or one you can create.

That's basically it! Next steps is to download the tile package and install on your band. The instructions are in the final window.