Giter Club home page Giter Club logo

googlemapsanimations's Introduction

Android Arsenal

[Deprecated]GoogleMapsAnimations

"GoogleMapsAnimations" is an awesome first of its type android library for showing a ripple and radar animations on a google map, e.g show catchment area of an earthquake where ripples have been felt, give prominence to certain markers which need to be highlighted. Also add a ripple when your user is moving on the map and give a #PokemonGo type ripple effect and also add a radar type effect to show users that you are searching in certain area

Below samples show the ripple effect in action:


Download

Using Gradle: under dependencies section:

compile 'com.github.aarsy.googlemapsanimations:googlemapsanimations:1.0.5'

or Using Maven:

<dependency>
    <groupId>com.github.aarsy.googlemapsanimations</groupId>
    <artifactId>googlemapsanimations</artifactId>
    <version>1.0.5</version>
    <type>pom</type>
</dependency>

Documentation

Ripple Animation

Default Ripple animation

Just two lines of code :
Use .startRippleMapAnimation() and .stopRippleMapAnimation() methods to start and stop Animation.
Example is given below (Preview shown above in first sample)

// mMap is GoogleMap object, latLng is the location on map from which ripple should start
MapRipple mapRipple = new MapRipple(mMap, latLng, context);
mapRipple.startRippleMapAnimation();      //in onMapReadyCallBack

@Override
protected void onStop() {
    super.onStop();
    if (mapRipple.isAnimationRunning()) {
        mapRipple.stopRippleMapAnimation();
    }
}

// Start Animation again only if it is not running
if (!mapRipple.isAnimationRunning()) {
    mapRipple.startRippleMapAnimation();
}

Advanced Ripple animation

Example is given below (Preview shown above in second sample)

// mMap is GoogleMap object, latLng is the location on map from which ripple should start
MapRipple mapRipple = new MapRipple(mMap, latLng, context)
                            .withNumberOfRipples(3)
                            .withFillColor(Color.BLUE)
                            .withStrokeColor(Color.BLACK)
                            .withStrokewidth(10)      // 10dp
                            .withDistance(2000)      // 2000 metres radius
                            .withRippleDuration(12000)    //12000ms
                            .withTransparency(0.5f);
                    
mapRipple.startRippleMapAnimation();
// Use same procedure to stop Animation and start it again as mentioned anove in Default Ripple Animation Sample

Update center of ripple as location changes(Needed when user moves)

Just one line of code is needed:
Use .mapRipple.withLatLng(LatLng changedLatlng) method anytime in future to update center of ripple.

// after implementing LocationListener interface to current class use:
@Override
public void onLocationChanged(Location location) {
    mapRipple.withLatLng(new LatLng(location.getLatitude(), location.getLongitude()));
}
//See the sample for more help.

Radar Animation

Simple Clockwise Radar animation

Just two lines of code :
Use .startRadarAnimation() and .stopRadarAnimation() methods to start and stop Animation.
Example is given below (Preview shown above in third sample)

// mMap is GoogleMap object, latLng is the location on map from which ripple should start
MapRadar mapRadar = new MapRadar(mMap, latLng, context)
                            .withDistance(2000)
                            .withOuterCircleStrokeColor(0xfccd29)
                            .withRadarColors(0x00fccd29, 0xfffccd29)
                            //withRadarColors() have two parameters, startColor and tailColor respectively
                            //startColor should start with transparency, here 00 in front of fccd29 indicates fully transparent
                            //tailColor should end with opaqueness, here f in front of fccd29 indicates fully opaque
                            .startRadarAnimation();      //in onMapReadyCallBack

@Override
protected void onStop() {
    super.onStop();
    if (mapRadar.isAnimationRunning()) {
        mapRadar.stopRadarAnimation();
    }
}

Advanced Clockwise and AntiClockwise Radar animation

Example is given below (Preview shown above in fourth sample)

// mMap is GoogleMap object, latLng is the location on map from which ripple should start
MapRadar mapRadar = new MapRadar(mMap, latLng, context)
                            .withDistance(2000)
                            .withOuterCircleStrokeColor(0xfccd29)
                            .withOuterCircleStrokewidth(7)
                            .withOuterCircleTransparency(0.4f)
                            .withClockWiseAnticlockwise(true)		//enable both side rotation
                            .withClockwiseAnticlockwiseDuration(2)
                            //withClockwiseAnticlockwiseDuration(duration), here duration denotes how much cycles should animation makes in 
                            //one direction
                            .withOuterCircleFillColor(0x12000000)
                            .withRadarColors(0x00fccd29, 0xfffccd29)
                            //withRadarColors() have two parameters, startColor and tailColor respectively
                            //startColor should start with transparency, here 00 in front of fccd29 indicates fully transparent
                            //tailColor should end with opaqueness, here f in front of fccd29 indicates fully opaque
                            .withRadarSpeed(5) //controls radar speed
                            .withRadarTransparency(0.4f);
mapRadar.startRadarAnimation();      //in onMapReadyCallBack

@Override
protected void onStop() {
    super.onStop();
    if (mapRadar.isAnimationRunning()) {
        mapRadar.stopRadarAnimation();
    }
}

