By: Antonio Zugaldia
We recently bought a few Echo Show devices for the office. The first thing I did when they arrived was to update the Mapbox Skill to show maps. Here’s how it works:
Adding images
First, I updated the type of cards the skill was using. For the first version of the skill, I used a SimpleCard because, well, they are really simple to set up. For this next iteration I switched to a StandardCardbecause it lets you associate images to cards. If you’re using the Java library from Amazon you can create and add an Imageobject in four lines of code:
Amazon recommends including two different sizes of each image so that the skill can choose the right image for the right device (small images are 720x480, while large images are 1200x800).
Generating the maps
Next, I needed to generate images for the maps I wanted to show on the skill. This is something we can do with our Static Image API using Mapbox Java Services, which I used before to compute routes and search for places. For example, to get the URL for a large traffic-aware map image centered in San Francisco, I did something like this:
You can even add annotations. For example, I wanted to add a marker for the start and end points of a route, and the route itself. Check out the ImageComponentfor details.
And with this we’re done. I re-uploaded the Skill to AWS Lambda and Echo Show was immediately showing maps on the screen for all my requests.
On your phone, too
As a bonus, once you add images to cards, those images will also show you on the user’s mobile app. Even if you don’t have an Echo Show yet, you can still see the maps on your phone when you use the skill on any Echo device. For example, this is how it looks on my phone:
Check out the updated Skill code. If you’re building Skills or have any ideas to improve this one, hit me up on Twitter.
Mapbox Alexa Skill, now with traffic maps was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.