AWS

Create Your Own Weather Serverless Application

By Michael Palermo | 21 February 2020

A condition that impacts people no matter where they live is weather. For some applications, it is important to capture current weather or the forecast to provide the best user experience. Because weather conditions happen at locations, HERE offers a Weather API to make sure developers can obtain what they need for their solutions. In addition to being offered as a RESTful API,  AWS developers can include the weather feature quickly within their own development environment using the AWS Serverless Application Repository

This post will show how you can deploy HERE Weather Serverless Application for use in your development projects. This will allow you to query location data from HERE via your own custom API! To accomplish this, you will need credentials at the following:


Deploying the HERE Weather Serverless App

After account credentials are confirmed, to find any serverless 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 Weather", then select the Places result as shown below.

2020sar-weather-find

You will be redirected to the landing page for the Weather application. Under "Application settings" enter your HERE REST API Key (obtained from your developer profile) in the highlighted field "HereApiKey"as shown  below, then deploy.

2020sar-weather-credentials

Also note the highlighted link above to the technical documentation for instructions on how to implement. After selecting deploy, it will take a little time for the process to complete. You are prepared for the next step once you see the "Your application has been deployed" message shown.


Accessing Your Weather Application

Part of the newly created Weather application is the API endpoint to execute it. The following screen capture shows how to execute a simple test via the AWS API Gateway:

2020sar-weather-api-test

 

Accessing from HTML Client

For testing from HTML client, you may need to go into the source code of the lambda function and uncomment the headers as shown below:

2020sar-weather-cors

Now consider a request made to the Weather Application from an HTML client which is also using the HERE JavaScript SDK:


const JSAPIKEY = "YOUR-JAVASCRIPT-APIKEY";
const AWS_API = "YOUR-API-GATEWAY-ID";
const AWS_URL = `https://${AWS_API}.execute-api.us-east-1.amazonaws.com/Prod/weather/api/weather/1.0/report.json`;

// Obtain reference to #mapContainer in DOM
let container = document.getElementById('map');

// Store initialized platform object
let platform = new H.service.Platform({apikey:JSAPIKEY});

// Store reference to layers object
let layers = platform.createDefaultLayers();

// Create map object initialized with container and style
// Set map style - example M.Layers.satellite.map
let map = new H.Map(container, layers.vector.normal.map, {
    center: {lat:19.7519, lng:-99.1276},
    zoom: 4,
    pixelRatio: window.devicePixelRatio || 1
});

// Create behavior object initialized with map object
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Store UI object associated with map object and layers object
let UI = H.ui.UI.createDefault(map, layers);

function getWeather(lat,lng) {
    //let options = 
    let options = `product=observation&oneobservation=true&latitude=${lat}&longitude=${lng}`;
    let url = `${AWS_URL}?${options}`;
    fetch(url)
    .then(response => response.json())
    .then(response => 
    {
        console.log(response);
        let observation = response.observations.location[0].observation[0];
        alert(observation.description);
    })
    .catch(error => console.log(error));
}

function initMapTap(map) {
    map.addEventListener('tap', function (evt) {
    var coord = map.screenToGeo(evt.currentPointer.viewportX,
        evt.currentPointer.viewportY);
    let lat = coord.lat;
    let lng = coord.lng;
    console.log('Coordinates:' + Math.abs(lat.toFixed(4)) +
        ((lat > 0) ? 'N' : 'S') +
        ' ' + Math.abs(lng.toFixed(4)) +
        ((lng > 0) ? 'E' : 'W'));
    getWeather(lat,lng);
    });
}
initMapTap(map);

The above script calls a constructed URL from all the consts declared which points to the new weather application via Amazon API Gateway. You must replace the value of YOUR-JAVASCRIPT-APIKEY with the JavaScript APIKEY from the HERE developer profile, and YOUR-API-GATEWAY-ID with the value generated from your API Gateway when the weather app was deployed. Running the script in the browser shows a weather info alert when the map is clicked on as seen below.

2020sar-weather-results

For more information, please enjoy our recorded session on this topic: