How to Create 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.

"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 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 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.

To create this type of interactive map:

Insert a 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 component

Animate a custom map with states

PandaSuite allows creating highly personalized interactive maps.

This method leverages 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.

Importing SVG files from tools like Illustrator is supported, making it easier to integrate complex designs and perform custom animations.

Here is a video (a bit old) on how to create your own customized interactive map using SVGs.