Weather custom popup

The given example showcases how custom popups are utilized on a map due to the limited design and style of the original MapLibre popups.

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

  1. Clone the popup-weather-demo repository

     git clone
  2. Navigate to the newly created project folder popup-weather-demo

     cd popup-weather-demo
  3. Inside the newly created project, run npm install to install the dependencies.

  4. To start your local environment, run npm run dev. You will find your app running on the address http://localhost:5173/?key=YOUR_MAPTILER_API_KEY_HERE.

  5. Here you will need to replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Now, you should see the app in your browser.

How to create your custom popup?

Check the example repository popup-weather-demo to find inspiration on creating your popups.

The src/popupmanager.ts class handles everything related to the popup display, such as the anchor point, collisions, etc.

The src/popupmaker.ts class is responsible for creating the content of the popup, what it looks like, what information to display, etc.

Learn more

Check the example repository popup-weather-demo.

Check out the Weather JS module reference

The Weather JS module can only be used with the MapTiler SDK.

Related examples

An extension of MapLibre GL JS