MapBox layer

MapBox enables easily add fast beautiful maps to your sites and apps. With Nutiteq Android SDK it will be even more beautiful.

Basic MapBox usage is very simple: you just use TMSMapLayer, and modify URL based on your account and map IDs. Note that following example URL is watermarked, you should create your own account and your own layer for official use. But it is ok to use the example to get up and running.

 // use global OSM from MapBox
 mapBaseLayer = new TMSMapLayer(new EPSG3857(), 0, 8, 12, 
   "http://a.tiles.mapbox.com/v3/examples.map-vyofok3q/", "/", ".png");
 mapView.getLayers().setBaseLayer(mapBaseLayer);


 // and/or add my tiles as overlay
 mapLayer = new TMSMapLayer(new EPSG3857(), 0, 8, 13,
   "http://a.tiles.mapbox.com/v3/"+account+"."+map+"/", "/", ".png");
 mapView.getLayers().addLayer(mapLayer);

But it will become more interesting if you use UTFGrid feature, which enables to add interactivity to raster maps without using any real vector data. We have a special DataSource definition - MBOnlineRasterDataSource with UTFGridRasterLayer which can do this also. Setting the click handlers and tooltips up requires a bit more code:

        // 3. Define map layer for basemap - mandatory.
        // we use here nutiteq account sample

        MBOnlineRasterDataSource dataSource = new MBOnlineRasterDataSource(new EPSG3857(), 0, 19, MAPBOX_ACCOUNT, MAPBOX_MAPID);
        UTFGridRasterLayer mapLayer = new UTFGridRasterLayer(dataSource, dataSource, 334);
        mapView.getLayers().setBaseLayer(mapLayer)

        // add a layer and marker for click labels
        // define small invisible dummy Marker, as Label requires some Marker 
        Bitmap pointMarker = UnscaledBitmapLoader.decodeResource(getResources(), R.drawable.point);
        MarkerStyle markerStyle = 
           MarkerStyle.builder().setBitmap(pointMarker).setSize(0.01f).setColor(0).build();

        //  define s label as WebView to show HTML in label contents
        WebView labelView = new WebView(this); 
        // It is important to set size, exception will come otherwise
        labelView.layout(0, 0, 150, 150);
        Label label = new ViewLabel("", labelView, new Handler());
        
        Marker clickMarker = new Marker(new MapPos(0,0), label, markerStyle, null);
        
        MarkerLayer clickMarkerLayer = new MarkerLayer(new EPSG3857());
        clickMarkerLayer.add(clickMarker);
        mapView.getLayers().addLayer(clickMarkerLayer);
		
        // add event listener
        UTFGridLayerEventListener mapListener = new UTFGridLayerEventListener(this, mapView, mapLayer, clickMarker);
        mapView.getOptions().setMapListener(mapListener);

        // download Metadata, add legend and tooltip listener hooks
        LoadMetadataTask task = new LoadMetadataTask(mapListener, MAPBOX_ACCOUNT, MAPBOX_MAPID);
        task.execute();

For UTFGridLayerEventListener.java see AdvancedMap3D project

In addition to basic map tiles it will load two pieces of information:

a) tileset metadata (map.json URL), once per layer. We need template for tootip and map legend from there. Also we read map bounds to center map nicely.

b) all the .grid.json files for every loaded tile, so with click on map it can show immediate tooltip

When you click on map, then:

1. it will search data from UTFGrid json,
2. creates tooltip contents using template from tileset metadata, in other words generates HTML)
3. uses WebView to render it
4. puts the WebView to map tooltip label.
5. handles click on label to open URL from the tooltip

The AdvancedMap3D has MapBoxMapActivity which uses a sample map, as bundled with TileMill.