Scale bar for Android Maps (Google Maps, OSM, MapBox, Yandex)

Related tags

Maps android-maps
Overview

Map Scale View

Download Android Arsenal

Scale view for any Android Maps SDK (not only Google Maps)

Image

Contributing

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.

Usage

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).

Customization

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)
Comments
  • Incorrect scaling?

    Incorrect scaling?

    I am not sure the scale is correct. See the attached screenshot showing a rural area in the US. The squares are generally roads a mile apart, but the MapScaleView is indicating the distance apart is 2 miles. Seems the scale is incorrectly reporting the distance (as seen in the upper left of the map).

    screenshot_20170428-113627

    opened by ryust 7
  • When tilt != 0

    When tilt != 0

    When tilt != 0 then MapScaleView shows very strange information - from 20 km to 2000 km... Also, what about:

    • change properties dynamically (I know about Clark's fork but can't assign it to my build.gradle);
    • showing scale in miles/kms

    Thank you! :)

    opened by tujger 7
  • Add option to expand from right to left

    Add option to expand from right to left

    Thank you for the great library!

    I tried Issue #9 Please check if you like.

    Setting

    Add to layout xml file.

    app:scale_barExpandLeft="true"

    Default setting is "false".

    screenshot_1533087319

    opened by pentam19 4
  • Can not install, something wrong when sync gradle

    Can not install, something wrong when sync gradle

    Hello, thanks anyway for your repo.

    Can you help me? got this error 😢

    Error:(67, 13) Failed to resolve: com.github.pengrad:mapscaleview:1.2.1 Show in File
    Show in Project Structure dialog

    opened by barayuda 4
  • Add a working Mapbox example

    Add a working Mapbox example

    Fix #27 I used AES to encrypt a personal Mapbox token. The initialization vector and the encrypted token are in different locations. I also added androidx in gradle.properties to allow for better support.

    opened by Haransis 3
  • Update release POM file

    Update release POM file

    I am using a license plugin for Android and noticed that this library does not offer any useful meta information regarding license, owner etc. Would it be possible if someone updates this via the current gradle config?

    The current POM file only includes the name and version of this library.

    Link to your current POM: https://bintray.com/pengrad/maven/download_file?file_path=com%2Fgithub%2Fpengrad%2Fmapscaleview%2F1.4.2%2Fmapscaleview-1.4.2.pom

    opened by AlexanderEggers 3
  • Add centimeters

    Add centimeters

    Miles scale goes down to 1 foot while meters scale goes down to 1 meter. 1 foot = 0.3 meters Therefore the meters scale should go down to 30 centimeters.

    opened by kptlronyttcna 3
  • Dynamic width

    Dynamic width

    Hello,

    Thank you for this very useful library! I quickly grabbed the code and updated it to make the view's width to be dynamic (ie it is updated when the update(...) method is called). This allows for instance to put a semi-transparent background to the MapScaleView, and to get that background's with to be updated.

    Here's are the modifications I made:

    Drawer.java:

        int getWidth(Scales scales) {
            return Math.round(Math.max(scales.top() == null ? 0 : scales.top().length(), scales.bottom() == null ? 0 : scales.bottom().length()) + strokePaint.getStrokeWidth());
        }
    

    MapScaleView.java:

        private void updateScales() {
            Scale top, bottom = null;
    
            if (scaleType == ScaleType.MILES_ONLY) {
                top = mapScaleModel.update(false);
            } else {
                top = mapScaleModel.update(true);
                if (scaleType == ScaleType.BOTH) {
                    bottom = mapScaleModel.update(false);
                }
            }
    
            scales = new Scales(top, bottom);
            requestLayout();
            invalidate();
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int width = measureDimension(desiredWidth(), widthMeasureSpec);
            int height = measureDimension(desiredHeight(), heightMeasureSpec);
    
            mapScaleModel.setMaxWidth(width);
            drawer.setViewWidth(width);
            updateScales();
    
            int realWidth = drawer.getWidth(scales);
    
            setMeasuredDimension(realWidth, height);
        }
    

    And here's a possible result (when I move the map, the scale bar's width is updated, including its background):

    Screenshot_1580217035

    Feel free to incorporate them in your code.

    opened by timautin 2
  • Adaptable tile size

    Adaptable tile size

    Adds support to change the map tile size.

    The TILE_SIZE_METERS_AT_0_ZOOM constant was hardcoded with a tile size of 256x256px, which, while working fine with google maps, returned a wrong scaling with e.g. the mapbox render (#14), which uses 512x512px tiles.

    So instead of hardcoding the TILE_SIZE_METERS_AT_0_ZOOM, it's now calculated according to https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Resolution_and_Scale whenever the tile size gets changed.

    opened by jonas-haeusler 1
  • Add feature to change scale bar expand direction

    Add feature to change scale bar expand direction

    Now the scale bar expand from left to right. Add option to change the direction to expand from right to left (like in google maps).

    ...and thanks for the great lib! 😃

    opened by hannta 1
  • Simple setup scaleView with GoolgeMap, MapboxMap, etc

    Simple setup scaleView with GoolgeMap, MapboxMap, etc

    Client just call scaleView.initWith(map: GoogleMap) when map is ready.

    This method will set all camera move listeners and pass data to scaleView. Maybe add lifecycle param to support unregistering listeners on destroy.

    The google-maps or mapbox sdks should be added as runtime dependencies, to be not included in client app.

    opened by pengrad 0
Releases(1.6.0)
Owner
Stas Parshin
Stas Parshin
A flutter plugin to add Mapbox Navigation into flutter app

mapbox A new Flutter project. Getting Started This project is a starting point for a Flutter plug-in package, a specialized package that includes plat

Dishant Mahajan 2 Dec 30, 2021
Android Maps Extensions is a library extending capabilities of Google Maps Android API v2.

Android Maps Extensions Library extending capabilities of Google Maps Android API v2. While Google Maps Android API v2 is a huge leap forward comapare

Maciej Górski 408 Dec 15, 2022
malik dawar 87 Sep 18, 2022
Maps application in Android Studio using the Maps SDK for android

Google-Maps-Application Maps application in Android Studio using the Maps SDK for android. This app was initially developed in Java, but then was conv

Kyle McInnis 0 Nov 30, 2021
🍃 Organic Maps is an Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MapsWithMe founders.

?? Organic Maps is an Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MapsWithMe founders. No ads, no tracking, no data collection, no crapware.

Organic Maps 4.3k Dec 31, 2022
Curve-Fit is an Android library for drawing curves on Google Maps

Curve-Fit Android library for drawing curves on Google Maps. This library uses Bezier cubic equation in order to compute all intermediate points of a

Sarweshkumar C R 63 Mar 7, 2021
Demo de uso de google maps en Android, charla para el GDG Chimbote

mapasbasico Demo de uso de google maps en Android, charla para el GDG Chimbote Puedes usar este proyecto como base para trabajar con mapas en Android.

Whiston Kendrick Borja Reyna 4 Sep 17, 2021
An android app that uses Google Maps API and SDK to track a user's location and calculate the total distance travelled

Bike Rush is an android app that uses Google Maps API and SDK to track a user's location and calculate the total distance travelled by him or her along with time and average speed.

Ishant Chauhan 21 Nov 14, 2022
Google Maps Api test using marker rotation and routes.

Google Maps Api test using marker rotation and routes. Features ✔️ Kotlin ✔️ DI: Hilt ✔️ Retrofit ✔️ Gson ✔️ View binding ✔️ Coroutines ✔️ AndroidX ✔️

Carlos Adan 39 Jul 15, 2022
EasyRoutes allows you to easily draw routes through the google maps address api.

EasyRoutes EasyRoutes allows you to easily draw routes through the google maps address api. Note: You need to generate an API key from the google cons

Antonio Huerta Reyes 7 Jul 26, 2022
Membuat Custom Tooltip Marker Google Maps

Custom-Tooltip-Marker Membuat Custom Tooltip Marker Google Maps Tutorial Build with Android Studio https://youtu.be/E8ND0YThNiU Tutorial Build with St

Azhar Rivaldi 5 Feb 17, 2022
An app to search nearby businesses on Google Maps & Add Grocery Items to List!

GoStore: Internship Program Project A mobile app is built where the user can search for his nearby locations based on his requirement. Whenever the us

null 7 Nov 28, 2022
Maps SDK for Android Utility Library

Maps SDK for Android Utility Library Description This open-source library contains utilities that are useful for a wide range of applications using th

Google Maps 3.4k Dec 30, 2022
Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL.

Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL.

Mapbox 247 Dec 27, 2022
TileOverlay component for react-native-maps

TileOverlay component for react-native-maps

Joe Julik 1 Apr 10, 2022
App usage tracker which maps your app usage to geo location.

Guilt Guilt is an inspiration from Meta (pun intended), it tracks the apps usage and maps it with geo location data where the app was last used. The a

null 6 Dec 28, 2022
This is a repo for implementing Map pan or drag (up, down, right ,left) to load more places on the Google Map for Android

Challenge Display restaurants around the user’s current location on a map ○ Use the FourSquare Search API to query for restaurants: https://developer.

Mahmoud Ramadan 7 Jul 30, 2022
Android library project that lets you manage the location updates to be as painless as possible

Smart Location Library Android library project that intends to simplify the usage of location providers and activity recognition with a nice fluid API

Nacho Lopez 1.6k Dec 29, 2022
Positional is a location information app for Android with Compass, Clock, Level, Sun and Moon and many other features.

Positional is a location based app that utilizes the device's GPS and fetches various details of the current latitude and longitude data like Altitude, Speed, Address and similar other information and show it in easily understandable format to the user. Alongside this main functionality of being a location app, Positional also provides a separate panel for Compass and Clock, and they serve their own purpose as their name suggests.

Hamza Rizwan 85 Dec 28, 2022