adampax / titanium-mapbox

Titanium Module Wrapper for MapBox iOS SDK

Mapbox IOS SDK Wrapper for Titanium

Uses the Mapbox iOS SDK develop branch.

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

• Now required due to mapbox API v4 (mapbox-ios-sdk 1.5)
• Find this at https://www.mapbox.com/account/apps/

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!

• nitrag nitrag
• Maik maikkley

About

• Me: Adam Paxton
• Twitter: @adampax
• Work: Polanco Media, LLC

License

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

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

titanium-mapbox's Issues

Image Overlay

Is there currently the ability to add an image overlay to a map that stays bounded to the map? We do work with festivals who typically have custom maps that they want overplayed on top of real map data. Is that possible with this?

add left and right image spaces for annotation bubble

Annotation Click Events not functioning

Hi Adam

Any idea why a click event isn't working when using the "tapOnAnnotation"?
A click is definitely registered on the mapView using "singleTapOnMap" - so is the "tapOnAnnotation" the correct event to be listening for?
I've speculatively tried a few alternatives without success.

Great module by the way, can't wait to fully implement it!

Simon

Return latlng from mapViewRegionDidChange

@adampax first off, great work!

I'm wondering if there is currently a way to get the map center after panning. Right now mapViewRegionDidChange does not return the new map center, I think this would be a good place to surface it. Something like:

mapView.addEventListener('mapViewRegionDidChange', function(e) {
  console.log(e.latlng);
});

images for annotations

Property: Zoom

Hi,

have you or anyone implement a solution for an event-callback over the zoom-property?
Means:
I have an eventlistener "mapViewRegionDidChange" that fires while zooming. But in the event-object i cant check the current zoom status/level.
I will react on zoomlevels, e.g. when i'am in zoom level 11 show no annotations, when i'am in zoom level 14 annotations will be initalized.
Maybe anyone have it implemented yet?

Greets
Maik

Error when minZoom not set

Not setting a minZoom property generates an error:

"CALayer position contains NaN: [nan nan]"

Change colour of Pins

Hi Adam

I noticed that you have a folder with various map pin images in three different colours. The default seems to be set to "pin-blue-png".
What properties do we need to amend to change the pin colour?

Also, can we implement our own pin designs by replacing those in the assets/pins folder?

Thanks
burgons

Annotation click event

Right now the annotation have no click event. This is what I added to add the annotation click event.

On Titanium you have one new event:

MapView.addEventListener("tapOnCalloutAccessoryControl", function(e) {
/* 
* Add your code here!
*
*/
})

On the iOS module:

On the layerForAnnotation:

    marker.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];

    return marker;

and just add after:

- (void)tapOnCalloutAccessoryControl:(UIControl *)control forAnnotation:(RMAnnotation *)annotation onMap:(RMMapView *)map
{
    NSLog(@"You tapped the callout button!");
    @ Add whatever you want here.
}

Is this repository being used and worked on?

Annotation clustering

Impressive work, Adam!

Just wanted to thank you for this great contribution to the Ti community. This is just a curious question, but any idea on when Annotation Clustering will available?

Thanks a lot!

attribution button halfway off the bottom of screen

Properly displays when window has fullscreen:true.

MapBox.com has changed

Their interface and capabilities appear to have change since this README was last written. Do you have an updated set of guidelines to get this up and running with latest appcelerator studio?

Specifically, directions for using their remotely hosted map.

bug annotation

Hello,

I try to add annotations on my mapView, but it doesn't work.
Here the simple code : http://pastebin.com/hjFfCaZE
Error : "nil argument" ... Ok but what argument?

Do you have any idea how to resolve this?

Thanks!

Titanium MapBox for Android?

Greetings:

That possibility exists to migrate this code to Android and to generate this module for that platform. I am currently implementing the same for an app in iOS, but this also will appear on Android.

I appreciate all support and idea about it.

Regards,
Alberto

userLocation (dot) for anyone?

Is this supposed to produce a Blue Dot on the screen? Is this working for anyone?

Exporting mbtiles

Excellent Module!

I got up and running within a few hours! Wow!

I'm getting confused when it comes to saving the mbtiles for offline. I want to use the standard Mapbox Streets vector or a slightly modified one. I'd be happy with either. But I can't find any information on where to download ANYWHERE. I've got a TM2Z file but that doesn't look helpful. And I don't think I need externally hosted tiles.

Help!
Thanks

[Bug] setCenterLatLng is wrong

The location is right (here I use user location to be sure), but the map is not centered.

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

Titanium.Geolocation.getCurrentPosition(function(e){
    mapView = mapbox.createView({
        id: 'mapview',
        map: 'XXXXXXXXXXX',
        minZoom: 6, //8,
        maxZoom: 18, //10,
        zoom: 16,
        centerLatLng: [e.coords.latitude,e.coords.longitude],
        width: Ti.UI.FILL,
        height: Ti.UI.FILL,
        hideAttribution: true,  //defaults to: false. See Mapbox terms and conditions before removing
        debugTiles:false,
        userLocation: true
    });

    $.index.add(mapView);
    $.index.open();
});

Ability to change tile source after creation

It would be great if one could change the tile source after creation as described here

expose backgroundColor property

add ability to set backgroundColor on map view.

Ability to have mbtiles outside of bundle dir

Right now.. I can't for the life of me figure out a way to get the sdk to read mbtiles that are not bundled with the app.

If we want to download a map after the app is compiled, its impossible to load it up..Everything get's downloaded to the Documents dir, outside the bundle.

Anyway to quickly change it?