Dynamic or Static? - Maps on Flutterflow Part 1

how's it going Jasper from normal Coast here I recently have built a location-based photography app called LifeSource and here is everything I've learned about maps on flutter Pro I'll be sharing my learnings by using my app live source as a demo and this will be a multi-part video and in part one today let's cover the basics we have two types of map that are natively offered by flutter flow one is the Google Map which is interactive and one is a static map offered by mapbox for static map it essentially is an image generated based on your location and also your map configuration to get it working you need to insert the mapbox API I will not cover this here because it is straightforward simply go on their website create an account and get your API key here you should follow the flutter flow docs and tutorial if you're confused once you have inputted your API key here you can then give it a latitude and longitude information here I will cover how to get this info from your database later after LED and long info you can customize the zoom tilt rotation this will determine the look of your map image you can test it out from mapbox studio and once you find a configuration a design that you really like you can put them here on flutter flow you can then give a marker color by default there is no marker color here so initially it wouldn't have any marker showing on the map you can also use a mapbox custom marker link to customize your marker or you can choose to stack an icon in the middle of the map like I did here so to sort of customize your marker without using the custom link for an interactive map we need to use the Google Map widget which allows users to freely zoom and move around to get it working get your API key from Google and put them in Project settings here depending on which platform you are publishing your app to you will need to get the right Keys respectively flutterflow has tutorials and docs on these so I will not cover them in detail here once it is working you first need to decide how many markers you want to visualize if you've used Google Map before markers are essentially a specific location visualized on the map in my case the light source app Marcus represent locations where users have done a photo walk and also uploaded some photos taken from that particular location so in my case I would like to visualize more than one markers so I'll go with multiple here you can also simply choose not to use any markers for this video I will cover where there's no marker because visualizing markers is a standalone video on its own you can find the link to that video in the description below if there is no marker you need to provide initial location with lat and long information to let Google Map know where you want the map to be initially a common use case here is that you can actually click on this orange icon here to choose a variable called current device location so that your map will locate to where the user is using the device by default if they give permission talking about permission if you can't seem to be able to get the device location working here if it doesn't show up or if it's showing in the display disabled State it's because you first need to come to the permission settings on the project setup and toggle the location permission on this can also be applied to the static map as well to decide which one to pick static versus interactive off about Google it's fairly straightforward I think it all comes down to two questions first how many markers or AKA locations do you want to visualize on your map second do you want your users to be able to zoom in interact with the map in real time go with static if you only need a single marker or location visualized on the map and you don't need users to be zooming in and moving around on the map go with Google if you want to display multiple markers because the static map doesn't support display in multiple markers and also go with Google if you want your users to freely move around on the map with interactivity built in however you can totally mix and match the two types of the map for example on live Source Google is used when I would like to have the users explore the map and be able to tap on and marker and see the photos uploaded at that particular marker I will cover how to achieve these in a separate video which I will link down below and I will use static map when I simply just want to show a rough idea where the location is and I don't want the users to interact with the map for example I will use static map as a thumbnail for each photo walk and as a cover image when users are viewing the details page and because both static and Google map take lat and long as input you can actually seamlessly switch between them for example here I can click on the static map and be directed to a Google map widget where we were sent to the Google Map automatically to the static map location where we just came from so you can actually pass parameters from and to maps and switch between static and interactive maps seamlessly I will also make a separate video about passing parameters from maps and to map widgets so stay tuned for that and there you have it this is part one of everything I've learned about maps on flood to flow if you want to see more flat to flow video or if you want to follow my journey building my app with flutterflow on this channel consider subscribing along with this kind of video where I share my learnings I am also doing some Vlogs about me building with flutterflow and also me trying to launch products with photofun so if those videos are of your interest you can also consider subscribing to my channel until next time ciao

Channel: Nomo Codes - AI apps & automation with no-code

Views: 5,856

Keywords: nocode, softr, airtable, design, ux, ui, web design, web development, frontend, backend, lowcode, 3d, spline, product, saas, framer, webflow, googlesheet, zapier, make, integromat, bubble, figma, adobe, plugin, ios, android, pwa, sparkar, lensstudio, chatgpt, gpt4, openai, flutterflow, aigen, generativeai, generativedesign, nocodedesign, nocodeai, automation, MVP, startup, entrepreneur

Id: Zgx4VvG5IYI

Length: 6min 14sec (374 seconds)

Published: Mon May 01 2023