# Interactive map

> Learn how to create interactive maps using PandaSuite to visualize data and interact with geographic information. This guide covers creating zoomable maps, displaying GPS points, and animating custom maps for enhanced user experiences across various applications such as education and urban planning.

https://docs.pandasuite.com/tutorials/how-to/interactive-map/

**An interactive map is an innovative way to visualize data and interact with geographic information. It enhances the user experience by adding a visual and dynamic dimension to your projects, whether for education, museums, marketing, or urban planning.**

## Types of interactive maps

"Interactive map" encompasses various types of maps and effects. Here are some examples of maps you can create using PandaSuite:

- **Zoomable map**: allows users to zoom in and out and explore additional content.
- **Display GPS points of interest**: use a map background to mark points of interest based on their GPS coordinates.
- **Animated custom map**: create personalized interactive maps using images/SVGs and animations.

Each of these methods offers specific advantages and can be chosen according to your project's needs. PandaSuite stands out for its flexibility and the ability to create immersive interactive experiences without coding skills.

## Create a zoomable map

If you want your users to be able to zoom and navigate the map to discover additional content (texts, images, videos, links) on click, this method is for you!

To create this type of interactive map:

- Insert a [Zoomable](https://docs.pandasuite.com/essentials/components/zoomable/) component
- Inside the Zoomable component, add a background image and make sure it covers the entire component.
- You can add your interactive buttons (hotspots), which, when clicked, display additional information in pop-up windows or popovers, thereby maintaining a clean visual appearance.

To learn more: the [Zoomable](https://docs.pandasuite.com/essentials/components/zoomable/) component

## Display GPS points of interest

When conducting a touristic or cultural tour, it may be interesting to use a map background (Google Maps, OpenStreetMap, or Mapbox) and place points of interest on it based on their GPS coordinates.

[Image: Près de moi mobile app: OpenStreetMap map of Montreuil with two point-of-interest markers and a circular area]

To create this type of interactive map:

- Insert a [Map](https://docs.pandasuite.com/essentials/components/map/) component
- Choose your mapping provider: **Google Maps**, **OpenStreetMap**, or **Mapbox**
- Add markers to indicate specific points of interest. You can customize the icon, size, position, and the contextual text to display in a pop-over
- These markers can be dynamically generated from a data source.

To learn more: the [Map](https://docs.pandasuite.com/essentials/components/map/) component

## Animate a custom map with states

PandaSuite allows creating highly personalized interactive maps.

This method leverages [States](https://docs.pandasuite.com/essentials/interactions/understand-states/) to generate zoom effects and sequential animations for a rich and engaging user experience. This technique is particularly useful for projects requiring a high level of visual customization.

[Image: Custom map of the fiber rollout in Val-d'Oise: areas colored by network, NRO points and a legend]

[Importing SVG files](https://docs.pandasuite.com/essentials/multimedia/svg/) from tools like Illustrator is supported, making it easier to integrate complex designs and perform custom animations.

Here is a video (a bit old, in French) on how to **create your own customized interactive map** using SVGs. To follow it in English, open the player's **Settings**, then **Subtitles/CC** › **Auto-translate** › **English**.

[Video: Creating a custom interactive map with SVG (in French)](//www.youtube.com/embed/JUvj13hDMn0?autoplay=0&showinfo=0&)

## Add pop-ups or popovers

To display more information when a point of the map is clicked, open it in a [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/).

Here is a tutorial, also in French, that shows how:

[Video: Add pop-ups or popovers (in French)](https://www.youtube.com/embed/qFWjnNDbU-8?hl=en&cc_lang_pref=en&cc_load_policy=1)