CampusMap adds a fully interactive and searchable navigation system to your Framer projects. Drop it into a contact page, a campus directory, or an event landing page to help visitors explore physical locations with ease. It supports custom map images, animated pins, and immersive 360-degree viewing settings.
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.
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.
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
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.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
