DYNAMIC Mapbox Maps in FlutterFlow (Pt.1): Markers

hey everyone in this video we're going to be looking at how to create a dynamic map inside of flutter flow so without further Ado let's get started so the first thing I'm going to do is create a new project and I'm going to name it Dynamic map so let's go ahead and create that and then we'll just Skip and the first thing I'm going to do is just rename the page here let's just name this to Dynamic map and then I'm going to head over to the custom code area here and what I'm going to do is create a new widget and I'm going to call this widget again Dynamic map for lack of a better name and the first thing we're going to do is Define some parameters so the first parameter I'm going to Define is the markers parameter we're going to set this parameter to type lat long because it's going to receive coordinate data and let's make that non-nullable and make it a list then we're going to Define another parameter this one's going to receive our access token so we can set our access token dynamically and it's not going to to be nullable and we can leave it as a string and then after that we're going to Define another parameter called starting point and this parameter is also going to receive coordinate data and we're going to make it non-nullable as well and then we're going to add another parameter and this one's going to receive the initial Zoom uh that we want our map camera to have okay and then we're going to turn off nullable for that one as well and then I also want to Define some dependencies so the first dependency I want to Define is the flutter map package and this package is going to provide the bridge between flutter flow and mapbox and then we're also going to use a certain format for uh latitude and longitude coordinates so we're going to Define another package called lat long 2 and then we can scroll back up and I actually want to set the markers to be able to be nullable okay and then let's go to the boiler plate code and we can just copy that to our editor okay and now that we we've done that the first thing I'm going to do is actually save this widget and then I'm actually just going to refresh the page to get our code debugger working again okay and now that that's done what we're going to do is import our dependency packages so the first package I'm going to import is the flutter map package so just write it like I'm writing here and then and then I'm also going to import the lat long 2 package so just write a exactly what I'm writing to import that and because flutter flow has a default lat long and we want to distinguish our lat long 2 package we're going to write as ll in front of the package declaration here so now we're going to move on to the actual widget so we're going to replace the default container there with a flutter map widget and inside of this flutter map widget we're going to write options colon map options and then in parentheses we're going to write Center and then for the center we're going to translate the starting point into a latitude longitude data type that comes from our lat long 2 package so what I'm going to do is reference the widget variable of starting point and then I'm going to first reference the latitude and then after that I'm going to reference the starting point longitude and then I'm going to double turn and then another option we're going to add is our Zoom so we're just going to pull that right from our widget starting Zoom variable great and then let's add a comma here and then under the options we're going to add children and this is going to allow us to add layers to our map so the first layer we want to add is obviously our map layer so we're going to write tile layer and then in parentheses we're going to write UR URL template and then a pair of single quotes So This is where we can add a reference to any type of map API so for instance if we wanted to add an open street map then we can just search open street map URL template and then we can click on the raster tile provider here and we can find that we have a URL that we can actually just put in there and if we were to just put that in there and use it it would give us the map from the open source open street map but we don't exactly want to use that today we want to use mapbox and the reason why we want to use mapbox is because mapbox has a few more tools out of the box no pun intended um that we can use uh in the future if we wanted to like for instance if we wanted to get directions between two points on our map okay so the first thing we're going to do is create a map in the Studio here so just click that and as you can see I already have one created but we're just going to make a new one for today so we're going to click new style and there's a few options but in today's video we're just going to go with start with standard so let's click that and then all we need to do is just name this something so I'm just going to name this standard map and then once that's done just hit the check mark there and then let's go back to our Styles there and in the Styles we can see our standard map that we just made so we want to click on this share button here and then under developer resources we want to click third party and then in this drop down here we want to choose CTO and then we want to copy this link and once we've done that we're going to just paste that in our URL template there and then what I want to do is replace the access token here with the access token that's going to be passed as a parameter ameter to this widget and then we're going to get started working with our markers so we're going to declare a list and it's going to be of type marker and let's just call this all markers and we can set that equal to an empty list and then what we're going to do is declare the NIT State and we're also going to Define another function that is going to add our markers to our map so we can set this to type void and we can call it something like add markers to map and then for the variables that go into the function we obviously need our list of coordinates so we're going to declare a variable that is of type list lat launch and we can call this something like points and because this is nullable we're actually going to add a question mark to the variable type declaration and actually to avoid confusion I'm actually going to name our widget markers variable to points as well just so we know we're talking about the same thing here so I'm going to change that here I'm going to change that up here as well and then I'm going to change the parameter as well perfect so what we're going to do is go to our nnit state and we're going to call this function so we're going to write add markers to map and then in parentheses we're going to add our widget do points variable great so now that that's being called let's actually write this function so what we're going to do is decare a for Loop and this for Loop is going to iterate over each point in our points list and I'm also going to add an exclamation mark to the end of the points list here because it is nullable so inside of our for Loop here we're going to write all markers do add and then for each point in the list we're going to add a variable of type marker so inside of this variable of type marker we're going to add a few arguments and the first argument is going to be the actual coordinates so let's write ll. lat long and then in parentheses let's write point. latitude and then comma point. longitude great and then we can add a comma after that and then the next argument we're going to satisfy is the height argument let's set that to 12 and then we're going to do the same thing for the width argument we're going to set that to 12 as well and then the next argument is the Builder argument and this is going to be what our marker actually looks like so let's write in parentheses build context and we can just call that something like CTX and then we're going to write Arrow icon and then we're going to set some of the properties for our icon and the first property we're going to set is the actual icon itself so that icon we can set to be location uncore pin and then for the color we can set it to colors. Red all right so this is actually starting to look really good and and now that we've added our markers to a list what we need to do is add another layer to our map that contains our markers but before I do that I want to save and refresh the page great so let's scroll down here and underneath the tile layer let's add a marker layer and then in parentheses for the markers argument we can add our all markers list great so now that that's done let's just save this code and then I'm actually also going to compile this code so why don't we just go ahead and do that as well great so now that that's done back on our homepage in our column let's go to components and add our custom widget so once we do that I'm going to set the width to infinite and then I'm going to actually wrap this in a container and then I'm going to set the container height to 300 and then I'm going to go back to our Dynamic map here and set the height to infinite and now what I'm going to do in our app State variable menu is create a list of latitude and longitudes so we can start by adding an app State variable and we can set it to type latitude longitude and make it a list and we can call it cool places and then I'm just going to add a bunch of places from the internet so I'm just going to do that quickly all right and then let's go back to our widget tree here and for our points we can set our cool places list and then for our access token I already have that copied to my clipboard but you can just find that from your mapbox account and then for the starting point I'm actually going to take the first item in the list so what we're actually going to do is Select item in index and then go to first and then confirm that and then I'm just going to set the starting Zoom to three all right and then I'm just going to look over the code one more time let's save that and then let's test this out great you can see it's all working we have our map with our markers on it um but the only thing is that the markers are slightly off from their points as you can see with the one uh with Japan here it was originally in the sea and as I scroll in it moves to the land um and that's because the Anchor Point for the marker is actually wrong so we're actually going to go back to our code and fix that so in our marker function here here we're going to set another argument and this one is going to be the anchor position so let's write anchor pose colon anchor pose do exactly and then in parentheses we can write anchor 0 -12 great and then I'm going to save that and then I'm going to go back to our test mode and I'm going to refresh the page and as you can see the point at the bottom of the marker stays in the exact same spot so as we scroll in here to this point I've marked the Taj Mahal um and as you scroll in obviously you can see that the map adds detail so that's it for this video I'm planning on doing a part two where I show how to show how to get directions between two points um but that is for a later video um I hope you likeed this video if you did please make sure to like And subscribe as that really helps me out and as always I will see you in the next one bye for now

Channel: Bran King

Views: 1,314

Keywords: API, FlutterFlow, Flutter, Widget, Google Maps, Open Street Map

Id: RdWXhj_E2p0

Length: 13min 5sec (785 seconds)

Published: Fri Mar 01 2024