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. Something like:

 // 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://api.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. AdvancedMap3D application has special layer MapBoxMapLayer.java which can do this also. Setting the click handlers and tooltips up requries a bit more code:

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

        final MapBoxMapLayer mapLayer = new MapBoxMapLayer(new EPSG3857(), 0, 8, 14,
           "nutiteq", "geography-class");
        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
        final UtfGridLayerEventListener mapListener = new UtfGridLayerEventListener(this, 
           mapView, mapLayer, clickMarker);
        mapView.getOptions().setMapListener(mapListener);

        // download Metadata, add legend and tooltip listener hooks
        LoadMetadataTask task = new MapBoxMapLayer.LoadMetadataTask(this, mapListener, "nutiteq", "geography-class");
        task.execute();

What does MapBoxMapLayer do? 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 TileMill.