Create a weather icons marker overlays using the Marker Layout

Create a weather map using the Marker Layout to show your custom weather markers icons. In this example, we use the MapTiler SDK together with the MapTiler Weather library.

This example shows how to obtain the information from the MapTiler Weather layers to create a weather map where the icons corresponding to the current state of the weather in the main cities are shown. This example demonstrates the use of custom markers with content sourced from external data.

For this demo, we used Meteocons, a weather icon pack designed by Bas Milius also available on GitHub.

If you prefer to follow this example using TypeScript and ES modules, check out the demo that we have prepared in the Marker Layout library's GitHub repository.

Learn more

Check out the Marker Layout JS module reference

Consult the MapTiler Weather JS module reference

Related examples

An extension of MapLibre GL JS