Weather Maps 3.0
Interactive weather maps for your application
Loading...
Product concept
Weather Maps 3.0 combines weather layers, display tools and ready-made map controls through one integration to help you add interactive weather views to your personal project, website or application without developing every part from scratch.
How Weather Maps 3.0 works
Weather Maps 3.0 loads weather data from OpenWeather and displays it in your website or application. Display tools turn the data into colour-based views, animations and pressure contours, helping users interpret conditions and recognise weather patterns. Map controls let users find locations, switch between layers and explore available historical, current and forecast views. You can use an example interface as provided, adapt its layout and supported visual settings, or build a custom interface.
What you can use
- Weather layers for displaying atmospheric conditions, precipitation, soil and marine parameters on a map.
- Visual tools that turn supported weather data into colour-based views, animated wind particles and pressure contours.
- Controls for selecting layers, exploring time, searching for places and reading weather values.
Start with an example or create your own interface
We provide ready-made components and example applications to help you get started. Adapt an example to your project or build a custom interface, choosing the level of customisation you need.
The SDK for integrating Weather Maps 3.0
Weather Maps 3.0 provides a JavaScript SDK (Software Development Kit) with tools and ready-made components for adding its weather layers and map controls to your website or application. The SDK documentation explains how to connect, configure and customise these components, with integration examples to help you get started.
A few things to check before getting started
- Check how your website or application supports adding JavaScript components. If you use a website builder, its documentation can help you find the options for adding custom code.
- Our examples guide you through connecting the components and configuring your API key. Basic JavaScript knowledge is recommended for a smoother integration.
- Weather Maps 3.0 uses MapLibre to display the map. If your project uses another mapping library, review the integration approach before proceeding.
- Review the pricing to learn about which weather layers, usage limits and terms apply to each subscription.
How to start
Sign up
Sign up for the OpenWeather service if you do not have an OpenWeather API key yet.
Review pricing and usage
Visit the pricing page to learn more about pricing, included weather layers and subscription details. Click the 'Subscribe' button in the "Weather Maps 3.0" section. Fill out a short billing form and complete your subscription.
Before you subscribe to our service, please read the Terms and conditions of sale, Privacy policy, and Websites' terms and Conditions of use.
Connect and customise your map
Follow the integration guide to add the map components to your website or application, or adapt one of the example applications provided in the documentation. Choose the weather layer, location and zoom level users will see first. Then add controls for switching layers, exploring time and searching for places, and adjust the layout to fit your application.
Available weather layers
The catalogue below lists weather layers supported by Weather Maps 3.0. Use the layer information to choose the data relevant to your project. Coverage, time ranges and data intervals vary by layer.
Review the pricing to learn about which weather layers, usage limits, and terms apply to each subscription.
Layer ID | Weather layer |
|---|---|
| Air temperature at 2 m above ground |
| Dew point temperature |
| Relative humidity |
| Combined rain and snow precipitation rate |
| Instantaneous precipitation intensity |
| Convective precipitation rate |
| Accumulated rainfall |
| Accumulated snowfall |
| Snow depth on the ground |
| Wind speed at 10 m above ground, with optional animated particles |
| Mean sea-level atmospheric pressure, with isobar contours |
| Total cloud cover |
| Soil moisture index at 0–10 cm depth |
| Soil temperature at 0–10 cm depth |
| Soil temperature at 10–40 cm depth |
| Radar |
| Significant wave height |
| Primary swell height |
Cyclone and lightning overlays
Cyclone tracks or lightning activity can be displayed over the selected weather layer.
These overlays display cyclone paths and lightning strike locations without replacing the underlying weather data.
Access to these overlays depends on the relevant subscription or service permissions. Learn more on the pricing page.
Integration examples
Weather Maps 3.0 SDK uses JavaScript and TypeScript. You can integrate it without React, using the Vanilla JavaScript approach, or with React, using the supplied React components.
The example applications show how to connect a map, weather data and common controls. Both offer the same core weather features; the difference is how the interface is built and managed.
Which example should you choose?
Choose Vanilla JavaScript for a project without React, or the React example for an existing React application. You do not need to adopt React just to use Weather Maps 3.0.
Both examples demonstrate the supplied basic controls. Their appearance may differ from the public live map, which uses a fuller interface.
Vanilla JavaScript example
Use the Vanilla JavaScript example if your project does not use React. It adds the map and controls directly to a web page using JavaScript, without requiring React components.
The example includes layer selection, a legend, a timeline, location search and weather values at a selected point.
View Vanilla JavaScript example
React example
Use this example if your application already uses React. It adds the weather map and controls through React components that fit into your application’s interface.
It demonstrates the same weather features as the Vanilla JavaScript example. React changes how you build and manage the interface, not which weather data you can access.
Troubleshooting
Use these checks to identify common setup and data-access problems.
Problem | What to check |
|---|---|
The map area is empty | Check the map container’s size and whether the required scripts and styles loaded |
The background map appears, but weather data does not | Check your API key, subscription access, selected layer and requested time. |
The API key is rejected | Check that the key has been copied correctly and belongs to the account you intend to use |
One layer is restricted | Review whether your subscription includes that layer. Access to other layers may still work |
A selected time has no data | Check the time range available for the selected layer |
A layer is blank over land or water | Check its intended coverage. Soil views apply to land; marine views apply to water. |
Animations are unavailable | Check browser graphics support |
Lightning does not appear | Check overlay access and the separate lightning connection configuration |
Frequently asked questions
Do I need coding skills?
Is this a ready-made website or a hosted weather page?
Can I use the product without React?
Can I add a map to WordPress or a website builder?
Does my subscription include every layer shown on this page?
Can I display several weather layers together?
Can I customise the map?
