How to draw polyline on google map with two different colors between two locations

Santosh Yadav

I have two locations and i am in need two draw polyline between these two location, I am done with drawing the polyline between these locations.

Issue is, that polyline is of one color but due to requirement i have to draw polyline of two different colors as shown in below:- enter image description here

if anyone have some meaningful code snippet or some suggestion to this issue...Thanks in advance

antonio

Since February 15, 2017 you can change the stroke line of a polyline. From the Release Notes (emphasys mine)

This release introduces custom styling for polylines and for the outlines of polygons and circles. Change the stroke pattern from a solid line (default) to your choice of dashes, dots, and gaps. In polylines and polygons, you can specify a bevel or round joint type to replace the default fixed miter joints. You can also change the cap at each end of a polyline from a butt (default) to a square or round cap, or specify a custom bitmap to be used as the cap. The styling of stroke patterns, joint types and start/end caps is available in the full API but not in lite mode.

Take into account that you will need to use Google Play Services 10.2 or above. Thus, in your build.gradle you will need to add:

dependencies {
    compile 'com.google.android.gms:play-services-maps:10.2.0'
}

You can specify the stroke pattern of your polyline but you can't change the color, so you will need to draw a solid polyline and a dashed polypine on top of it to reach your desired pattern (take into account that you will be drawing two polylines instead of just one and this can affect the performance):

List<LatLng> latLngs = new ArrayList<>();
// Add all your LatLngs to the List

// Draw a solid green polyline
mMap.addPolyline(new PolylineOptions()
        .addAll(latLngs)
        .color(Color.GREEN));

// Draw a dashed (60px spaced) blue polyline
List<PatternItem> dashedPattern = Arrays.asList(new Dash(60), new Gap(60));
mMap.addPolyline(new PolylineOptions()
        .addAll(latLngs)
        .pattern(dashedPattern)
        .color(Color.BLUE));

The result looks like this:

enter image description here

You can find more information about the new styling polyline feature here.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I draw polyline Between two location in Google Map using Android?

Multiple polyline between two point in google map

How to use PolyLine to draw path between two coordinates in Swift iOS

How to add marker on google map with two locations?

How to draw a line between two point in Google map?

Adding polyline between two locations google maps api v2

Change pixel colors between two different colors

How to get distance between two locations using Google Distance Matrix

Google Map Draw Polyline between multiple latitude longitude

How can I draw a line between two google map native markers? (Ionic 3, cordova)

How to switch between two different colors with one button using javascript

How to draw a heatmap with grids of different colors in a map?

How to draw single plot with two colors in Pandas

How to draw polyline on google map in android passing json array?

How to get multiple routes between two locations?

How to draw a route between two markers in Google Maps API?

how to draw a route between two markers in google maps

Android Google Map change polyline colors

Draw dotted polyline on Google Map - Android

how to give two different colors to two different text on a button

How to calculate distance between two locations using their lat and long value and find the locations between those two point

How to get a fixed number of coordinates between two points polyline in Javascript

How to draw two-direction traffic map in small two-way street like google traffic?

How to get a bordered picture with two different colors

How to plot the xlabel in two lines of different colors?

How to have two different background colors for a container

How color the background of website two different colors?

Getting the distance between two locations using Google Maps Api (JSON)

Poly line is not appearing between two locations in google maps xamarin android