On a beautiful day in Berkeley, the Mapbox team met up with 3D Robotics to fly an Aero fixed-wing drone. Here’s what we did when we landed, and how Mapbox connects drones to the web.

Flying with 3D Robotics in Berkeley, CA

Piecing together the imagery

Straight off the bird, we have a collection of beautiful but disorganized images: useful raw data, but impossible to browse as a map. To rearrange and stitch these images together, we use software like PhotoScan and Pix4D to create a mosaic. In this case, we used Pix4d - we import images, select GeoTIFF as output, and let it run.

Adding flight data to Pix4D

Rendering and uploading the map

After Pix4D has processed the imagery, we import the resulting GeoTIFF into TileMill, Mapbox’s map design studio. In TileMill, follow these steps to make sure your imagery looks great:

  • To remove the black border from around the imagery, set nodata=0. Usually this value is 0 but the value can vary and can be checked in QGIS
  • Increase the raster -mesh-size. This will make sure reprojection artifacts do not appear.
  • Set map-background:transparent. This will make the map look better when overlayed on other imagery.
  • Set raster-scaling:lanczos;. This will ensure your imagery is nice and clear. It will also increase your processing time, but it’s worth it.

Once all TileMill parameters are set, upload the imagery to Mapbox by clicking Export —> Upload.

Final Result on top of Mapbox Satellite once uploaded to Mapbox.com and styled with mapbox.js.

Sharing the map

Once you’ve uploaded your map to Mapbox, you can combine the imagery with Mapbox Streets, Satellite, or any other layer you have uploaded previously. From there you can share the map with a URL or a YouTube-like embed. For more control, you can use Mapbox.js. For instance, the example above is a simple timeline built with Mapbox.js.

If you have any questions around creating maps from drone imagery or if you would like to share results of your recent flights, hit me up on Twitter @bobws.