Logo preload
close Logo

Creating offline map layers for Android

July 3, 2013

The ability to add offline maps has been one of the many useful customization options of Fulcrum for quite a while. In the last few months we have expanded on this, giving users the ability to add multiple layers on Android devices.

Maps on Android

Just like with base maps, all layers must be in MBTiles format. If you are unfamiliar with MBTiles, or just map creation in general, we understand this can be overwhelming. The good news about creating offline layers is that it is much easier than creating an entire base map. Adding layers over an online basemap is a great way to get customization quickly if connectivity is not an issue; you can include existing GIS point, line, and/or polygon data for reference while in the field. Keep in mind that if you also need an offline basemap, it is relatively simple to use Mobile Atlas Creator to create a general purpose one from open data sources. The only limit to the number of layers you can add is storage space.

Step 1: Download TileMill

Download TileMill, which is completely free. This is the same program we encourage users to download to create complete basemaps from any map data, including CSV, KML files, and imagery files like GeoTIFF. The TileMill site has plenty of great documentation.

Step 2: Create a Project

Create a project, and be sure to include the default data. Having some basic world borders can help orient you and locate new layers you add.

TileMill project

Step 3: Add Your Layer

If you don’t already have GIS data for your project, there are many sources for data on the web. In this example, I am using a polygon layer of parcel data that I got from the Pinellas County GIS page. Municipal GIS sites and portals can be great resources for free data.

To add your layer, click the layers button in the lower left hand corner of the screen, and then “+ Add Layer”.

Add layer

Browse to the location of the file on your computer, and select the layer. After you have named the layer, entered a description, etc, click “Save & Style”.

Add layer window

This will automatically generate CartoCSS for displaying the file. Carto is a CSS-like markup language for defining things like colors, line widths, fills, transparency, and other visual properties.

CartoCSS

Verify that the data is showing up in the correct location by zooming to the layer extent. If the layer is showing up in the wrong location, you may need to reproject it using something like ArcMap or QGIS. The safest choice when reprojecting is WGS 1984.

Data

Step 4: Remove Everything Else

Remove the countries layer and background CSS (seen highlighted in the screenshot below). If you were to leave this in, it would cover up any basemaps you want to see underneath the layer in Fulcrum.

Layer

Step 5: Change Opacity, Colors

The polygon-opacity property in this example controls the transparency. If you want to be able to see basemaps underneath your layer, you might want to try setting the opacity to ‘0.5’. Changing this may not be necessary for lines and points; it is entirely up to you as to whether or not this needs to be adjusted.

Map data

You can also adjust the color of outlines, fills, points, etc, as well as the width/size of any lines, outlines, points, etc. You don’t have to do these things, of course. Your layer will look just fine in Fulcrum with the CSS that was automatically generated when you added the layer. In this example I adjusted the polygon-fill and line-color.

If you want to get a little more advanced with the design for your layer, check out the TileMill Documentation.

Step 6: Export to MBTiles

Click the ‘Export’ drop down and select MBTiles.

MBTiles

Once you are looking at the export settings screen, it is very important that you adjust the number of zoom levels, as well as set a bounding box. Skipping this can create a gigantic file. In this case I picked a portion of Pinellas county near our HQ, and set the zoom to just one level. I suggest zooms 17 or 18 for city level projects.

Export

Note that after the export has completed, you will still need to save the file to your computer.

Step 7: Load Your Layer into Fulcrum

Layers are added the same way that complete basemaps are added After this step is completed on the web, you will need to download the layer to each device.

We hope that this feature can help you get the most out of your data collection projects. As always, if you have any questions, feel free to visit the Help section or find us on Twitter.