"}],"short_description":"Learn how to use the ArcGIS Maps SDK for Flutter to build an app that maps vehicle meeting points for improved journey planning and efficiency.","flexible_content":[{"acf_fc_layout":"content","content":"The new ArcGIS Maps SDK for Flutter<\/a> is a powerful tool for developers to build cross-platform mobile applications that solve real-world geospatial challenges. Whether you\u2019re planning routes, visualizing data, or tackling location specific problems, the Flutter Maps SDK enables you to create interactive apps with ease. In this blog, I\u2019ll share how I built a handy mobile app that maps vehicle meeting points to improve journey efficiency and allow better journey planning.<\/em><\/p>\n On a recent holiday, I had an idea for an app that I could use to calculate the meeting point between two vehicles travelling toward each other along a single-track main road. This idea is location specific to the Isle of Mull, Scotland, where driving back eastward toward the ferry terminal, you often encounter large buses travelling toward you that have picked passengers up off the ferry. This can lead to difficult passing conditions depending on where you meet them (e.g. areas with sparse passing places, blind bends in the road). Knowing where you are likely to encounter them is beneficial for journey planning and efficiency \u2013 and can save some stress!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623222,"id":2623222,"title":"BusOnRoadPano","filename":"BusOnRoadPano.jpg","filesize":131754,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/busonroadpano","alt":"","author":"10242","description":"","caption":"Single-track roads pose a unique situation where heavy oncoming traffic, such as buses, can pose logistical challenges for passing safely.","name":"busonroadpano","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 19:32:59","modified":"2024-12-12 19:33:27","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":810,"height":365,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","medium-width":464,"medium-height":209,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","medium_large-width":768,"medium_large-height":346,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","large-width":810,"large-height":365,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","1536x1536-width":810,"1536x1536-height":365,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","2048x2048-width":810,"2048x2048-height":365,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","card_image-width":810,"card_image-height":365,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/BusOnRoadPano.jpg","wide_image-width":810,"wide_image-height":365}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Throughout this blog I\u2019ll walk through the process of how I created this ferry traffic helper mobile app using the Flutter Maps SDK. I\u2019ll share how to combine custom logic calculations to determine where two vehicles will meet based on the route travelled, ferry timetable, and vehicle time of departure provided by user input. I\u2019ll also cover how to set up graphics overlays and renderers to display this information in a dynamic and interactive app.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623152,"id":2623152,"title":"FerryTrafficCombined2","filename":"FerryTrafficCombined2.png","filesize":2888309,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferrytrafficcombined2","alt":"Three mobile phone screens, displaying a list of locations, a map, and a confirmation screen.","author":"10242","description":"","caption":"Ferry Traffic Helper app, built with the ArcGIS Maps SDK for Flutter","name":"ferrytrafficcombined2","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 18:48:10","modified":"2024-12-12 21:56:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":3318,"height":2475,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2.png","medium-width":350,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2.png","medium_large-width":768,"medium_large-height":573,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2.png","large-width":1448,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2-1536x1146.png","1536x1536-width":1536,"1536x1536-height":1146,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2-2048x1528.png","2048x2048-width":2048,"2048x2048-height":1528,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2-623x465.png","card_image-width":623,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficCombined2-1448x1080.png","wide_image-width":1448,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" For this blog I\u2019ll share an overview of the key steps required to configure the app, followed by relevant code snippets. I\u2019ve simplified and shortened \u00a0these for the purposes of the blog \u2013 the best place to view the completed code in full context is on my\u00a0<\/em>GitHub repo<\/em><\/a>.<\/em><\/p>\n First, you\u2019ll need to install the Flutter Maps SDK and sign up for an API key if you don\u2019t already have one (essential for authenticating routing and mapping services). Learn how to do this on the Get Started<\/a> doc pages.<\/p>\n Once you have the Flutter Maps SDK installed, follow the steps in the Display a Map tutorial<\/a> to build an app that imports the arcgis_maps<\/em> package, sets an API key and displays a map. The map provides the spatial context for the data to be shown, and the viewpoint can be set to a location of your choice \u2013 for this app, set up so the map loads over the Isle of Mull.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623312,"id":2623312,"title":"FerryTrafficMap35","filename":"FerryTrafficMap35.png","filesize":167972,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferrytrafficmap35","alt":"A mobile phone screen displaying a map centred over the Isle of Mull","author":"10242","description":"","caption":"The app is configured with a topographic basemap centred on the Isle of Mull, Scotland","name":"ferrytrafficmap35","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 19:54:30","modified":"2024-12-12 21:58:20","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":281,"height":566,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","medium-width":130,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","medium_large-width":281,"medium_large-height":566,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","large-width":281,"large-height":566,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","1536x1536-width":281,"1536x1536-height":566,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","2048x2048-width":281,"2048x2048-height":566,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35-231x465.png","card_image-width":231,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficMap35.png","wide_image-width":281,"wide_image-height":566}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Next, set up and add three graphics overlays with renderers to the map view controller to prepare to display the route, stops, and meeting point data on the map. For the route overlay, set a SimpleLineSymbol<\/a> with a dashed style as the renderer. For the stops overlay, which will mark the location of the ferry terminal (vehicle destination) and the point of vehicle departure, use a PictureMarkerSymbol.withImage<\/a> with a pin image. Finally for the meeting point overlay, use another picture marker symbol with an image of a bus (a fun way to show where you might encounter a convoy of ferry related buses!).<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/54327522a0ac6c09528874ca2286efc8.pibb<\/a>"},{"acf_fc_layout":"content","content":" To calculate where two vehicles travelling toward each other will meet, we first need the geometry of the road between them. This road is a particularly easy one to manage, as there is only one possible route that can run between the two vehicles as there is only one road! We can easily generate the route geometry as a polyline using the ArcGIS Routing service<\/a> by adding the ferry terminal as a stop (as this is always where the ferry traffic will be departing from), and also a user defined vehicle departure point as a stop.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623622,"id":2623622,"title":"FerryTrafficRoute2","filename":"FerryTrafficRoute2.png","filesize":223957,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferrytrafficroute2","alt":"A mobile phone screen displaying a map with a route drawn in a black dashed line.","author":"10242","description":"","caption":"The road between the ferry terminal (to the east) and the end of the road (to the west) is drawn using the ArcGIS Routing service, styled with a black dashed line","name":"ferrytrafficroute2","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 21:17:16","modified":"2024-12-12 22:06:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":325,"height":655,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","medium-width":130,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","medium_large-width":325,"medium_large-height":655,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","large-width":325,"large-height":655,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","1536x1536-width":325,"1536x1536-height":655,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","2048x2048-width":325,"2048x2048-height":655,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2-231x465.png","card_image-width":231,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficRoute2.png","wide_image-width":325,"wide_image-height":655}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" First, initialize the routing service by setting up a RouteTask<\/a> with the request URL. Then create default parameters on the route task by setting the stops and then solving the route asynchronously. Once the route geometry has been returned, add it to the route graphics overlay.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/839917f5ffc117213d290886186aaf76.pibb<\/a>"},{"acf_fc_layout":"content","content":" Now we have the map, graphics overlays and routing set up, we can calculate the vehicle meeting points. The logic relies on vehicle speeds, ferry schedule and route geometry to determine the meeting point. To keep things simple, we\u2019ll call the traffic coming from the ferry terminal the bus<\/strong>, and the vehicle driving toward the ferry terminal the car<\/strong>.<\/p>\n First, I store the ferry schedule in a separate class and use that to store valid ferry arrival times (coincident with bus departure time) that could coincide with the car departing. Then I calculate the time difference in hours between the bus and the car starting their journeys (car delay relative to ferry arrival times) and store their relative speeds. I have assumed the vehicle speeds will be constant for the purposes of this app (50km\/hr for the bus, 60km\/hr for the car). Then using the route geometry length, I calculate the distance the vehicles will meet using:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623542,"id":2623542,"title":"MeetingEquation","filename":"MeetingEquation.png","filesize":24772,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/meetingequation","alt":"","author":"10242","description":"","caption":"","name":"meetingequation","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 20:56:57","modified":"2024-12-12 20:56:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":904,"height":116,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation-213x116.png","thumbnail-width":213,"thumbnail-height":116,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","medium-width":464,"medium-height":60,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","medium_large-width":768,"medium_large-height":99,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","large-width":904,"large-height":116,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","1536x1536-width":904,"1536x1536-height":116,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","2048x2048-width":904,"2048x2048-height":116,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation-826x106.png","card_image-width":826,"card_image-height":106,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/MeetingEquation.png","wide_image-width":904,"wide_image-height":116}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" After calculating the meeting point distance, I add checks to ensure the result is valid by confirming the meeting point is within the route geometry. If the result is less than the route geometry length, it means the bus will have already passed through the route and the car won\u2019t meet it. Similarly, if the result is 0 or negative, it means the bus hasn\u2019t left yet and the car will complete its journey before encountering the bus. I then use the GeometryEngine<\/a> API in the Flutter Maps SDK to create a point along the route geometry using the distance to meet and I add that to the map as a graphic on the meeting point graphics overlay.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/892381a6d730c89361f7f46a7e1243ff.pibb<\/a>"},{"acf_fc_layout":"content","content":" And that\u2019s it in terms of logic to set up the app! We\u2019ve used the Flutter Maps SDK to display a map, display graphics, calculate routes, and carry out a spatial operation that shows where two vehicles travelling toward each other will meet each other.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2623612,"id":2623612,"title":"FerryTrafficResult2","filename":"FerryTrafficResult2.png","filesize":261951,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferrytrafficresult2","alt":"A mobile phone screen displaying a route with two bus icons part ways along it.","author":"10242","description":"","caption":"The meeting points of the bus and the car are drawn as bus icons along the route, their positions calculated using the GeometryEngine API","name":"ferrytrafficresult2","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 21:16:21","modified":"2024-12-12 22:13:27","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":325,"height":655,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","medium-width":130,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","medium_large-width":325,"medium_large-height":655,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","large-width":325,"large-height":655,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","1536x1536-width":325,"1536x1536-height":655,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","2048x2048-width":325,"2048x2048-height":655,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2-231x465.png","card_image-width":231,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficResult2.png","wide_image-width":325,"wide_image-height":655}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" All that remains is to build the app\u2019s UI using Flutter widgets. Flutter makes it straight forward to build user-friendly UIs that work well with the Flutter Maps SDK, especially using the hot reload feature to fine-tune designs quickly.<\/p>\n For this app I opt for two simple interactive ElevatedButton<\/a>s to allow a user to select their departure time, or to clear the graphics layers on the map. Flutter provides a wide range of built-in Icon<\/a>s that can be applied to UI elements for a minimal app design. \u00a0I use Flutter\u2019s showTimePicker<\/a> to allow users to select a departure time, and then build a custom dialog to display a list of possible departure locations for the user to select. Finally, I create a final custom dialog that confirms the user inputs and calculates the result once confirmed.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/dc7a3e081b6e8ebb059610bbe5b4fc88.pibb<\/a>"},{"acf_fc_layout":"image","image":{"ID":2623482,"id":2623482,"title":"FerryUI","filename":"FerryUI.png","filesize":2200274,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferryui","alt":"Three mobile screens showing a time picker dialog, a list of departure locations, and a confirmation screen.","author":"10242","description":"","caption":"The user interface of the app starts with the user tapping a button to bring up a time picker dialog, followed by departure location selection, and a final confirmation dialog.","name":"ferryui","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 20:48:59","modified":"2024-12-12 22:14:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":3685,"height":2475,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI.png","medium-width":389,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI.png","medium_large-width":768,"medium_large-height":516,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI.png","large-width":1608,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI-1536x1032.png","1536x1536-width":1536,"1536x1536-height":1032,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI-2048x1376.png","2048x2048-width":2048,"2048x2048-height":1376,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI-692x465.png","card_image-width":692,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryUI-1608x1080.png","wide_image-width":1608,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" I\u2019ve shown you how to build a simple mobile app with the Flutter Maps SDK that determines where you’d encounter traffic travelling toward you along a single-track road. By integrating ferry schedules with vehicle speeds and route geometry, the app delivers precise and fast insights for where the meeting point occurs. This allows the user better insights into their journey and being more aware of when they may encounter heavier traffic than usual on their journey, or, being able to plan to avoid it.<\/p>\n This is just the beginning for this type of app! You could adapt or extend this app to various scenarios using further ArcGIS capabilities within the Flutter Maps SDK, such as adding more routes, account for different modes of transport, allow users to enter precise departure locations and build in offline workflows.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2624192,"id":2624192,"title":"FerryTrafficGif","filename":"FerryTrafficGif.gif","filesize":4357051,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-flutter\/developers\/map-vehicle-meeting-points-flutter\/ferrytrafficgif","alt":"Short demo of the app in action, showing a user tapping on a button to start adding information to the app. The result displays on the map.","author":"10242","description":"","caption":"Once the user has selected a departure time and location, the route calculates and the meeting point(s) display on the map. This allows the user instant insight into where along the road they may encounter ferry traffic","name":"ferrytrafficgif","status":"inherit","uploaded_to":2622922,"date":"2024-12-12 22:40:38","modified":"2024-12-13 11:05:11","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":321,"height":644,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","medium-width":130,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","medium_large-width":321,"medium_large-height":644,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","large-width":321,"large-height":644,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","1536x1536-width":321,"1536x1536-height":644,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","2048x2048-width":321,"2048x2048-height":644,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif-232x465.gif","card_image-width":232,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/FerryTrafficGif.gif","wide_image-width":321,"wide_image-height":644}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" I hope this mini project has inspired you to create your own Flutter Maps SDK apps to solve your own geospatial puzzles!<\/p>\n You can start building ArcGIS powered apps today by signing up for a free ArcGIS Location Platform account<\/a>. Once you have an account and have generated an API key, you can import the arcgis_maps<\/em> package from pub.dev<\/a> to start building your Flutter Maps SDK app. Check out the ArcGIS Maps SDK for Flutter sample code repo<\/a> for more inspiration, and let us know your feedback and what apps you’re building on our new Esri Community Flutter Maps SDK forum<\/a>.<\/p>\nInstall ArcGIS Maps SDK for Flutter<\/h3>\n
Add a basemap and graphics overlays<\/h3>\n
Calculate the route<\/h3>\n
Add custom logic to map vehicle meeting points<\/h3>\n
Build the user interface<\/h3>\n
Summary<\/h3>\n
What next?<\/h3>\n