Weather map with custom icons, animated SVGs or Lotties via Marker Layout

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

Lottie is a file format for vector graphics animation. They can be scaled without pixelation or loss of quality, just like an SVG file. It is intended as a lighter alternative to animated GIFs and APNG files for use in the web and mobile and desktop applications. Read more about Lottie file format.

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.

Learn more

Check out the Marker Layout JS module reference

Consult the MapTiler Weather JS module reference

Related examples

Add interaction to landmarks

Example

Create a map with custom landmarks and add interactions like popups to display additional information.

Marker Layout (no filter)

Example

Create custom non-colliding marker overlays on your map using the Marker Layout on top of MapTiler SDK. .

Marker Layout (filter)

Example

Create non-colliding marker overlays to display the information from the city and town label layers.

Weather custom popup

Example

This example demonstrates using custom popups on top of a map because MapLibre's popups were originally quite limited in layout and style.