Discussion
There are a handful of ways to make an app that has a geospatial component. Our app uses flutter_map, a package for flutter that allows users to insert a map into their app. It also includes some other utilities such as showing the user’s location, and when combined with a database, the ability to collect data geospatially. This is the basics of what our app is for. Collecting data for observations that occur on the Ocean.
So how does loading a map work for mobile apps? In general these maps will be loaded as tiled images. This allows the map to retain detail at different zoom levels across a large area. For the most part these tiles will be pulled from a server and loaded as the map. But our app’s use case poses a big problem for this. There is not often cell service further off shore. So what do we do?
Tile images can be saved in a vector format or a raster format. The vector format is useful for saving storage space, but unfortunately, there are not many tools to actually save these vector formats to be used in the app directly. If they are available, they remained elusive to me in my research. So we had to find another way. I am familiar with arcGIS Pro through my job, so initially I wanted to see if they had a tool to convert a map area to map tiles. Again, I was blocked. Due to ArcGIS’s proprietary nature, the tile services that they provide could only be used with their software. However, I was not deterred. I turned to open source software.
QGIS is an open source alternative for geospatial software, it offers much of the same functionality as arcGIS for individual maps, so I hoped that they would offer a tool that would fit our needs. And luckily for me, they did. So I loaded the appropriate layers, and edited them to be cartographically pleasing to look at (not always the easiest task). And now it was time to use the QGIS tools.
There are two options to choose from. One is xyzToTiles (.mbTiles), and the other is xyzToTiles (Directory). At first I was led to believe that the first option is what I wanted. This was partially due to me using the wrong settings in the directory version of the tool. The first tool creates an SQLite database file that loads the images from binary files. This is the .mbTiles file that it references. And while it seems there should be a way to use this directly in our app, there are some challenges to overcome. I could only find one reference to a GitHub repository that is able to pull the images out of the SQLite format, and it is limited to only raster based .mbTiles files. So I had to look for another tool that would convert the .mbTiles to a raster based version. I ran into even more challenges here. The tool that I found to do this, again the only one I saw referenced across multiple forums, expected a certain schema within the .mbTiles format. Unfortunately for us, our .mbTiles file did not have this schema. So it was back to the drawing board.
I began looking at the other tool in QGIS, and I realized I had missed something. If a directory is not given to the tool, it will export an html file that is similar to the .mbTiles file above. This is what I had done the first time, and I decided it was not what I wanted. I expected a new folder with the images for the tiles. However, when the tool is given a directory, that is exactly what it does. It exports a directory with .png files for the tiles of the map.
However, I did not want to get too excited. There was still one more barrier that needed to be checked. When using tiles such as this flutter_map expects them to be saved in a style known as the “Slippy map” convention. Essentially the folder structure is /{z}/{x}/{y}.png. Where z is the zoom level and x and y coincide with longitude and latitude. I didn’t cover it, but another method I tried did convert the map to images. They just didn’t have the expected coordinates, and were not found by flutter_map when that area was checked. This is not something that is easily fixed when the larger zoom levels can have thousands of files. Luckily for us, the xyzToTiles (Directory) tool did export the files in a directory structure that matched the “slippy map” convention with correct coordinates. And thus, we were able to add the new map to our app!
Conclusion
Flutter_map is an amazing tool for adding maps to an app. Geospatial data is everywhere, from supply chain management to finding the closest McDonald’s, so the having the ability as a developer to add this to an app is extremely useful. It seems like there are paid services that could handle the tile conversion process, but it is achievable as a developer. However, it does appear that there could be improvements to the conventions of the .mbTiles file. I am wondering if this is because of the different paid resources.
This whole process is something I want to continue to look into after this course. It seems that having one tool that has the ability to convert raster and vector .mbTiles files to map tiles would be extremely beneficial to anyone who wants to add an offline map with their own cartography to their app.
Links
For more information on flutter_maps or map tiles, see the links below.
- Flutter_Map:
https://docs.fleaflet.dev/ - Map Tiles:
https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#3/15.00/50.00 - QGIS:
https://qgis.org/en/site/
Leave a Reply