Dynamic styling (30)
Color dependent on zoom level
Make a property depend on the map zoom level, in this case, the water layers fill color.
Marker following route
Using a map matched GeoJSON route, the marker travels along the route at consistent speed.
Picture in picture
Use the Android O release of picture-in-picture to maintain a map in a separate window.
Pulsing layer opacity
Use the style API to highlight parks, hotels, and attractions. A pulsing animation is also added to the colors.
Button interaction styling
Change various properties of a map based on user interaction and other runtime situations.
Add markers via SymbolLayer and manipulate the data in real time. A Mapillary integration is also showcased in this example.
Multiple text formats
Use a format expression to style labels with multiple languages, fonts, sizes, and colors.
Transparent render surface
Create a transparent background and fill it with something such as moving water.
Display 3D building height based on vector data
Use extrusions to display 3D building height based on imported vector data.
Extrude polygons for 3D indoor mapping
Create a 3D indoor map with the fill-extrude-height paint property.
Rotate and tilt with 3D buildings
Rotate and tilt device to change camera and see all around 3D buildings.
Data visualization (33)
Use the Android system's fingerprint unlock to reveal "personal" data on a map.
Circle icon toggle
Use layer filters and feature properties to create the visual effect of toggling between circles and icons when they're tapped on.
Circle to icon transition
Use expressions to create a smooth visual transition from circles to icons.
Create a line layer
Create a GeoJSON line source, style it using properties, and add the layer to the map.
Data time lapse
Use data-driven styling to visualize point data with a time lapse effect; rainfall in China in this example.
Join local JSON data with vector tile geometries
Style a choropleth map by merging local JSON data with vector tile geometries.
Line behind moving icon
Draw a line behind a moving SymbolLayer icon which moves along a Mapbox Directions API route.
Icon setting based on Feature property
Create a SymbolLayer and set the iconId to be dependent on each Feature's property key-value pair.
Style lines using an identity property function
Using an identity line-color property function for a visualization.
Use a ValueAnimator to adjust SymbolLayer icons' rotation values and create a spinning effect.
Update a choropleth layer by zoom level
Style a choropleth map with data-driven styling, local JSON data, and vector tile geometries.
Querying the map (3)
Query a map feature
Click the map to add a marker at the location and display the maps property information for that feature.
Map style (4)
Local style or custom raster style
Load a locally stored map style JSON file or custom raster style via a URL.
User interaction (12)
Symbol layer icon size change
Query the map and animate the change in a SymbolLayer icon's size if clicked on.
Show a smaller inset map fragment and link it to a larger map for two map interaction. Great for gaming.
Rather than showing the directions route all at once, have it 'snake' from the origin to destination.
Device location (7)
Custom pulsing location
See how to customize the LocationComponent pulsing circle's color, speed, and opacity.