Scale view for any Android Maps SDK (not only Google Maps)
I encourage you to participate in this project. Feel free to open issues with bugs or ideas, fork and send pull requests.
Check list of "help wanted" issues to start with.
dependencies {
implementation 'com.github.pengrad:mapscaleview:1.6.0'
}Include in layout file over map
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/mapFragment"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.github.pengrad.mapscaleview.MapScaleView
android:id="@+id/scaleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="4dp"/>
</FrameLayout>With miles or custom style
<com.github.pengrad.mapscaleview.MapScaleView
android:id="@+id/scaleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="4dp"
app:scale_maxWidth="100dp"
app:scale_color="#009"
app:scale_miles="true"
app:scale_outline="true"
app:scale_strokeWidth="3dp"
app:scale_textSize="20sp"
app:scale_expandRtl="true"/>Update on map changed
val scaleView: MapScaleView = findViewById(R.id.scaleView)
val cameraPosition = map.cameraPosition
// need to pass zoom and latitude
scaleView.update(cameraPosition.zoom, cameraPosition.target.latitude)Full example with subscribing to map events and updating scale view
override fun onMapReady(googleMap: GoogleMap) {
map = googleMap
googleMap.setOnCameraMoveListener(this)
googleMap.setOnCameraIdleListener(this)
}
override fun onCameraMove() {
val cameraPosition = map.cameraPosition
scaleView.update(cameraPosition.zoom, cameraPosition.target.latitude)
}
override fun onCameraIdle() {
val cameraPosition = map.cameraPosition
scaleView.update(cameraPosition.zoom, cameraPosition.target.latitude)
}Refer to the sample project on how to use scale view with other Android Maps SDK (Mapbox).
mapScaleView.setColor(@ColorInt int color)
mapScaleView.setTextSize(float textSize)
mapScaleView.setStrokeWidth(float strokeWidth)
mapScaleView.setTextFont(Typeface font)
// enable/disable white outline, enabled by default
mapScaleView.setOutlineEnabled(false)
mapScaleView.metersAndMiles() // default
mapScaleView.metersOnly()
mapScaleView.milesOnly()
// expand scale bar from right to left, disabled by default
mapScaleView.setExpandRtlEnabled(true)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent