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 https://github.com/maptiler/popup-weather-demo.git
   

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

Related examples

Display a popup

Example

Add a popup to the map.

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.

Weather wind and temperature layer

Example

Visualize weather wind and temperature layer from MapTiler Cloud Weather Wind dataset and get the wind speed and temperature at the point under the cursor.