New product available as part of the meteoblue Weather APIs: Maps API
The new meteoblue Maps API is designed to be able to visualize any variable of any weather forecast model in any imaginable map style configuration.
The main features of the Maps API are:
- OSM compatible tiles. Both vector and raster tiles are supported.
- Simple plugin to integrate customized maps with different colour tables, contour steps, etc.
- API to generate tiles for any weather variable, level, time resolution and aggregation.
The meteoblue Maps API consists of two parts:
- The Maps Plugin provides a frontend with the possibilities to select different maps, time steps and overlays.
- The configuration of the Maps Plugin can be quite complex. Because of this, all the configuration is located in a JSON named inventory, which is available through the Inventory API.
<script
src="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.js"
integrity="sha512-v5PfWsWi47/AZBVL7WMNqdbM1OMggp9Ce408yX/X9wg87Kjzb1xqpO2Ul0Oue8Vl9kKOcwPM2MWWkTbUjRxZOg=="
crossorigin="anonymous">
</script>
<link
rel="stylesheet"
href="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.css"
integrity="sha512-xY1TAM00L9X8Su9zNuJ8nBZsGQ8IklX703iq4gWnsw6xCg+McrHXEwbBkNaWFHSqmf6e7BpxD6aJQLKAcsGSdA=="
crossorigin="anonymous">
<script src="https://static.meteoblue.com/lib/maps-plugin/v0.x/maps-plugin.js"></script>
<style>
#mapContainer {
height: 500px;
width: 100%;
}
.logoLink {
display: block;
cursor: pointer;
}
.logoImage {
width: 200px;
opacity: 0.7;
pointer-events: initial;
transition: opacity 200ms;
}
.logoImage:hover {
opacity: 1;
}
</style>
<div id="mapContainer" style="margin-bottom: 2em;"></div>
<script>
const mapboxMap = new mapboxgl.Map({
container: "mapContainer",
center: [7.57327 , 47.5584],
zoom: 5,
minZoom: 0,
maxZoom: 24,
hash: false,
attributionControl: false,
keyboard: false,
});
const getLogo = () => {
const link = document.createElement('a');
link.classList.add('logoLink', 'mbHideTooltip');
mapboxMap.on('idle', function() {
link.href = "http://meteoblue.com/"
});
const logo = document.createElement('img');
logo.classList.add('logoImage');
logo.src = 'https://static.meteoblue.com/assets/images/webmaps/meteoblue_logo-glow.png';
link.appendChild(logo);
return link;
}
const apiKey = "98h452g9unbdf";
const inventoryUrl = "https://maps-api.meteoblue.com/v1/map/inventory/filter?lang=en&apikey=98h452g9unbdf&maps=windAnimation,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,graticuleOverlay&internal=true";
new meteoblueMapsPlugin({
mapboxMap: mapboxMap,
inventory: inventoryUrl,
apiKey: apiKey,
canUseRestricted: true,
content: { top: getLogo() },
});
</script>
Further information about the new Maps API is available here.