Scale bar

Join the Mapbox Developers Discord Communityarrow-right

Not compatible with the Maps SDK v10

This plugin is not compatible with the Maps SDK v10 or higher. The Maps SDK v10 and higher comes with scale bar functionality built in. See the Scale bar documentation.

The Scale Bar Plugin for Android displays numbers and a line to help visualize how far various map features are from one another at a certain zoom level. The scale bar can be customized with options such as the text color and size, refresh interval, margins, and border width.

example

Scale bar

View a demo of using the plugin to add and style the scale bar.

chevron-right

Install the Scale Bar Plugin

To start developing an application using the Scale Bar Plugin, you'll need to add the appropriate dependencies inside your build.gradle file. You can find the dependency given below on MavenCentral.

Android's 64K method count limit

If your application is over the 64K method limit, you can shrink, obfuscate, and optimize your code with R8 or ProGuard. If those steps do not lower your method count below 64K, you can also enable multidex.

Add the dependency

1. Start Android Studio.
2. Open up your application's build.gradle.
3. Make sure that your project's minSdkVersion is API 14 or higher.
4. Under dependencies, add a new build rule for the latest mapbox-android-plugin-scalebar-v9.
5. Click the Sync Project with Gradle Files near the toolbar in Studio.

repositories {
  mavenCentral()
}

dependencies {
  implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-scalebar-v9:0.5.0'
}

Add the scale bar

Initialize the plugin inside of onStyleLoaded because the Scale Bar Plugin requires the mapboxMap object and the scale bar is rendered on top of the map.

Java

Kotlin

override fun onMapReady(mapboxMap: MapboxMap) {
	mapboxMap.setStyle(Style.MAPBOX_STREETS) { style ->

		val scaleBarPlugin = ScaleBarPlugin(mapView!!, mapboxMap)

		// Create a ScaleBarOptions object to use the Plugin's default styling		
		scaleBarPlugin.create(ScaleBarOptions(this))
	}
}

Customizing the scale bar

The plugin's ScaleBarOptions provides many options for customizing the look of the scale bar and how the scale bar responds to map interaction. Once you create a ScaleBarOptions object, you can run various styling methods to set your preferences. Once you're done styling the scale bar the way that you'd like, give the ScaleBarOptions object to the ScaleBarPlugin object via the create() method.

Java

Kotlin

override fun onMapReady(mapboxMap: MapboxMap) {
	mapboxMap.setStyle(Style.MAPBOX_STREETS) { style ->

		val scaleBarPlugin = ScaleBarPlugin(mapView!!, mapboxMap)

		// Set the custom styling via a ScaleBarOptions object
		val scaleBarOptions = ScaleBarOptions(this)
		scaleBarOptions
        .setTextColor(R.color.mapboxRed)
        .setTextSize(40f)
        .setBarHeight(15f)
        .setBorderWidth(5f)
        .setMetricUnit(true)
        .setRefreshInterval(15)
        .setMarginTop(30f)
        .setMarginLeft(16f)
        .setTextBarMargin(15f)

		// Give the plugin the ScaleBarOptions object to style the scale bar
		scaleBarPlugin.create(scaleBarOptions)
	}
}

Scale bar visibility

The ScaleBarPlugin class has a setEnabled() method to adjust the scale bar's visibility. Pass true as a parameter to make the scale bar visible and false to hide the scale bar. The scale bar is visible by default on scaleBarPlugin.create(), which means that you don't have to use setEnabled() to initially show the scale bar.

Java

Kotlin

// To hide the scale bar
	scaleBarPlugin.isEnabled = false

Join the Mapbox Developers Discord Communityarrow-right

Was this page helpful?