Update center of radar as location changes(Needed when user moves)

Just one line of code is needed:
Use .mapRadar.withLatLng(LatLng changedLatlng) method anytime in future to update center of radar.

// after implementing LocationListener interface to current class use:
@Override
public void onLocationChanged(Location location) {
    mapRadar.withLatLng(new LatLng(location.getLatitude(), location.getLongitude()));
}
//See the sample for more help.

Build the sample

To build the sample project, enable the project explorer under Android view, just go to res/values and find google_maps_api.xml(debug). Generate a google maps API key for yourself and enter it in this file, the SHA-1 fingerprint already given in the file is mine but you should generate your own. Follow these if you need some help. http://stackoverflow.com/questions/15727912/sha-1-fingerprint-of-keystore-certificate https://developers.google.com/maps/documentation/android-api/start

Compatibility

Minimum Android SDK: This library requires a minimum API level of 14.

License

Copyright 2017 Abhay Raj Singh Yadav(arsy).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

googlemapsanimations's People

Contributors

aarsy avatar hanuor avatar mradzinski avatar ztrap avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

googlemapsanimations's Issues

Ripple effect not show when i have map zoom out.

This is my code.

I tried zoom out my map than not show ripple effect on map.
Help me.

mapRipple = new MapRipple(mGoogleMap, new LatLng(gpsTracker.getLatitude(), gpsTracker.getLongitude()), this);
mapRipple.stopRippleMapAnimation();
mapRipple.withNumberOfRipples(1);
mapRipple.withFillColor(Color.parseColor("#FFA3D2E4"));
mapRipple.withStrokeColor(Color.BLACK);
mapRipple.withStrokewidth(0); // 10dp
mapRipple.withDistance(15); // 2000 metres radius
mapRipple.withRippleDuration(2000); //12000ms
mapRipple.withTransparency(0.5f);
mapRipple.startRippleMapAnimation();

Out of memory

com.arsy.googlemapsrippleeffect E/dalvikvm-heap: Out of memory on a 67108880-byte allocation.

Unable to add as Gradle Dependency

Hi, Thanks firstly for such a cool library. I'm facing some issue in syncing the dependency in my project can you suggest some work around for it.

canot compile library

Warning:Module 'com.github.aarsy.googlemapsanimations:googlemapsanimations:1.0.3' depends on one or more Android Libraries but is a jar

Cool library but very unacceptable performance

This library is just wrecking my google map, sometimes it freezes and crashes. I'm using the ripple and sometimes the ripples stutter then I have two ripples next to each other out of rhythm.

I also get an out of memory error sometimes: java.lang.OutOfMemoryError: Failed to allocate a 268435468 byte allocation with 16777216 free bytes and 184MB until OOM

Very cool library but it needs to be refactored when an emphasis on better memory management and performance.

        gOverlays[0] = googleMap.addGroundOverlay(new
                GroundOverlayOptions()
                .position(latLng, (int) distance)
                .transparency(transparency)
                .image(BitmapDescriptorFactory.fromBitmap(backgroundImage)));

I mean does that create a bitmap every time you create an overlay?: BitmapDescriptorFactory.fromBitmap(backgroundImage) why not just do it once and store it in a variable?

Out of memory

Its work perfect in 6.0.1 but error in some device mostly in lollipop

E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.coincide.ridetog, PID: 12679
java.lang.OutOfMemoryError: Failed to allocate a 81000012 byte allocation with 16775712 free bytes and 60MB until OOM
at dalvik.system.VMRuntime.newNonMovableArray(Native Method)
at android.graphics.Bitmap.nativeCreateFromParcel(Native Method)
at android.graphics.Bitmap.access$000(Bitmap.java:32)
at android.graphics.Bitmap$1.createFromParcel(Bitmap.java:1484)
at android.graphics.Bitmap$1.createFromParcel(Bitmap.java:1476)
at com.google.android.gms.maps.model.internal.b.onTransact(:com.google.android.gms.DynamiteModulesB:101)
at android.os.Binder.transact(Binder.java:380)
at uyr.a(:com.google.android.gms:242)
at uqu.a(:com.google.android.gms:1252)
at uqw.a(:com.google.android.gms:187)
at uqo.a(:com.google.android.gms:6164)
at uyq.onTransact(:com.google.android.gms:106)
at android.os.Binder.transact(Binder.java:380)
at com.google.android.gms.maps.model.internal.zza$zza$zza.zze(Unknown Source)
at com.google.android.gms.maps.model.BitmapDescriptorFactory.fromBitmap(Unknown Source)
at com.arsy.maps_library.MapRipple$1.run(MapRipple.java:133)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5247)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:707)

How to achieve a blue dot ?

i'm trying to achieve the same result as you have on your first image.
the blue dot with transparent radius effect. but for some reason all i see is huge dot and it's not small at all. I have tried to customized it but still it's big as hell.
is it possible to achieve the same result as your first image ? i was sure it was the default settings.
Thank you so much for this great library.

Use with MapBox?

Is this library/functionality interop with Mapbox's SDK?

thanks for your work!

Fixing

Change the center of ripple whenever latlng changes ๐Ÿ’ฏ

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.