Location-based design has never been easier thanks to these powerful premade components.
The way we behave as consumers is evolving maps are becoming more and more common in digital products. Food delivery, online shopping, and hotel bookings — none of these experiences would be the same without interactive maps.
In the past, when product designers wanted to include a map in their prototype, they’d have to imagine how it could work with a flat image as a placeholder. Now, Framer is unlocking the power of real, working components, helping designers realize their vision during from the design phase.
Here are a handful of my favorite components for bringing your location-based ideas to life in Framer.
1. Mapbox
Mapbox is a location data platform that can be used when creating mobile and web applications. With an impressive list of clients, such as Snap, Facebook, and Lonely Planet, the real power of Mapbox comes from the easy-to-use Mapbox Studio
After creating a Mapbox account, you can design your own maps and then simply copy the style URL and paste it into the Mapbox Component in Framer to see it in action. Not only can you design your map using colors and shapes, you can also include things like GeoJSON data, line and navigation data, and much more.
There’s also a static version of the component if you don’t need it to be interactive. With all the same features to customize the look and feel of the map, you can use this version to help save on performance if you’re working on large projects.
2. Carto Maps
Carto is a company that combines user data and analytics to create interactive maps. This component, created by the Carto team, gives you lots of options for customization. Choose from one of three basemaps (light, dark, or voyager), select a starting location, adjust the zoom level, and more to make it work for your prototype.
Check out the Carto Maps package
3. Google Maps
You’ve definitely heard of Google Maps before, but did you know you can use it in your Framer projects? This component is really easy to integrate into your prototypes. Simply drag it onto the canvas, configure your options, and preview to see it in action.
There’s also a static version that can help with performance if you’re working on a large project. The static map isn’t interactive but gives you options so you can configure how it looks.
Check out the Google Maps package
4. Apple Maps
Apple Maps is another component available in Framer, perfect if you are designing iOS style apps. Just like the Google Maps component, this one also lets you specify a location and zoom level so you can make it look the way you want in your prototype.
Check out the Apple Maps package
5. Location Icons
There are plenty of icon packages on the store, but this collection is specifically tailored to use with maps. You’ll find pins, globes. maps, route illustrations, and more. They are also free for commercial use which is a big bonus.
Check out the Location Icons package
The range of free, premade components is a huge factor in what makes Framer the powerful tool it is today. What’s amazing is that this range is growing every week off the back of our community’s generous contributions.
