Within a few days I had rudimentary support for themes, basic land and water shapes, lines and text as a dart library vector_tile_renderer How hard could it be? It turns out that drawing vector tiles is achievable. Second Attempt: Support Vector Tiles in FlutterĪs an experiment I decided to try drawing vector tiles using Flutter and Dart. This is especially relevant for mobile devices supporting dark mode.įor flutter_map to produce the beautiful maps that we have come to expect, vector tile support is essential.

Clients render these vectors, resulting in sharp maps at any scale.Īnother advantage of vector tiles is that map data can be rendered with a variety of themes, meaning that the color of geographic features such as land, roads and water can be any color as defined by the theme. Unlike a raster tile, which is an image, vector tiles instead represent map data as a set of points, polygons, lines and metadata with relative positioning. As a result, when zooming map tiles become slightly blurry, text sizes change, and theming is limited to themes supported by the service offering raster tiles. without platform views, I could avoid all of the rough edges that come with native platform components in the Flutter widget hierarchy.įlutter_map worked beautifully, but had rough edges of its own because map tiles were pre-rendered as raster images and scaled on the client. By embedding a map using Flutter components only, i.e. One such library, Leaflet, has inspired an excellent Flutter map implementation named Fleaflet, also known as flutter_map. It turns out that there is a whole ecosystem of mapping alternatives to Google Maps, mostly focused on the web and built in JavaScript. It was clear that any approach using platform-native widgets just wouldn’t work due to the widget positioning issue. After a few hours, I had something up and running, but was unable to achieve a user experience that was good enough. I knew that I could solve the native crash problem, and was hopeful that I could address widget positioning. My first attempt to fix the issues was to create my own platform widget package to embed a platform-native Google Map. When such a crash occurs, the app is terminated - a terrible user experience. A bug in the Google Maps package occasionally results in a native crash when taking a snapshot.

To do that, a snapshot of the map is taken and composed with other components. To support creating awesome weather visualizations that can be shared on social media like this one, the app has to be able to render maps to an image. For example, when scrolling vertically, the map widget is placed too high, too low, or gets stuck at the bottom of the screen. When scrolling, the platform map widget is occasionally misplaced. When platform widgets are not included in a scroll view, it works beautifully. This clever approach to layering make them appear the same as other Flutter widgets. This means that the map widget must scroll along with other content.įlutter positions native platform widgets ( platform views) over top of the Flutter view hierarchy. With mobile devices having smaller screens, scrolling is a necessity. My app presents a map with weather data and various charts. There were two issues that prevented me from using Google maps in my app: 1. This post details the issues that I encountered and how I ended up solving the problem by creaing a plug-in vector_map_tiles to add support for vector tiles to flutter_map.

The platform/Flutter combination is not perfect, and for my use-case isn’t good enough for a prodution app. The resulting map looks and behaves beautifully, except when it doesn’t. Maps are commonly added using the google_maps_flutter package, which uses native platform widgets to embed a Google map in your Flutter app. Flutter is a huge productivity booster except for a few sharp edges, one of which is embedding maps.

Maptiler render failed