Use the Android system's fingerprint unlock to reveal "personal" data on a map.
Button interaction styling
Change various properties of a map based on user interaction and other runtime situations.
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.
Color dependent on zoom level
Make a property depend on the map zoom level, in this case, the water layers fill color.
Create a line layer
Create a GeoJSON line source, style it using properties, and add the layer to the map.
Custom pulsing location
See how to customize the LocationComponent pulsing circle's color, speed, and opacity.
Data time lapse
Use data-driven styling to visualize point data with a time lapse effect; rainfall in China in this example.
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.
Icon setting based on Feature property
Create a SymbolLayer and set the iconId to be dependent on each Feature's property key-value pair.
Show a smaller inset map fragment and link it to a larger map for two map interaction. Great for gaming.
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.
Local style or custom raster style
Load a locally stored map style JSON file or custom raster style via a URL.
Marker following route
Using a map matched GeoJSON route, the marker travels along the route at consistent speed.
Multiple text formats
Use a format expression to style labels with multiple languages, fonts, sizes, and colors.
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.
Query a map feature
Click the map to add a marker at the location and display the maps property information for that feature.
Rotate and tilt with 3D buildings
Rotate and tilt device to change camera and see all around 3D buildings.
Select a building
Use the query feature to select a building, get its geometry and draw a polygon highlighting it.
Show a user's location on a map fragment
Use the LocationComponent to display a user's location on a map fragment.
Rather than showing the directions route all at once, have it 'snake' from the origin to destination.
Use a ValueAnimator to adjust SymbolLayer icons' rotation values and create a spinning effect.
Style lines using an identity property function
Using an identity line-color property function for a visualization.
Symbol layer icon size change
Query the map and animate the change in a SymbolLayer icon's size if clicked on.
Add markers via SymbolLayer and manipulate the data in real time. A Mapillary integration is also showcased in this example.
Transparent render surface
Create a transparent background and fill it with something such as moving water.
Update a choropleth layer by zoom level
Style a choropleth map with data-driven styling, local JSON data, and vector tile geometries.
Use GeoJSON data to set extrusion height
Use data-driven styling and GeoJSON data to set extrusion heights.
Variable label placement
To increase the chance of high-priority labels staying visible, provide the map renderer a list of preferred text anchor positions.
Zoom to show a cluster's leaves
Tap on a cluster and adjust the camera bounds to show the cluster's leaves.