CampusMap

About

Transform your Framer site with a fully customizable campus map. Feature interactive pins, 360-degree views, and a powerful search bar to help users navigate complex locations with beautiful, responsive tooltips and smooth pulse/bounce animations.

What it does

Renders a custom map with interactive "hotspot" pins. It features a built-in search bar to quickly locate buildings or points of interest, and displays detailed tooltips on hover or click. The component also includes a 360-degree rotation feature with adjustable sensitivity, allowing users to explore high-resolution panoramic or aerial views of your campus or venue.

What you can customize

• Search Functionality: Toggle the search bar, customize the placeholder text ("Search buildings..."), adjust width, and choose between Top Left or Top Right positioning.

• Pins & Animation: Fully customize pin size, color, and borders. Enable "Pulse" or "Bounce" animations with control over the animation speed and scale to grab user attention.

• Tooltips & Styling: Adjust the width, height, and offset of tooltips. Customize the background, border colors, and corner radius. Control fonts (defaulting to Inter) and colors for both Title and Body text.

• Map & View Settings: Upload your own map image, set the background color and border style, and fine-tune the 360-degree sensitivity and starting angle for interactive views.

Great for

• University and school websites

• Corporate office directories

• Music festivals or large-scale event maps

• Real estate developments and neighborhood guides

• Interactive "Find Us" sections on business sites

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb