CODEWITHSUNDEEP
androidxamarin.androidmapbox
Zidar
Zidar

Reputation: 21

How to color polyline/GeoJSON line by speed/altitude in MapBox?

I want to draw a GPS track on a map (MapBox) and color its points by speed or altitude. So I need a custom drawer for the track.

MapBox Android SDK provides an example of drawing a polyline with customized style: https://www.mapbox.com/android-sdk/examples/add-a-geojson-line/ But still it is a static style, which is not driven by data.

This part of example is point of interest:

lineLayer.setProperties(
      PropertyFactory.lineDasharray(new Float[]{0.01f, 2f}),
      PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
      PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
      PropertyFactory.lineWidth(5f),
      PropertyFactory.lineColor(Color.parseColor("#e55e5e"))
    );

PropertyFactory methods have implementations with Function parameter. I suspect it could be exactly what I search for. But no manual or example of using that implementations could be found.

Any ideas about custom drawer?

I develop a Xamarin.Android app in C# using MapBox Android SDK ported from Java.

UPD: Function type definition as it is seen in assembly metadata is the following: 

[JavaTypeParameters(new[] { "T" })]
[Register("com/mapbox/mapboxsdk/style/layers/Function", DoNotGenerateAcw = true)]
public class Function : Java.Lang.Object
{
    protected Function(IntPtr javaReference, JniHandleOwnership transfer);

    public virtual Float Base { get; }
    protected override IntPtr ThresholdClass { get; }
    protected override Type ThresholdType { get; }

    [JavaTypeParameters(new[] { "T" })]
    [Register("stop", "(FLcom/mapbox/mapboxsdk/style/layers/Property;)Lcom/mapbox/mapboxsdk/style/layers/Function$Stop;", "")]
    public static Stop InvokeStop(float @in, Property output);

    [JavaTypeParameters(new[] { "I", "O" })]
    [Register("com/mapbox/mapboxsdk/style/layers/Function$Stop", DoNotGenerateAcw = true)]
    public class Stop : Java.Lang.Object
    {
        protected Stop(IntPtr javaReference, JniHandleOwnership transfer);

        [Register("in")]
        public Java.Lang.Object In { get; set; }
        [Register("out")]
        public Java.Lang.Object Out { get; set; }
        protected override IntPtr ThresholdClass { get; }
        protected override Type ThresholdType { get; }
    }
}

UPD2: As I use C# things are a bit different from Java. Here is the code I am going to use:

LineLayer lineLayer = new LineLayer("linelayer", "line-source");
        lineLayer.SetProperties(new Property[] {
           PropertyFactory.LineColor("**What should be here?**"),
           PropertyFactory.Visibility(Property.Visible),
           PropertyFactory.LineWidth((Java.Lang.Float)3f)
        });

Upvotes: 2

Views: 1635

Answers (1)

cammace
cammace

Reputation: 3168

Could you provide a bit more information on how you are storing your data? Is it a GeoJSON file? There are a few different functions offered with Data Driven Styling but I believe you might be interested in the categorical one.

Using a single GeoJSON the code snippet below styles two lines depending on the data's property field (one blue and the other red):

LineLayer linesLayer = new LineLayer(Constants.LINE_LAYER, Constants.LINE_SOURCE).withProperties(
      PropertyFactory.lineColor(
        property(
          "color",
          categorical(
            stop("red", PropertyFactory.lineColor(Color.parseColor("#F7455D"))),
            stop("blue", PropertyFactory.lineColor(Color.parseColor("#33C9EB")))
          ))
      ),
      PropertyFactory.visibility(Property.VISIBLE),
      PropertyFactory.lineWidth(3f)
    );

    // Add LineLayer to map
    mapboxMap.addLayer(linesLayer);

Hopefully this points you in the right direction!

Upvotes: 0

Related Questions