We’re introducing runtime styling in the upcoming release of our Android SDK. Runtime styling gives developers a new level of customization and a toolbox to design experiences directly in their code. Now you can adjust the color of a map to the local time of day, change text labels based on localization settings on the device, or use a heat-map to change the color of buildings on the fly.
While we’re polishing the final release, here’s a preview of some of the magic available in our current beta.
Indoor maps
Runtime styling allows you to add, remove, or modify map layers on the fly, offering new ways to present data on a map. For this demo, we mapped out the interior of The White House, saved in a GeoJSON file. Here’s how you add the data as a source to the map and create a layer from the data:
// Load in the GeoJSON file and add as a new source.indoorBuildingSource=newGeoJsonSource("indoor-building",<loadGeoJSONhere>);mapboxMap.addSource(indoorBuildingSource);FillLayerindoorBuildingLayer=newFillLayer("indoor-building-fill","indoor-building").withProperties(fillColor(Color.parseColor("#eeeeee")),// Function.zoom is used here to fade out the indoor layer if zoom level is beyond 16. Only// necessary to show the indoor map at high zoom levels.fillOpacity(Function.zoom(0.8f,stop(17,fillOpacity(1f)),stop(16.5f,fillOpacity(0.5f)),stop(16,fillOpacity(0f)))));map.addLayer(indoorBuildingLayer);
Now add different data sources for each floor level to modify the map whenever a user selects a different floor:
Highlight map features
This example lets the user explore parks, hotels and attractions in Los Angeles.
Runtime styling allows you to customize the look of existing layers in the map style. To keep the map neat and informative, users simply toggle the layers they are interested in. The pulsing animation of a layer being toggled on or off is the result of using a ValueAnimator, typically used in Android:
finalFillLayerparks=(FillLayer)mapboxMap.getLayer("parks");parkColorAnimator=ValueAnimator.ofObject(newArgbEvaluator(),Color.parseColor("#7ac79c"),// Brighter shadeColor.parseColor("#419a68")// Darker shade);parkColorAnimator.setDuration(1000);parkColorAnimator.setRepeatCount(ValueAnimator.INFINITE);parkColorAnimator.setRepeatMode(ValueAnimator.REVERSE);parkColorAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){@OverridepublicvoidonAnimationUpdate(ValueAnimatoranimator){parks.setProperties(fillColor((int)animator.getAnimatedValue()));}});parkColorAnimator.start();
Next to runtime styling, the upcoming Android SDK release lets you query the map to get features, cluster GeoJSON markers, and improves map performance and stability.
Ready to put runtime styling to the test? Get started by downloading our demo application or update your Mapbox dependency to4.2.0-beta.5.