Building Custom Maps for Titanium with Mapbox and OpenStreetMap

Adam PaxtontiConf NY 2014

adampaxton@polancomedia.comgithub.com/adampax@adampax

Overview

• Current Mapping Options in Titanium

• Simple Map Styling with Mapbox

• Crazy Map Stuff with TileMill

• Lunch

Ti Maps Today

• Apple Maps

• Supported through Ti API

• iOS Only

• Google Maps

• Supported for Android through Ti API

• Available for iOS through Community Modules

Some Limitations

• No custom styling

• No complete offline capability*

• Limited map data options

So what?

pinterest.com/timoa/mobile-ui-maps/

Different?

Really Different?

mapbox.com/tilemill/

So what about offline?

Enter Mapbox

• Map design and hosting company

• Pretty much all tools are open source, many written in JavaScript, Node.js (we like)

• Leverage existing dev skills to make maps (sound familiar?)

• Design your map with Mapbox editors, host it on Mapbox with free or paid plan or on your own, display in your app or site with Mapbox SDKs and libraries.

• Pinterest, Foursquare, Evernote, Github

mapbox.com

Mapbox Features

• Free plan, up through enterprise level

• Mapbox Streets - Powered by OpenStreetMap

• Mapbox Terrain ($)

• Mapbox Satellite ($)

• iOS SDK, Android SDK in development

• Mapbox.js - based on Leaflet

• APIs for geocoding, map markers, direct tile image access, routing

• TileMill

And OpenStreetMap

• “The Wikipedia of maps”

• 1.5 Million editors

• 12 Million miles of roads

• 80 Million Buildings

• Powers Mapbox Streets

• Problem with something on your map? Log on to openstreetmap.org, fix it, watch it update on your Mapbox map (and everyone else’s map, too)

mapbox.com/openstreetmap/openstreetmap.org

Other Alternatives

• Online mapping is a big world (h’yuk)

• Other options provide some or most of what we need

• ArcGIS (Esri)

• Nutiteq

• CloudMade

• Mapquest Open

• osmdroid - Android Library

• Route-Me - iOS Library

Simple Example

The Job:

• Design a simple map with Mapbox’s online editor

• Host it on Mapbox

• Display it in our Titanium App

usecloak.com

Mapbox Editor

• Select your colors

• Adjust Hue, Saturation, Lightness, Alpha

• Save and copy the project ID

• Done

More Mapbox Editor Stuff

• Easy styling

• Terrain and satellite layers

• Draw markers, lines, polygons

• Import from geojson, kml, gpx, csv

Add the Map

Alloy Markup!<Window id="win" title="TiCloak">!! <Module id="mapView" module="com.polancomedia.mapbox" map="yourUserName.234jk2l3j" />!</Window>!!

Straight up Titanium!var mapbox = require('com.polancomedia.mapbox');!!var mapView = mapbox.createView({!! map: 'yourUserName.234jk2l3j'!});!!win.add(mapView);

https://github.com/adampax/TiCloak

The Titanium-Mapbox Module

• Wrapper for Mapbox iOS SDK

• github.com/adampax/titanium-mapbox

• Also check out:

• github.com/mapbox/mapbox-ios-sdk

• github.com/mapbox/mapbox-android-sdk

• Contribute!

The Titanium-Mapbox Module

• Supports Mapbox hosted and offline maps

• Tile caching

• Annotations, polygons, lines, routes

• More to come

• More styling

• More data

• More offline

Fun Mode

• Desktop map editor

• OS X, Windows, Linux

• Based on Mapnik

• Powered with Node.js

• Open source

• Turns non map people into map people

TileMill

mapbox.com/tilemill/

TileMill Options

• Read GeoJSON, Shapefiles, KML, PostGIS, SQLite, CSV, etc

• Organize the data as layers

• Style layers with CartoCSS

• Export as MBTiles file

• Load locally in the app

• Host on Mapbox, either on it’s own or as a layer of another map

• Or export as PNG, SVG, PDF, Mapnik XML

mapbox.com/tilemill/

A Layer

The Process

Geodata Import Style Export

oklahoma.geojson #oklahoma #oklahoma { … } oklahoma.mbtiles

CartoCSS Styling

• Map styling language for TileMill

• Looks kind of like CSS

• Supports variables, zoom level-based styling, applying multiple styles to a layer

• mapbox.com/tilemill/docs/manual/carto/

github.com/ajashton/pirate-map

#countries {! ::outline1, ::outline2, ::outline3 {! line-color: @water;! line-width: 1;! line-join: round;! line-opacity: 0.5;! line-comp-op: multiply;! }! ::outline1 { line-smooth: 12; }! ::outline2 { line-smooth: 24; }! ::outline3 { line-smooth: 48; }! polygon-fill: lighten(@water,10);! polygon-opacity: 0.6;!}

MBTiles

• SQLite database, easy to transport

• Store x, y and zoom value of each tile along with a blob image

• Cut out the redundant tiles (how many images of blue ocean do we really need?)

mapbox.com/developers/mbtiles/

Before We Export

• Maps are made up of tiles

• We track x and y values of the tile, plus the zoom (z) level

• z level 0 = Whole world in a single tile

• z level 17 = About a city block

• Each zoom level = 4z tiles

• Entire world at z0 = 1 tile

• Entire world at z17 = bazillion tiles

Zoom 0

mapbox.com/developers/guide/

Zoom 1

Trim Your Map

• Be selective on zoom range

• Trim your map to only export what you need - a city, neighborhood, etc.

• Consider only exporting the layer/zoom level you need, and apply it to the Mapbox Streets map

Where are all the streets and buildings and stuff?

• By default, only country outlines are loaded

• Some public data available through built-in Geodata browser

• OSM Data must be imported manually

• Pretty easy to do with OSM Bright

OSM Bright

• Tutorial for importing OSM data into TileMill

• Script builds TileMill project with default carto templates

github.com/mapbox/osm-bright

Import OSM Data using OSM Bright

• Better OSM Bright instructions:

• mapbox.com/tilemill/docs/guides/osm-bright-mac-quickstart/

• Tips:

• Use Postgresapp and osm2pgsql

• Probably don’t need to download the world. Planet.osm: 400GB

• Use extracts of regions, cities instead

TM2 (development)

• OSM Data built right in! - no more need to download extracts

• Uses vector tiles

• Mobile SDK support still a ways out

github.com/mapbox/tm2

Review

• Use the online Mapbox Editor to easily style street maps of entire world for your app

• Titanium-Mapbox module

• Use TileMill for advanced styling and data display, and to export to MBTiles for offline access

• OSM Bright to get up and running quickly with TileMill and OSM data

Thanks!

Adam Paxtonadampaxton@polancomedia.com