How to display OpenStreetMap in Flutter | Flutter Map

in this video I will show you how to display open street map in flutter as shown in the simulator not only that you also learn how to add the marker to specific location coordinates before we dive into the code don't forget to subscribe to our channel in this tutorial we will be using flut map package which provides the open street map view and also let long tool package which provides latitude and long calculation as you can see from my code the body content vet is empty now we will go through the code step by step from scratch firstly add the open street map view using flutter map widget in the map option parameter is where we can customize the map such as setting the initial center of the map initial Center parameter requires let long time type which comes from the second package that we import not only that in the map option we can set the initial Zoom of the map and also interaction options next is in the children parameter firstly we have to create a tow layer this tole layer is where it Imports the map using URL template and the user agent package name these are constant value then add the tole layer into the children parameter now let's test it out in the simulator so as you can see the map shows with Singapore as Center because I set the initial Center coordinates to Singapore you can easily change the center value by modifying initial Center parameter value so so this is the first part of the tutorial which is displaying open street map in flutter app now on the second part I will show you how to add rate marker to the map firstly in the children parameter we have to add a marker layer wiget this wiget takes a list of marker object let's create the first marker in the marker object we are required to set the point par ter which defines which location the marker to pin on the map so here I will provide a random let long coordinates not only that you can also set the marker width height and Alignment most importantly in the child parameter at a location pin I icon with red color so it looks like a location marker on the map you can adjust child viget as you required so now as you can see in the simulator there is a rate marker on the map on the specific coordinates that I provided to add more marker you can replicate the marker object and change to different coordinates for tutorial purposes I will provide a static coordinates values you can provide the value from database or any network request but make sure you pass the coordinates value to let long type so this is the final results where you have a map with multiple marker in your flutter app you can also add gasture detector Viet to each marker and provides an ontap event function such as navigation conclusion this is how you add open street map in flutter app if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 7,370

Keywords: flutter map, flutter openstreetmap offline, flutter osm plugin, osm flutter example, flutter openstreetmap marker, map in flutter, flutter osm map example

Id: ZnZM8ot5lcc

Length: 5min 28sec (328 seconds)

Published: Tue Feb 27 2024