Skip to content

adampax/titanium-mapbox

Repository files navigation

Mapbox IOS SDK Wrapper for Titanium

Uses the Mapbox iOS SDK develop branch.

Animation

Use

Put the compiled zip in your project, and add a reference in tiapp.xml. Built using Ti SDK 3.2.1.GA, tested on iOS 7.

Example

var mapbox = require('com.polancomedia.mapbox');

var mapView = mapbox.createView({
    map: 'control-room',
    //map: 'road-trip',
    minZoom: 0,
    maxZoom: 6,
    zoom: 10,
    accessToken: 'pk.xyz.abc', //REQUIRED!!!
    centerLatLng: [20.7972,-88.1598],
    width: Ti.UI.FILL,
    height: Ti.UI.FILL
});

win.add(mapView);
win.open();

See more examples in the example folder.

Sample Maps

The example folder contains two sample mbtiles maps:

control-room

  • Zoom levels 0 through 6
  • Full-world coverage

road-trip

  • Zoom levels 7 through 12
  • Only contains subset of world coverage

Properties

map

  • Required, path to local mbtiles file in Resources directory (include .mbtiles extension in string) or an online MapBox or a resolved path ( file.resolve(); ) of a file in the Application Data directory, or a TileStream id that looks something like: userName.map-szwegi5m.

accessToken

debugTiles

  • Optional, defaults to false.
  • Show grid with tile info to help with debugging.

hideAttribution

  • Optional, defaults to false.
  • Displays info button in corner of map.
  • See Mapbox Terms and Conditions for attribution info.

userLocation

  • Optional, defaults to false.
  • Displays the user's location on map.

backgroundColor

  • Optional, defaults to tan or beige or something like that
  • Background color of the map when tile is loading or not available
  • Useful to set this to the base color of your map if your map's colors contrast with the default color

Methods

clearTileCache()

  • Remove all tile images that were cached while viewing a remote map.

setZoom(4)

  • Zoom the map. Accepts a float to set the zoom level

setCenterLatLng([18.467354,-91.903534])

  • Centers the map on a latitude and longitude.

Map Events

'mapViewRegionDidChange'

  • Fires any time the map moves

'singleTapOnMap'

  • Returns coordinates of where the map was single tapped as latitude and longitude.

'longPressOnMap'

  • Returns coordinates of where the map was long-pressed as latitude and longitude.

Annotations

See Wiki Note: Annotations are a work in progress. You can set them like this:

mapView.setAnnotation({
	latitude: 18.467354,
	longitude: -91.903534,
	title: 'Test Title',
	subtitle: 'Subtitle'
});

Or you can also add them like the standard Ti map annotations:

var a1 = mapbox.createAnnotation({
	latitude: 18.467354,
	longitude: -91.903534,
    //markerImage: 'images/sample.png', //custom image for Annotation/Marker (optional)
	title: 'Test Title',
	subtitle: 'Subtitle'
});
mapView.addAnnotation(a1);

Shapes, Polygons, Routes, Lines

See Wiki

Just keep in mind that stuff like annotation-level setter/getters aren’t yet available.

Annotation and Shape Events

tapOnAnnotation

  • Returns info of selected Annotation (Heads up, event name and info may change).

Todos

  • Need to verify that min, max and default zoom levels work for maps that don't contain full-world (like road-trip).
  • Add support for remote maps
  • Add support for custom markers and other SDK items
  • Make mapbox.createAnnotation() and mapView.addAnnotation(annotation) interfaces similar to current Ti Map implementation
  • Full annotation support with events, images, clustering, polygons
  • Contributions welcome

Contributors

Big shout out to these folks for contributing to titanium-mapbox development. Thanks!

About

License

MIT License Copyright (c) 2013-2014 Polanco Media, LLC

Uses MapBox iOS SDK, (c) 2008-2014 MapBox and Route-Me Contributors