TerrainMap brings fully interactive, production ready maps into Framer using the MapTiler SDK. It supports multiple map styles, terrain elevation, optional 3D buildings, and customizable pins, all configurable directly from Framer property controls.
The component is built to handle real world use cases, from simple location maps to immersive 3D visualizations. Styles are safely loaded before custom layers are applied, ensuring reliable rendering even when switching themes or modes dynamically.
Pins can display rich popups with custom typography, colors, and optional icons. For performance, the component automatically switches between DOM markers and vector layers depending on pin count.
Multiple map styles including streets, satellite, hybrid, and dark modes
Optional 3D terrain with elevation and atmospheric effects
3D buildings with adjustable tilt and camera rotation
Dynamic center modes using coordinates, variables, or user location
Custom map pins with titles, descriptions, and icons
Fully styled pin popups with font and color controls
Automatic performance handling for large pin datasets
Safe style reloading to prevent layer conflicts
Responsive zoom, tilt, and bearing updates
Built on MapTiler for high quality global coverage
Location based landing pages
Real estate and property showcases
Travel and tourism websites
Store locators and office maps
Data driven geographic storytelling
Hero sections with immersive maps
Contact and location pages
Product pages tied to geography
Dashboards and data visualizations
Editorial and storytelling layouts
TerrainMap removes the complexity of building advanced maps from scratch. It gives designers full creative control over visuals and interaction while handling performance, loading order, and edge cases behind the scenes. Whether used in simple 2D mode or fully immersive 3D terrain, it adapts cleanly to both design and production needs.
TerrainMap requires a MapTiler API key to load map tiles.
Step 1: Go to https://www.maptiler.com
Step 2: Create a free account or log in.
Step 3: Open your dashboard and navigate to the API Keys section.
Step 4: Copy your default API key or create a new one.
Step 5: Paste the key into the “API Key” field in the TerrainMap property panel inside Framer.
The free plan is sufficient for most small to medium projects. For higher traffic websites, you may need a paid plan depending on usage.
Frame Craft
