Dynamic styling (30)
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.
Color dependent on zoom level
Make a property depend on the map zoom level, in this case, the water layers fill color.
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.
Data visualization (29)
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.
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.
Style lines using an identity property function
Using an identity line-color property function for a visualization.
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.
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.