Weather custom popup

Let’s create the custom non-colliding popups using the Marker Layout on top of MapTiler SDK. The example uses the custom Marker Layout because it allows complete freedom of customization, which we can’t do with the original MapLibre popups due to their limited design.

We gather the weather data (including wind, temperature and precipitation) displayed in the popup from various layers of the MapTiler Weather JS module.

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

How to create your custom popup?

Check the Marker Layout helper reference to find inspiration on creating your popups and to learn about all the options, methods, etc.

Learn more

Check out the Weather JS module reference

Related examples

Display a popup

Example

Add a popup to the map.

Marker Layout (filter)

Example

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

Show polygon information on click

Example

When a user clicks a polygon, display a popup containing more information.

Weather layer switcher

Example

Switch the display of the different weather layers in the MapTiler Cloud Weather data set and get the data information at the point under the cursor.