MapBox Android版开发 5 示例清单

MapBox Android版开发 5 示例清单

• [Examples for v9](#Examples for v9)
• [View Examples for v11](#View Examples for v11)
• [Jetpack Compose Examples for v11](#Jetpack Compose Examples for v11)

MapBox官网V9和V11版示例汇总

Examples for v9

title	descriptions
Create a simple map view	Learn how to quickly display a Mapbox Street map in your app.
Dynamically build a map view	Add a mapview in a dynamically created layout.
Inset map	Show a smaller inset map fragment and link it to a larger map for two map interaction. Great for gaming.
Picture in picture	Use the Android O release of picture-in-picture to maintain a map in a separate window.
RecyclerView interaction	Manipulate the map based on recyclerview interactions.
Support map fragment	Include a map fragment within your app using Android support library.
Default styles	Use a variety of professionally designed styles with the Mapbox Maps SDK.
Change a map's language	Switch the maps language dynamically.
Adjust light location and color	Change the location and color of the light shined on extrusions.
Basic pulsing location	Show the basic LocationComponent pulsing circle.
Biometric fingerprint	Use the Android system's fingerprint unlock to reveal "personal" data on a map.
Calendar integration	Show calendar event locations on the map.
Custom pulsing location	See how to customize the LocationComponent pulsing circle's color, speed, and opacity.
Customized location icon	Use LocationComponent options to customize the user location information.
Location picker	Drop a marker at a specific location and then perform reverse geocoding.
Shared preferences	Use the Android system's Shared Preferences to save and retrieve coordinates.
Show a user's location	Use the LocationComponent to show the user's current location on the map.
Show a user's location on a map fragment	Use the LocationComponent to display a user's location on a map fragment.
Track device location	Receive updates when the device changes location.
Animate the map camera	Animate the map's camera position, tilt, bearing, and zoom.
Fit camera in bounding box	Position the camera so that all the given markers are in view.
Location camera options	Use LocationComponent camera options to customize map camera behavior.
Restrict map panning	Prevent a map from being panned to a different place.
Rotating camera	Slowly have the camera circle around a single point.
Animated icon movement	Use Android system interpolators to animate SymbolLayer icons movement.
Icon setting based on Feature property	Create a SymbolLayer and set the iconId to be dependent on each Feature's property key-value pair.
Symbol layer icon size change	Query the map and animate the change in a SymbolLayer icon's size if clicked on.
Symbol layer icons	Use a SymbolLayer to display icons on the map.
Symbol layer info window	Use SymbolLayer and icons to show data in a BubbleLayout "info window".
SymbolLayer clustering	Use GeoJSON and SymbolLayer icons to view clustered images.
SymbolLayer icons	Add markers via SymbolLayer and manipulate the data in real time. A Mapillary integration is also showcased in this example.
Text anchor position	Adjust the anchor position of SymbolLayer text fields.
Zoom-based icon switch	Change SymbolLayer icons based on the camera's zoom level.
Animate marker position	Animate the marker to a new position on the map.
Click to add photo	Select a photo on the device and add it on the map tap location.
Marker following route	Using a map matched GeoJSON route, the marker travels along the route at consistent speed.
Line behind moving icon	Draw a line behind a moving SymbolLayer icon which moves along a Mapbox Directions API route.
Draw a polygon	Draw a vector polygon on a map with the Mapbox Maps SDK.
Draw a polygon with holes	Draw a vector polygon with holes on a map using the Mapbox Maps SDK.
Outlined polygon hole	Outline a polygon hole to highlight a revealed region.
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 radius	Set the radii of a circle layer's circles based on a data property.
Circle to icon transition	Use expressions to create a smooth visual transition from circles to icons.
CircleLayer clusters	Use GeoJSON and circle layers to visualize point data in clusters.
Style circles categorically	Using a categorical circle-color property function for a visualization.
Multiple text formats	Use a format expression to style labels with multiple languages, fonts, sizes, and colors.
Zoom to show a cluster's leaves	Tap on a cluster and adjust the camera bounds to show the cluster's leaves.
Toggle collision detection	Allow or deny text and icons to overlap and collide.
Mapbox Studio style	Use a custom Mapbox-hosted style.
Local style or custom raster style	Load a locally stored map style JSON file or custom raster style via a URL.
Style attribution	Adjust the attribution "i" to match a map style, app UI, or color motif.
Style lines using an identity property function	Using an identity line-color property function for a visualization.
Style with missing icon	Provide an icon when a Style failed to load one.
Add a new layer below labels	Using the second argument of addLayer, you can be more precise.
Transparent render surface	Create a transparent background and fill it with something such as moving water.
Add a vector tile source	Add a vector source to a map and display it as a layer.
Add a WMS source	Adding an external Web Map Service layer to the map.
Animated image source (GIF)	Show an animated image (GIF) anywhere on the map.
Background fog	Add a gradient on top of a MapView to show a background fog effect.
Create a line layer	Create a GeoJSON line source, style it using properties, and add the layer to the map.
Draw a GeoJSON line	Draw a polyline by parsing a GeoJSON file with the Mapbox Maps SDK.
Draw multiple geometries	Filter and draw multiple geometries from a single GeoJSON file.
Join local JSON data with vector tile geometries	Style a choropleth map by merging local JSON data with vector tile geometries.
Use an image source	Use an image source to easily display images on the map.
Adjust a layer's opacity	Drag the seek bar to adjust the opacity of a raster layer on top of a map.
Adjust text labels	Adjust the color, size, and fonts of SymbolLayer text fields.
Button interaction styling	Change various properties of a map based on user interaction and other runtime situations.
Change a layer's color	Using layer set to change a layer's fill color.
Color dependent on zoom level	Make a property depend on the map zoom level, in this case, the water layers fill color.
Display water depth	Use data-driven styling to show bathymetry (water depth) data.
Highlighted line	Tap on a line and add a highlight effect behind it.
Hillshading	Use elevation data to show and customize hills and mountains.
Icon update based on API response	See the International Space Station location in real time.
Line gradient	Style a line with colored gradient.
Opacity fade	Adjust the opacity of a satellite raster layer based on zoom level.
Pulsing layer opacity	Use the style API to highlight parks, hotels, and attractions. A pulsing animation is also added to the colors.
Show and hide layers	Create a custom layer switcher to display different datasets.
Snaking directions	Rather than showing the directions route all at once, have it 'snake' from the origin to destination.
Spinning icon	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.
Variable label placement	To increase the chance of high-priority labels staying visible, provide the map renderer a list of preferred text anchor positions.
Click on single layer	Click on and highlight a selected GeoJSON polygon.
RecyclerView Directions	Quickly show the directions route associated with a RecyclerView item.
Satellite land select	View satellite photos and click to outline an area of land.
Select a building	Use the query feature to select a building, get its geometry and draw a polygon highlighting it.
Baseball spray chart	Use the Maps SDK and filters to explore baseball data.
Building outline	Query the building layer and show a building's outline.
Drawing search area	Drag a finger on the map to draw a search area.
Feature count	Get the feature count inside a bounding box and highlight all the buildings.
Multiple expressions	Use multiple expressions to convert and visualize data.
Query a map feature	Click the map to add a marker at the location and display the maps property information for that feature.
Search again in an area	Search for certain features once the map is moved. This example finds parks.
Create hotspots from points	Use the Mapbox Maps SDK to visualize point data as hotspots.
Show heatmap data	Add and customize a heatmap to visualize data.
Styling heatmaps	Gain minute control over heatmap coloring.
Data time lapse	Use data-driven styling to visualize point data with a time lapse effect; rainfall in China in this example.
Show time lapse	Use an image source and a runnable to show data changes over time.
Indoor Map	Display an indoor map of a building with toggles to switch between floor levels.
Cache management	Explore the various ways to manage the Maps SDK cache.
Share snapshot image	Send and share a map snapshot image.
Snapshot Notification	Show a snapshotted image in a notification.
A simple offline map	Download and view an offline map using the Mapbox Maps SDK.
Offline manager	Download, view, navigate to, and delete an offline region.
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.
Use GeoJSON data to set extrusion height	Use data-driven styling and GeoJSON data to set extrusion heights.

View Examples for v11

title	descriptions
Create a rotating globe	Display your map as an interactive, rotating globe.
Creating a map view	Customize your map view.
Display a globe	Create a map using the globe projection.
Display a map view	Create and display a map that uses the default Mapbox Standard style.
Inset map	Show a smaller inset map fragment and link it to a larger map for two map interaction. Great for gaming.
Map Fragment	Use a MapView inside a map fragment and fragment backstack.
MapSurface	MapSurface with SurfaceView host and Widget.
Multi display	Display the map on a secondary display.
Multi map fragments	Using multiple map fragments in one Activity.
RecyclerView	MapView integration inside a RecyclerView.
TextureView	Use TextureView as render surface.
ViewPager	Use a MapView inside a ViewPager.
Change the map's style	Switch between custom and default Mapbox styles for the same map view.
DSL styling	Shows runtime styling using dsl.
Runtime styling	Shows runtime styling.
Transparent background	MapView with transparent background.
Work with the Standard style	Use the Standard style and modify settings at runtime.
Localization Plugin	Automatically localize the map labels into the device's current language.
Ornaments	Update margins of ornaments when the map rotates.
Scale Bar	Show scale bar at custom position.
Display the user's location	Display the user's location on a map with the default user location puck.
Location component	Shows location puck on the map.
Location component animation	Animates puck with custom location provider updates.
Simulate a navigation route	Simulate a navigation route with location tracking.
Space station current location	See the International Space Station location in real time.
Advanced Viewport with gestures	Advanced viewport with gestures showcase.
Continue camera animation during gestures	Animate the map camera properties during user gestures.
Fly-to camera animation	Animate the camera changes with the fly-to animation. This causes the camera to ease from a starting point to an end destination.
Restrict map panning	Restrict the map's viewport to a specified set of coordinates for gesture-based camera changes. The viewport can still be changed programmatically.
Using camera animations	Use setCamera to animate the camera position.
Using custom camera animations	Animate the map camera to a new position using camera animators. Individual camera properties such as zoom, bearing, and center coordinate can be animated independently.
Viewport camera	Viewport camera showcase.
Gestures	Manipulate gesture interaction with the map.
Map overlay	Use Map Overlay.
Display multiple icon images in a symbol layer	Add point data and several images to a style and use the switchCase and get expressions to choose which image to display at each point in a SymbolLayer based on a data property.
Add a marker symbol	Add a blue teardrop-shaped marker image to a style and display it on the map using a SymbolLayer.
Add markers to map	Add markers that use different icons.
Animate Marker Position	Animate updates to a marker/annotation's position.
Add Polylines Annotations	Show polyline annotations on a map.
Add a Fill/Polygon Annotation	Show polygon annotations on a map.
Draw a polygon	Draw a vector polygon on a map.
Draw a polygon with holes	Add a polygon layer with interior holes.
Add Circle Annotations	Show circle annotations on a map.
Basic Pulsing Circle	Display the LocationComponent's default pulsing circle.
Style circles categorically	Add point data to a style from a vector tileset and use the match and get expressions to assign the color of each point in a CircleLayer based on a data property.
Add Point Annotations	Show point annotations on a map.
Animate Point Annotations	Animate PointAnnotations on a map.
Dynamic view annotations	Add dynamic view annotations to line layers and fixed coordinates.
View annotation as InfoWindow	Legacy InfoWindow implementation using view annotations.
View annotation with point annotation	Animate a view annotation on screen.
View annotations - advanced example	Add view annotation anchored to a symbol layer feature.
View annotations - animation	Add view annotation to a point annotation.
View annotations - basic example	Add view annotation on a map click.
Add Cluster Symbol Annotations	Show fire hydrants in Washington DC area in a cluster.
Cluster points within a layer	Create a circle layer from a geoJSON source and cluster the points from that source. The clusters will update as the map's camera changes.
Mapbox Studio style	Use a custom style designed in Mapbox Studio.
Add a sky layer	Add a customizable sky layer to simulate natural lighting with a Terrain layer.
Adjust layer order	Insert a specific layer above or below other layers.
Custom Layer	Custom Layer Example using Kotlin.
Display a raster particle layer	Add a Raster Particle Layer to your map.
Native Custom Layer	Custom Layer Example using C++.
Triangle Custom Layer	Triangle Custom Layer Example.
Add animated weather data	Load a raster image to a style using ImageSource and display it on a map as animated weather data using RasterLayer.
Draw a GeoJSON line	Load a polyline to a style using GeoJsonSource and display it on a map using LineLayer.
Draw multiple geometries	Display multiple shapes on a map.
External Vector Source	Add a third party vector tile source.
Geojson performance	Display long route as large geojson.
Raw GeoJSON	Use a GeoJSON string as data for a GeoJSON source through Value API.
Raw Source/Layer	Use a JSON string as an Source/Layer.
TileJson	Using raster source and layer to render OSM tiles with TileSet class.
Use an image source	Use an image source to easily display images on the map.
Vector tile source	Add a vector source to a map using an URL.
WMS Source	Add an external WMS source to your map using TileSet API.
9-patch image	Add 9-patch image to the style.
Animate a line	Animate updates to a polyline.
Animated TextureView	Apply ViewAnimation on a TextureView.
Change icon size	Change icon size with Symbol layer.
Custom Attribution	Custom attribution showcase.
Distance Expression	Show POIs on a map with distance expression filter.
Line behind moving icon	Draw a line behind a moving icon.
Line gradient	Style a line with colored gradient.
Raster Colorization	Raster colorization using raster-color.
Raw Expression	Use a JSON string as an expression.
Show and hide layers	Allow the user to toggle the visibility of a CircleLayer on a map.
Tint a fill layer	Add an image to a style and use it to display a pattern in the landuse FillLayer in the Mapbox Streets style.
Feature state	Create interactive hover effects with feature state.
Within expression	Usage of the within expression on a buffered geometry.
Visualize data as a heatmap	Add earthquake frequency data to a style from a GeoJSON file and render it on a map using a HeatmapLayer.
Mapbox Recorder	Showcasing recording / replaying session with MapboxMapRecorder.
Debug mode	Use variations of debug modes of the Map.
Create a snapshot	Create a static, non-interactive image of a map style with specified camera position. The resulting snapshot is provided as a bitmap on Android.
DDS MapSnapshotter	Use data driven styling with static map image generation.
Local Style MapSnapshotter	Use an local style with static map image generation.
MapView Snapshot	Create a bitmap snapshot from a MapView.
Sky Snapshotter	Junction view showcase.
Legacy offline Map	Use OfflineManager to download tiles.
Offline Map	Use OfflineManager to download tiles.
3D Model Layer	Showcase the usage of a 3D model layer.
Add a Line to 3D Terrain	Example showcasing terrain with animating the free camera with a line string.
Display 3D buildings	Extrude the building layer in the Mapbox Light style using FillExtrusionLayer and set up the light position.
Display 3D buildings with 3D lights	Extrude the building layer in the Mapbox Standard style and set up the light position.
Use 3D Terrain	Example that demonstrates realistic map with 3D terrain and atmosphere sky layer.

Jetpack Compose Examples for v11

title	descriptions
Display a map	Create and display a map that uses the default Mapbox Standard style.
Multi display	Display the map on a secondary display.
Multi map	Using multiple MapboxMap in one Activity.
Generic style positions	Showcase positioning of layers and annotations using GenericStyle.
Use style imports	Showcase adding style imports in runtime.
Use style states	Showcase updating atmosphere, projection and lights through style states.
Use style terrain	Showcase updating terrain.
Work with the Standard style	Use the Standard style and modify settings at runtime.
Ornaments	Showcase map ornaments customization.
Location component	Show location puck on the map.
Simulate a navigation route	Simulate a navigation route with location tracking.
Map viewport animation	Use map viewport animations.
Add Polyline Annotations	Show polyline annotations on a map.
Add Polygon Annotations	Show polygon annotations on a map.
Add Circle Annotations	Show circle annotations on a map.
Add Point Annotations	Show point annotations on a map.
Add View Annotations	Show view annotations on a map.
Dynamic view annotations	Add dynamic view annotations to line layers and fixed coordinates.
Add Cluster Symbol Annotations	Show fire hydrants in Washington DC area in a cluster.
Add clip layer	Showcase using clip layer to hide 3D buildings.
Add layers and sources in runtime	Showcase adding layers and sources in runtime.
Add animated weather data	Load a raster image to a style using ImageSource and display it on a map as animated weather data using RasterLayer.
Use an image source	Use an image source to easily display images on the map.
Query rendered features	Showcase query rendered features.
Debug mode	Use variations of debug modes of the Map.
3D Model Layer	Showcase the usage of a 3D model layer.