AWS

Create Your Own Map Image Microservice

By Michael Palermo | 17 October 2019

Map images provide visualizations that are vital to many web sites and applications. AWS developers can take advantage of many core location services from HERE using the AWS Serverless Application Repository. This means developers can create their own microservice to provide location services to their own clients.

This post will show how you can deploy HERE MapImage Serverless Application for use in your development projects. This will allow you to access custom map images from HERE via your own custom API. To accomplish this, you will need credentials at the following:


Deploying the HERE MapImage Serverless App

After account credentials are confirmed, to find the HERE MapImage application, browse to the AWS Serverless Application Repository.

AWS Serverless Application Browse

After clicking the "Browse all applications" button, you will be prompted to do your search. Type "HERE MapImage" as shown below, then select the MapImage title in the results shown.

2019sar_mapimage

Once the landing page for the MapImage application is shown, enter your HERE credentials in the highlighted areas shown below, then deploy.

2019sar_mapimage_settings

It will take a little time for the deployment process to complete. You are prepared for the next step once you see the "Application successfully deployed!" message is shown.


Accessing Your Map Image Microservice

Consider the following script in an HTML client:


let lat = 33.41808,
    lng = -111.9343,
    gatewayID = "your-gateway-id",
    api = "execute-api.us-east-1.amazonaws.com/Stage/mapimage?",
    width = 600,
    height = 480,
    zoom = 11,
    url =`https://${gatewayID}.${api}c=${lat},${lng}&w=${width}&h=${height}&z=${zoom}`;
fetch(url)
    .then(response => response.json())
    .then(response => {
        document.getElementById("mapImage").src = 
            `data:image/jpeg;base64,${response}`;
    }, error => {
        console.log(error);
    });

The above script calls a constructed URL which points to the new microservice via Amazon API Gateway. You must replace the value of gatewayID with the value generated from your API Gateway when the MapImage app was deployed. After the fetch completes, it passes the data into an img element with the ID of mapImage and sets the source to the response - ensuring it is of type data:image/jpeg;base64.

Sample files are provided at our GitHub. Also, please enjoy our recorded session on this topic here: