Maps API

Relevant links

Real-time satellite images and radar data with seamless minute-by-minute animation, globally available
Stunning visualisations of various weather models, weather station data and wind animations
Highly customisable weather maps with high-speed access thanks to latest technology and efficient data processing
Display of various altitude levels for temperature, wind, cloud and pressure maps allows sophisticated flight planning
Easy to integrate plug-and-play solution for your web application or flexible Tile API for custom solutions

meteoblue weather maps offer a wide range of globally available weather variables, data sources and height levels. Real-time satellite images, weather radar and cutting-edge animations provide perfect visualisations. Enrich your web application with an easy to integrate plugin within minutes.

We would be pleased to support you with a free API trial access upon request.

API Trial

Carefully crafted map designs with just the right amount of detail ensure high usability and visual appeal for both, casual users and experts alike. The choice of colours, labels, contours and available maps is based on a deep understanding of cartography and the underlying weather data.

Map tiles and open standards guarantee high performance and great compatibility.

Easy to integrate plugin

Our easy to integrate plugin for Mapbox GL JS, which uses our map tiles API under the hood. It features a ready-to-use web interface, similar to the Weather Maps on meteoblue.com. The wind animation was developed from ground up to provide unmatched performance and levels of detail. The satellite and radar maps show current weather data as a seamless minute-by-minute animation. The radar animation includes a forecast for one to up to two hours ahead.

After simply dropping in the plugin with a script tag, it adds controls to an existing Mapbox GL JS map for a map selection menu, time selection and a legend. Easily choose which maps should be available in the navigation. Customise the UI design to match the visual appearance of your website.

The JavaScript API provides methods and events similar to Mapbox GL JS, to allow for small tweaks up to completely replacing the default user interface. Add your own content through the powerful Mapbox GL JS API, for example custom HTML markers or popups.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<script src="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.css" target="_blank">

<script src="https://static.meteoblue.com/lib/maps-plugin/v0.x/maps-plugin.js"></script>

<div id="map_container" style="height: 500px; width: 100%;"></div>

<script>
    const mapboxMap = new mapboxgl.Map({
        container: "map_container",
        center: [7.57327, 47.5584],
        zoom: 5,
        minZoom: 0,
        maxZoom: 24,
        hash: false,
        attributionControl: false,
        keyboard: false,
    });

    const apiKey = "DUMMYAPIKEY";
    const inventoryUrl = "https://maps-api.meteoblue.com/v1/map/inventory/weather-maps?lang=en&apikey=${apiKey}&temperatureUnit=CELSIUS&velocityUnit=KILOMETER_PER_HOUR&lengthUnit=metric";

    new meteoblueMapsPlugin({
        mapboxMap: mapboxMap,
        inventory: inventoryUrl,
        apiKey: apiKey,
        canUseRestricted: true,
    });
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


<script src="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.css" target="_blank">

<script src="https://static.meteoblue.com/lib/maps-plugin/v0.x/maps-plugin.js"></script>
                
<style>
    /* Custom Maps Plugin styling is done trough CSS variables */
    .maps-custom-design {
        --meteoblue-mapsplugin-background-primary: rgba(226, 226, 226, 0.692);
        --meteoblue-mapsplugin-background-highlight: rgba(255, 255, 255, 0.746);
        --meteoblue-mapsplugin-background-highlight-secondary: rgba(255, 255, 255, 0.897);
        --meteoblue-mapsplugin-color-primary: rgb(0, 0, 0);
        --meteoblue-mapsplugin-color-progress-bar: rgba(138, 138, 138, 0.883);
        --meteoblue-mapsplugin-color-link-hover: rgb(45, 77, 255);
        --meteoblue-mapsplugin-color-toggle: rgb(90, 90, 90);
        --meteoblue-mapsplugin-border: 1px solid rgb(156, 156, 156);
        --meteoblue-mapsplugin-border-radius: 20px;
        --meteoblue-mapsplugin-text-shadow: 0 0 5px rgb(255, 255, 255);
        --meteoblue-mapsplugin-icon-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0,0,20,21' width='11'%3E%3Cpath fill='black' d='M0 3l3-3 8 12 7-12 3 3-10 17z'/%3E%3C/svg%3E");
        --meteoblue-mapsplugin-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='black' d='M9.988,8.543 C9.988,8.543 8.543,9.988 8.543,9.988 C8.543,9.988 5.000,6.445 5.000,6.445 C5.000,6.445 1.457,9.988 1.457,9.988 C1.457,9.988 0.012,8.543 0.012,8.543 C0.012,8.543 3.554,5.000 3.554,5.000 C3.554,5.000 0.012,1.457 0.012,1.457 C0.012,1.457 1.457,0.012 1.457,0.012 C1.457,0.012 5.000,3.554 5.000,3.554 C5.000,3.554 8.543,0.012 8.543,0.012 C8.543,0.012 9.988,1.457 9.988,1.457 C9.988,1.457 6.445,5.000 6.445,5.000 C6.445,5.000 9.988,8.543 9.988,8.543 Z' fill-rule='evenodd' /%3E%3C/svg%3E");
        --meteoblue-mapsplugin-icon-play: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0,0,20,21' width='11'%3E%3Cpath fill='black' d='M 0 0 L 20 11 0 21 z'/%3E%3C/svg%3E");
        --meteoblue-mapsplugin-icon-stop: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0,0,20,21' width='11'%3E%3Cpath fill='black' d='M 0 0 L 8 0 8 21 0 21 M 12 0 L 20 0 20 21 12 21 z'/%3E%3C/svg%3E");
        --meteoblue-mapsplugin-icon-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0,0,20,21' width='11'%3E%3Cpath stroke='black' stroke-width='4' d='M 0 2 L 20 2 M 0 10 L 20 10 M 0 18 L 20 18 z'/%3E%3C/svg%3E");
    }
</style>

<div id="map_container" class="maps-custom-design" style="height: 500px; width: 100%;"></div>

<script>
    const mapboxMap = new mapboxgl.Map({
        container: "map_container",
        center: [7.57327, 47.5584],
        zoom: 5,
        minZoom: 0,
        maxZoom: 24,
        hash: false,
        attributionControl: false,
        keyboard: false,
    });

    const apiKey = "DUMMYAPIKEY";
    const inventoryUrl = "https://maps-api.meteoblue.com/v1/map/inventory/filter?lang=en&apikey=${apiKey}&maps=satellite,radar,temperature,sunshine,wind,humidity,gph500,apparentTemperature,soilTemperature,precipitationDaily,visibility,airQualityIndex,temperatureAnomaly,uvIndex,obsTemperature,obsPrecipitation&temperatureUnit=CELSIUS&velocityUnit=KILOMETER_PER_HOUR&lengthUnit=metric&overlays=pressure2mOverlay";

    new meteoblueMapsPlugin({
        mapboxMap: mapboxMap,
        inventory: inventoryUrl,
        apiKey: apiKey,
        canUseRestricted: true,
    });
</script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154


<script src="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.css" target="_blank">

<script src="https://static.meteoblue.com/lib/maps-plugin/v0.x/maps-plugin.js"></script>

<style>
    .custom-menu {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: end;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        font-size: 1.5em;
    }

    .map-selection, .time-selection {
        pointer-events: initial;
        background: rgba(226, 226, 226, 0.692);
        display: flex;
        border-radius: 5px;
        overflow: hidden;
        width: max-content;
        align-content: center;
        border: 1px solid rgb(109, 109, 109);
    }

    .map-selection .active {
        background: rgb(250, 250, 250);
    }

    .time-selection {
        padding: 0.25em;
        margin-top: 0.5em;
    }

    .map-selection div, .time-selection button {
        cursor: pointer;
        padding: 0.5em;
    }

    .date-display {
        display: flex;
        align-items: center;
        padding: 0 0.5em;
    }
</style>

<div id="map_container" style="height: 500px; width: 100%;"></div>

