Examples

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

追加の開発者リソース

Mapbox開発者ディスコード

開発者チートシート

マップボックスサポート

AIに質問

A newer version of the Maps SDK is available

This page uses v9.7.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.10.2, in the Maps SDK documentation.

Filters

Search

Topics

All topicsCameraData visualizationDevice locationDynamic stylingExtrusionsGetting startedImage generationMap styleOfflineQuerying the mapUser interaction

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.

Support map fragment

Include a map fragment within your app using Android support library.

A simple offline map

Download and view an offline map using the Mapbox Maps SDK.

Add a new layer below labels

Using the second argument of addLayer, you can be more precise.

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.

Adjust a layer's opacity

Drag the seek bar to adjust the opacity of a raster layer on top of a map.

Adjust light location and color

Change the location and color of the light shined on extrusions.

Adjust text labels

Adjust the color, size, and fonts of SymbolLayer text fields.

Animate marker position

Animate the marker to a new position on the map.

Animate the map camera

Animate the map's camera position, tilt, bearing, and zoom.

Animated icon movement

Use Android system interpolators to animate SymbolLayer icons movement.

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.

Baseball spray chart

Use the Maps SDK and filters to explore baseball data.

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.

Building outline

Query the building layer and show a building's outline.

Button interaction styling

Change various properties of a map based on user interaction and other runtime situations.

Cache management

Explore the various ways to manage the Maps SDK cache.

Calendar integration

Show calendar event locations on the map.

Change a layer's color

Using layer set to change a layer's fill color.

Change a map's language

Switch the maps language dynamically.

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.

Click on single layer

Click on and highlight a selected GeoJSON polygon.

Click to add photo

Select a photo on the device and add it on the map tap location.

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.

Create hotspots from points

Use the Mapbox Maps SDK to visualize point data as hotspots.

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.

Data time lapse

Use data-driven styling to visualize point data with a time lapse effect; rainfall in China in this example.

Default styles

Use a variety of professionally designed styles with the Mapbox Maps SDK.

Display 3D building height based on vector data

Use extrusions to display 3D building height based on imported vector data.

Display water depth

Use data-driven styling to show bathymetry (water depth) data.

Draw a GeoJSON line

Draw a polyline by parsing a GeoJSON file with the Mapbox Maps SDK.

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.

Draw multiple geometries

Filter and draw multiple geometries from a single GeoJSON file.

Drawing search area

Drag a finger on the map to draw a search area.

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrude-height paint property.

Feature count

Get the feature count inside a bounding box and highlight all the buildings.

Fit camera in bounding box

Position the camera so that all the given markers are in view.

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 setting based on Feature property

Create a SymbolLayer and set the iconId to be dependent on each Feature's property key-value pair.

Icon update based on API response

See the International Space Station location in real time.

Indoor Map

Display an indoor map of a building with toggles to switch between floor levels.

Inset map

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.

Line gradient

Style a line with colored gradient.

Local style or custom raster style

Load a locally stored map style JSON file or custom raster style via a URL.

Location camera options

Use LocationComponent camera options to customize map camera behavior.

Location picker

Drop a marker at a specific location and then perform reverse geocoding.

Mapbox Studio style

Use a custom Mapbox-hosted style.

Marker following route

Using a map matched GeoJSON route, the marker travels along the route at consistent speed.

Multiple expressions

Use multiple expressions to convert and visualize data.

Multiple text formats

Use a format expression to style labels with multiple languages, fonts, sizes, and colors.

Offline manager

Download, view, navigate to, and delete an offline region.

Opacity fade

Adjust the opacity of a satellite raster layer based on zoom level.

Outlined polygon hole

Outline a polygon hole to highlight a revealed region.

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.

RecyclerView Directions

Quickly show the directions route associated with a RecyclerView item.

RecyclerView interaction

Manipulate the map based on recyclerview interactions.

Restrict map panning

Prevent a map from being panned to a different place.

Rotate and tilt with 3D buildings

Rotate and tilt device to change camera and see all around 3D buildings.

Rotating camera

Slowly have the camera circle around a single point.

Satellite land select

View satellite photos and click to outline an area of land.

Search again in an area

Search for certain features once the map is moved. This example finds parks.

Select a building

Use the query feature to select a building, get its geometry and draw a polygon highlighting it.

Share snapshot image

Send and share a map snapshot image.

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.

Show and hide layers

Create a custom layer switcher to display different datasets.

Show heatmap data

Add and customize a heatmap to visualize data.

Show time lapse

Use an image source and a runnable to show data changes over time.

Snaking directions

Rather than showing the directions route all at once, have it 'snake' from the origin to destination.

Snapshot Notification

Show a snapshotted image in a notification.

Spinning icon

Use a ValueAnimator to adjust SymbolLayer icons' rotation values and create a spinning effect.

Style attribution

Adjust the attribution "i" to match a map style, app UI, or color motif.

Style circles categorically

Using a categorical circle-color property function for a visualization.

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.

Styling heatmaps

Gain minute control over heatmap coloring.

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.

Toggle collision detection

Allow or deny text and icons to overlap and collide.

Track device location

Receive updates when the device changes location.

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 an image source

Use an image source to easily display images on the map.

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.

Zoom-based icon switch

Change SymbolLayer icons based on the camera's zoom level.

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

追加の開発者リソース

Mapbox開発者ディスコード

開発者チートシート

マップボックスサポート

AIに質問