Android connecting Heatmaps to current location

Question

I was trying to plot a heatmap on Android device using "Google Map" with the help of tutorial as described here on Google developers, using Android utility library

Using the sample code as described in the tutorial, I implemented the heatmap as below:

As you can see, the heat map locations are displayed in Green circles and dots, but actually, I wanted to achieve something like below:

That is connecting the heat map via a line to the current location.

Any idea or help?

try to pass these lat & lng to draw a poly line with color red — Tara, Aug 06 '18 at 09:31
https://stackoverflow.com/questions/17425499/how-to-draw-interactive-polyline-on-route-google-maps-v2-android try this — Tara, Aug 06 '18 at 09:34
this is polyline with color red try to draw poly line according to lat lng — Tara, Aug 06 '18 at 09:35
@WaleedAsim thanks for the guidance, I will try to implement it — Tejashwi Kalp Taru, Aug 06 '18 at 09:45
https://stackoverflow.com/questions/47492459/android-google-maps-draw-a-route-between-two-points-along-the-road its another tutorial — Tara, Aug 06 '18 at 09:49

Andrii Omelchenko · Accepted Answer · 2018-08-07T18:23:49.600

You can use SphericalUtil.interpolate() from Google Maps Android API Utility Library to get additional points between your source points and sent it to HeatmapTileProvider to get "heat map line". For example, with this code:

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    // Create the gradient.
    int[] colors = {
            Color.rgb(102, 225, 0), // green
            Color.rgb(255, 0, 0)    // red
    };

    float[] startPoints = {
            0.2f, 1f
    };

    Gradient gradient = new Gradient(colors, startPoints);

    final List<LatLng> sourcePolyPoints = new ArrayList<>();
    sourcePolyPoints.add(new LatLng(28.537266, 77.208099));
    sourcePolyPoints.add(new LatLng(28.536965, 77.209571));
    sourcePolyPoints.add(new LatLng(28.536786, 77.209989));
    sourcePolyPoints.add(new LatLng(28.537886, 77.210205));
    sourcePolyPoints.add(new LatLng(28.537886, 77.210205));

    final List<LatLng> interpolatedPolyPoints = new ArrayList<>();
    for (int ixPoint = 0; ixPoint < sourcePolyPoints.size() - 1; ixPoint++) {
        int nInterpolated = 50;
        for (int ixInterpolated = 0; ixInterpolated < nInterpolated; ixInterpolated++) {
            LatLng interpolatedPoint = SphericalUtil.interpolate(sourcePolyPoints.get(ixPoint),
                    sourcePolyPoints.get(ixPoint + 1), (double) ixInterpolated / (double) nInterpolated);
            interpolatedPolyPoints.add(interpolatedPoint);
        }
    }

    // Create the tile provider.
    mProvider = new HeatmapTileProvider.Builder()
            .data(interpolatedPolyPoints)
            .gradient(gradient)
            .build();

    // Add the tile overlay to the map.
    mOverlay = mGoogleMap.addTileOverlay(new TileOverlayOptions().tileProvider(mProvider));

    mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(28.536965, 77.209571), 16));
}

you get smooth "heatmap line" between your source points, like that:

You can adjust color and width of "heatmap line" by HeatmapTileProvider parameters. And if you need polyline only on road you can use Snap to Road part of Google Maps Roads API or examples provided in Waleed Asim comments.

Android connecting Heatmaps to current location

1 Answers1