<script>
    const inventoryUrl = "https://maps-api.meteoblue.com/v1/map/inventory/filter?lang=en&apikey=${apiKey}&maps=temperature,sunshine&temperatureUnit=CELSIUS&velocityUnit=KILOMETER_PER_HOUR&lengthUnit=metric&overlays=pressure2mOverlay,graticuleOverlay";
    const apiKey = "DUMMYAPIKEY";

    // Map Selection

    const mapSelection = document.createElement('div');
    mapSelection.classList.add('map-selection');
    
    const temperature = document.createElement('div');
    temperature.innerText = 'Temperature';
    temperature.id = 'temperature';
    temperature.classList.add('active')
    mapSelection.appendChild(temperature);

    const sunshine = document.createElement('div');
    sunshine.innerText = 'Sunshine';
    sunshine.id = 'sunshine';
    mapSelection.appendChild(sunshine);


    // Time Selection

    const customMenu = document.createElement('div');
    customMenu.classList.add('custom-menu');

    const prevButton = document.createElement('button');
    prevButton.disabled = true;
    prevButton.innerText = 'Previous';

    const nextButton = document.createElement('button');
    nextButton.innerText = 'Next';

    const dateDisplay = document.createElement('div');
    dateDisplay.classList.add('date-display');

    const timeSelection = document.createElement('div');
    timeSelection.classList.add('time-selection');
    timeSelection.appendChild(prevButton);
    timeSelection.appendChild(dateDisplay);
    timeSelection.appendChild(nextButton);

    const mapboxMap = new mapboxgl.Map({
        container: "map_container",
        center: [7.57327, 47.5584],
        zoom: 5,
        minZoom: 0,
        maxZoom: 24,
        hash: false,
        attributionControl: false,
        keyboard: false,
    });

    const mapsPlugin = new meteoblueMapsPlugin({
        mapboxMap: mapboxMap,
        inventory: inventoryUrl,
        apiKey: apiKey,
        canUseRestricted: true,
        showSidebar: false,
        showTimeSelection: false,
        content: {
            main: customMenu,
        }
    });

    function changeMap(event) {
        Array.from(mapSelection.children)
            .forEach(child => child.classList.remove('active'));
        event.target.classList.add('active');

        mapsPlugin.setMap({map: event.target.id});
    }

    function changeDateBy(numSteps) {
        const timeSteps = mapsPlugin.getTimeInfo().categories;
        const current = mapsPlugin.getDate();
        const currentIndex = timeSteps.findIndex(category => category === current);

        const maxIndex = timeSteps.length - 1;
        const newIndex = Math.min(Math.max(currentIndex + numSteps, 0), maxIndex);
        const newDate = timeSteps[newIndex].value;

        prevButton.disabled = newIndex === 0;
        nextButton.disabled = newIndex === maxIndex;

        dateDisplay.innerText = newDate;
        mapsPlugin.setDate(newDate);
    }
    
    mapsPlugin.on('load', () => {
        mapSelection.addEventListener('click', changeMap)

        dateDisplay.innerText = mapsPlugin.getDate().value;
        prevButton.addEventListener('click', () => changeDateBy(-1));
        nextButton.addEventListener('click', () => changeDateBy(+1));

        customMenu.appendChild(mapSelection);
        customMenu.appendChild(timeSelection);
    })
</script>

Flexible Tile API

Use the underlying low-level Tile API for fully customised solutions. It provides standard vector and raster tile formats, compatible with all common mapping libraries, like Mapbox GL JS, Leaflet, OpenLayers and others.

The API supports 80+ different weather variables, multiple weather models and different height levels, single time steps and aggregations, fully customizable contour steps (e.g. 2 °C or 4 °C temperature steps) and customizable map colours as well as multiple units of measurement.

API pricing

The meteoblue Maps API requires at least the access level Access Silver. Find out more about the Maps API pricing on the API pricing page. If you are looking for a free solution for implementing maps into your website, please consider our free weather Maps Widget.

Technical documentation

Find further technical information in our technical documentation for the Maps Plugin, the Tile API and the Maps API Configurator.

This site also uses cookies

Maps API

Easy to integrate plugin

Examples

Flexible Tile API