Working with the Premium HERE Weather API V3
In an earlier post we explored HERE Destination Weather API V3 and how to get started developing with it in React. Since then, Riga’s winter has fully set in, with snowfall and temperatures as low as -10°C (14°F). In fact, there is no better time to look at how the Global Weather Radars describe the current weather information in the region of Europe.
The Premium Radar Information comes in 2 types:
- Doppler Radar: Covers four global zones, updating images every 5 to 15 minutes.
- Global Precipitation: Provides worldwide coverage with updates every 15 minutes.
PREMIUM Radar information coverage - These premium radar types are available as Tile Layers in the HERE Maps API: Doppler Radar (Layer ID 1) and Global Precipitation (Layer ID 2).
In this short blog post we will show you how to easily plot Premium Radar Information with the HERE Maps API for JavaScript and React.js. Additionally, I’ll demonstrate how to display the radar image separately, without overlaying it on the map.
NOTE: To access these premium radar layers, your API key must be whitelisted for Premium access. Without this, you won’t be able to retrieve Doppler Radar or Global Precipitation images.
Project Prerequisites
These essential items will be the subject of successful development with HERE Weather API V3:
- Premium API Key: Required to authenticate requests to Doppler Radar and Global Precipitation images.
- Mapping Library: I’m using the HERE Maps API for JavaScript to visualize the data.
Once you have these prerequisites in place, you’ll be ready to start building your weather report.
Step 1: Verify Your API Key
I usually start my tutorials by testing API responses directly in the browser. However, to my surprise, the PREMIUM V3 request returned an error message:
{"status":400,"title":"Invalid Request","code":"E611207","cause":"Invalid accept header text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8","action":null,"correlationId":null}
Let me quickly explain what’s causing this error—and why it’s actually a good thing!
Understanding the Error Response
The Destination Weather API v3 API Reference outlines several response messages, ranging from a successful request (200 OK) to various error responses, including a gateway timeout (504).
The first good thing about this response is that we get a status message. This means the API key is correct, but one of the following issues might be causing the error:
- The request is incorrectly constructed.
- The API key is not whitelisted for Premium access.
- As in my case, HERE Weather API V3 cannot be accessed directly by pasting the request into a browser.
If the API key was incorrect, the response would look different, like this:
{"error":"Unauthorized","error_description":"apiKey invalid. apiKey not found."}
To quickly check if your Premium product is enabled, you can request a Tile from HERE Weather API V2 in your browser:
https://weather.hereapi.com/weather/2.0/tile/9/456/196/1?apiKey={API_KEY}
Replace {API_KEY} with your actual key. If the request is successful, it confirms that your Premium access is active. Otherwise, you may need to contact HERE support to verify your API key’s status.
Example Response:
Key Request Parameters
When constructing your API request, the following parameters are essential:
- Base URL: The endpoint for the HERE Weather API.
- Path: Specifies the type of weather report.
- Resource: for image location (9/456/196) in my example
- API Key: Used to authenticate your request.
The HERE Weather API provides multiple data layers, including:
- Doppler Radar – Real-time radar imagery covering four global zones.
- Global Precipitation – Worldwide precipitation data, including historical records.
- Weather Alerts Along a Route – Receive warnings for severe weather conditions on a planned journey.
Want to dive deeper? Check out these Premium Tutorials and explore your favorite features!
Step 2: Set Up the Project
I am continuing the project from Working with HERE Weather API V3 so the project setup remains the same.
Fetch and Render Weather Data in the browser
To display a weather radar image from HERE Weather API V3, you need to pass the following header in your request:
"Accept": "image/png"
This ensures the API returns an image file instead of a JSON response.
Integrating the Request in React
Previously, we tested the response using HERE Weather API V2 in the browser. Now, let’s integrate the V3 request in a React project:
const fetchWeatherRadarV3 = async () => {
const res = await fetch(
`https://weather.hereapi.com/v3/tile/9/456/196/radar?apiKey=${
import.meta.env.VITE_WEATHER_API_KEY
}`,
{
headers: {
Accept: "image/png",
},
}
);
// Convert response to Blob
const blob = await res.blob();
// Create a URL for the Blob
const imageUrl = URL.createObjectURL(blob);
return imageUrl; // Return the Blob for further use
};
Once the response is successful, display the image using an <img> tag:
<img src={data} alt="current radar image of tile 9/456/196" />
Handling Tile Coordinates from Latitude & Longitude
You might notice that the request format uses:
{zoom}/{column}/{row}
However, if you want to fetch a radar tile for a specific latitude and longitude, you need to convert lat/lon coordinates to tile coordinates. You can do this with the following function:
export const latLonToTileCoords = (lat: number, lon: number, zoom: number) => {
const n = Math.pow(2, zoom);
const x = Math.floor(((lon + 180) / 360) * n);
const y = Math.floor(
((1 - Math.log(
Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
)/ Math.PI) /2) * n
);
return `${zoom}/${x}/${y}`;
};
Now, you can easily fetch and display the correct weather radar tiles based on a specific location. Very nice!
Plotting the Global Precipitation Layer Over Europe Using HERE Weather Premium V3
By now, you’re probably starting to visualize how we’re going to plot the Global Precipitation layer over Europe using the HERE Weather Premium V3.
No Need for latLonToTileCoords This Time!
Unlike previous examples, you won’t need to use the latLonToTileCoords function this time. In fact, HERE Maps API for JavaScript makes sure you don’t have to do the manual coordinate calculations.
Plotting the Tile Layer Over the Map
To plot the tile layer over the map, I’m following this approach and creating a function for adding image tile layers:
export const addImageTileProvider = (type: string) => {
const tileProvider = new H.map.provider.ImageTileProvider({
engineType: H.Map.EngineType.HARP,
min: 3,// Minimum zoom level
max: 11,// Maximum zoom level
opacity: 0.5,// Tile opacity
getURL: function (column, row, zoom) {
return (
"https://weather.hereapi.com/v3/tile/" +
zoom +
"/" +
column +
"/" +
row +
"/" +
type +
"?apikey=" +
import.meta.env.VITE_WEATHER_API_KEY
);
},
headers: {
Accept: "image/png",// Requesting image format
},
});
const overlayLayer = new H.map.layer.TileLayer(tileProvider);
return overlayLayer;
};
Once you have the layer created, you can add the tile layer to your map with the following simple code in your Map component:
const layer = addImageTileProvider("precipitation");
map.addLayer(layer);
That’s it! Now the Global Precipitation layer will be plotted over Europe (or any other region you specify) using HERE Weather API Premium V3.
Conclusion
And that’s how you can plot the Global Precipitation layer over Europe, visually represented using the HERE Weather API V3 and the HERE Maps API for JS.
The key difference between the Standard and Premium products lies in the response type—while the Standard API returns data in JSON format, the Premium product provides image responses.
There’s so much more to explore with HERE Weather API V3, including the Radar color scheme legend available in the Developer Guide
To access premium features, contact your account executive or use this form.
Stay tuned for more tutorials and tips!
Have your say
Related articles
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe