3D globe with custom weather markers

Create a weather globe 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.

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.

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.

Related examples

Projection control (globe)

Example

This tutorial shows how to add the projection control that toggles the map between "mercator" and "globe" projection.

Add a 3D model to globe using MapTiler 3D JS

Example

Add a 3D model to globe using MapTiler 3D JS module.

Marker Layout (filter)

Example

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

3D globe with custom marker overlays

Example

Create custom non-colliding marker overlays on your 3D globe map using the Marker Layout module.