{"id":4429,"date":"2020-05-11T11:18:00","date_gmt":"2020-05-11T11:18:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4429"},"modified":"2020-05-31T11:37:55","modified_gmt":"2020-05-31T11:37:55","slug":"5-popular-interactive-map-components","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/freebies\/5-popular-interactive-map-components\/","title":{"rendered":"5 Popular Interactive Map Components"},"content":{"rendered":"\n

Location-based design has never been easier thanks to these powerful premade\u00a0components.<\/p>\n\n\n\n

The way we behave as consumers is evolving maps <\/strong>are becoming more and more common in digital products. Food delivery, online shopping, and hotel bookings \u2014 none of these experiences would be the same without interactive maps<\/strong>.<\/p>\n\n\n\n

In the past, when product designers wanted to include a map in their prototype, they\u2019d have to imagine how it could work with a flat image as a placeholder. Now, Framer <\/strong>is unlocking the power of real, working components, helping designers realize their vision during from the design phase.<\/p>\n\n\n\n

Here are a handful of my favorite components for bringing your location-based ideas to life in Framer<\/strong>.<\/p>\n\n\n\n

1. Mapbox<\/h2>\n\n\n\n

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\u00a0Mapbox Studio<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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<\/a>, line and navigation data, and much more.<\/p>\n\n\n\n

There\u2019s also a static version<\/a> of the component if you don\u2019t 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\u2019re working on large projects.<\/p>\n\n\n\n

\u200bCheck out the Mapbox package<\/a><\/p>\n\n\n\n

2. Carto Maps<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u200bCheck out the Carto Maps package<\/a><\/p>\n\n\n\n

3. Google Maps<\/h2>\n\n\n\n

You\u2019ve 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

There\u2019s also a static version<\/a> that can help with performance if you\u2019re working on a large project. The static map isn\u2019t interactive but gives you options so you can configure how it looks.<\/p>\n\n\n\n

\u200bCheck out the Google Maps package<\/a><\/p>\n\n\n\n

4. Apple Maps<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u200bCheck out the Apple Maps package<\/a><\/p>\n\n\n\n

5. Location Icons<\/h2>\n\n\n\n

There are plenty of icon packages on the store, but this collection is specifically tailored to use with maps. You\u2019ll find pins, globes. maps, route illustrations, and more. They are also free for commercial use which is a big bonus.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u200bCheck out the Location Icons package<\/a><\/p>\n\n\n\n

The range of free, premade components is a huge factor in what makes Framer the powerful tool it is today. What\u2019s amazing is that this range is growing every week off the back of our community\u2019s generous contributions.<\/p>\n","protected":false},"excerpt":{"rendered":"

Location-based design has never been easier thanks to these powerful premade\u00a0components. 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 \u2014 none of these experiences would be the same without interactive maps. In the past, when product designers wanted […]<\/p>\n","protected":false},"author":2,"featured_media":4430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[8,76],"tags":[57,63,34],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/05\/5-Popular-Interactive-Map-Components.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-19r","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4429"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4429"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4429\/revisions"}],"predecessor-version":[{"id":4437,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4429\/revisions\/4437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4430"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}