## Weather Maps 3.0 Interactive weather maps for your application **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. - [SDK documentation](https://weather-maps.openweathermap.org/docs/index.html) **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](https://openweathermap.org/price) to learn about which weather layers, usage limits and terms apply to each subscription. ## How to start #### Sign up [Sign up](https://home.openweathermap.org/users/sign_up) for the OpenWeather service if you do not have an [OpenWeather API key](https://home.openweathermap.org/api_keys) yet. #### Review pricing and usage Visit the [pricing page](/price.md) 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](https://openweathermap.org/payload/api/files/file/OpenWeather_T%26C_of_sale.pdf), [Privacy policy](http://openweather.co.uk/privacy-policy), and [Websites' terms and Conditions of use](https://openweather.co.uk/api/files/file/Openweather_website_terms_and_conditions_of_use.pdf). #### Connect and customise your map Follow the [integration guide](https://weather-maps.openweathermap.org/docs/index.html) 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](https://openweathermap.org/price) to learn about which weather layers, usage limits, and terms apply to each subscription. | Layer ID | Weather layer | | --- | --- | | `temperature` | Air temperature at 2 m above ground | | `dew_point` | Dew point temperature | | `relative_humidity` | Relative humidity | | `precipitation` | Combined rain and snow precipitation rate | | | | | `precipitation_intensity` | Instantaneous precipitation intensity | | `precipitation_convective` | Convective precipitation rate | | `precipitation_rain` | Accumulated rainfall | | `precipitation_snow` | Accumulated snowfall | | `snow_depth` | Snow depth on the ground | | `windSpeed` | Wind speed at 10 m above ground, with optional animated particles | | `pressure` | Mean sea-level atmospheric pressure, with isobar contours | | `clouds` | Total cloud cover | | `soilMoisture` | Soil moisture index at 0–10 cm depth | | `soil_temperature_0_10` | Soil temperature at 0–10 cm depth | | `soil_temperature_10_40` | Soil temperature at 10–40 cm depth | | `radar` | Radar | | `wave_height` | Significant wave height | | `swell` | 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](https://openweathermap.org/price). ## 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](https://weather-maps.openweathermap.org/docs/examples.html#vanilla) 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](https://weather-maps.openweathermap.org/docs/examples.html#vanilla) **React example ** Use [this example](https://weather-maps.openweathermap.org/docs/examples.html#react) 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. [View React example](https://weather-maps.openweathermap.org/docs/examples.html#react) - [SDK documentation](https://weather-maps.openweathermap.org/docs/index.html) ## 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? You need to configure the components in your project. The supplied components and examples provide a starting point, but they still need to be configured and integrated. #### Is this a ready-made website or a hosted weather page? Weather Maps 3.0 provides components and weather data access for your project; it does not publish a separate website for you. #### Can I use the product without React? Yes. Use the JavaScript example if your project does not use React, or the React example if it does. #### Can I add a map to WordPress or a website builder? Your platform must allow the required JavaScript integration. Setup depends on its restrictions; the example application is not an installable website-builder plugin. #### Does my subscription include every layer shown on this page? No. This page describes the product catalogue. Your subscription determines which layers and services your account can access. #### Can I display several weather layers together? The standard map experience switches between main weather layers. Supported overlays, such as cyclone tracks or lightning activity, can be added over the selected layer where access is available. #### Can I customise the map? You can adjust supported weather layer colours and interface styling. These changes are implemented in your project.