TileMill is a powerful open source map authoring tool, developed by Mapbox. With TileMill, you can transform both vector and raster geodata into beautiful, interactive map packages, which can be loaded into your Fulcrum app and used entirely offline.
Getting Started
While TileMill is an extremely powerful application, it can be somewhat intimidating for first-time or casual users. This guide is designed to help you become more familiar and comfortable using TileMill for creating interactive, offline maps and map packages for use in Fulcrum. For additional information, please refer to the TileMill documentation or visit the Mapbox support forums.
Installing TileMill
TileMill is available for Ubuntu, Windows, and Mac OS X. Consult the documentation for your particular platform and proceed once you have successfully installed the application. If you run into any issues during the install process, refer to the Troubleshooting guide.
The General Process
Load your GIS data into TileMill
Define your layer styles
Setup your Tooltip templates (optional)
Export your MBTiles map package
Upload your MBTiles file to Fulcrum or directly onto your mobile device
TileMill Tips & Tricks
While TileMill technically supports various spatial reference systems, you will save yourself a lot of trouble by ensuring your data is in either WGS84 (EPSG:4326) or Web Mercator (EPSG:900913)You can reproject your data using standard GIS tools such as ArcGIS, QGIS, or GDALThe following GDAL/OGR command will reproject a shapefile in NAD83/New York East (ftUS) State Plane coordinates to WGS84 for use in TileMill:ogr2ogr -f "ESRI shapefile" original.shp wgs84.shp -s_srs EPSG:2260 -t_srs EPSG:4326If you are having trouble figuring out the EPSG code for your shapefile, you may want to check out Prj2EPSG. This web service allows you to upload your .prj file and returns the correct EPSG code.
If you experience significant lag time rendering the map when working with large vector datasets, you may find switching from file-based layers (Shapefile, KML, GeoJSON) to database layers (SQLite, PostGIS) improves performance significantly.
Loading your GIS data into TileMill
Launch TileMill
Create a New ProjectFrom the Projects screen, click the New Project button.Fill in the Project information form with your details. Be sure to include the default world layer and styles to help with positional context.If you want your map tiles to support transparency, be sure to select a PNG image format.
Open your New Project and add some dataFrom the Projects screen, click on the name of the project you just created. You should see the default world layer showing countries.Click the Layers button (1) in the lower left-hand corner of the application.Click the Add Layer button (2) to launch the Add layer form.
Give the layer a CARTO #id or CARTO .class. Make sure to use .class if you would like to share styles across multiple layers.
Assuming you are loading a shapefile, browse out to the file location and click on the Done button.
Select WGS84 from the dropdown for the SRS value.
Click the Save & Style button to proceed.
Zoom to the layer extent by clicking on the magnifying glass next to the layer name in the layer list.
Verify that your layer came into the proper location. You may have to zoom out a bit to view your layer in relation to the country outlines.
Defining Your Layer Styles
TileMill is powered by the Mapnik toolkit and utilizes CartoCSS styling. If you are familiar with CSS, CartoCSS should look recognizable, though the properties are different. CartoCSS is fairly straightforward, but be sure to reference the documentation for the particulars.
Modify your new layer style by referencing the corresponding ID or class in the sidebar to the right of the map. As with standard CSS, classes are prefixed with a . while ID’s are prefixed with a #.
Note that we’ve commented out the Map and #countries styles. Now that we have confirmed our data came into the proper location, we want to hide these reference layers.
Make sure to click the Save button after making any edits to refresh the map and preview your changes.
Setting Up Tooltip Templates for Feature Interaction
If you are simply trying to create an offline basemap to view in Fulcrum, feel free to skip this step. If you are working with raster data, such as an aerial image, there are no attributes to display and you can simply export out the image tiles in the next step. However, if you are working with vector data, it is often advantageous to be able to view the attributes associated with each feature. TileMill takes advantage of UTFGrid technology to efficiently encode attribute data for use in MBTiles map packages.
Open the Templates panel by clicking on the pointer button on the bottom left.
Fulcrum currently supports the Teaser and Full template objects. The Teaser can be thought of like a Title, while the Full object contains additional information.
After selecting the layer you want to be interactive, you are presented with a list of mustache tags, representing the data attributes of the layer. These tags will be replaced by the actual data in the map package.
For security purposes, Templates have limited support of HTML. Styles <strong> and line breaks <br> are supported, but hyperlink tags <a> appear to be sanitized and removed from the MBTiles file. Note- these tags can be manually added outside of TileMill by editing the “metadata” table in the resulting .mbtiles SQLite file.
To preview the feature interaction, make sure to click the Save button after defining your templates. Hover over a feature to view the Teaser and click on a feature to view the Full information.
This TileMill example:
Looks like this in Fulcrum:
Upload Offline MBTiles Map Package
Now that you have created a custom offline MBTiles map package, you can load this file directly onto your mobile device, here's how to do that for your device:
Notes
The Tompkins County, NY tax parcel data used in this guide is freely available for download via the Cornell University Geospatial Information Repository.