Customization of Line drawings in Carto Mobile

Question

I've been following up the "Add a line" section in the tutorial of Getting started for the Carto Mobile SDK https://carto.com/docs/carto-engine/mobile-sdk/getting-started/#basic-map-features and so far it's being so helpful. However, I find that the documentation about customizing the drawing of lines is either incomplete or it's hard to find.

I've already applied a couple of improvements to my line (which is actually a route that I'm displaying over the map):

• Smooth line joints, so they are connected with curves and not sharpen edges:

LineStyleBuilder lineStyleBuilder = new LineStyleBuilder(); lineStyleBuilder.setLineJoinType(LineJoinType.LINE_JOIN_TYPE_ROUND); lineStyleBuilder.setStretchFactor(2);
new Line(result.getPoints(), lineStyleBuilder.buildStyle());

• Improve drawing when zoom is in upper levels, reducing points to be drawn (this is applied on the DataSource object used to store the Lines):

routeDataSource = new LocalVectorDataSource(projection); routeDataSource.setGeometrySimplifier(new DouglasPeuckerGeometrySimplifier(1.0f / 320.0f));

That's pretty good, however I'd like to go further, and:

• Display the line with dashes, instead of a solid line from beginning to end
• Apply a transparency/alpha to the color of the route, so I can see the roads/streets/paths under the Line. This I tried, applying the following on the LineStyleBuilder, but it looks weird:

lineStyleBuilder.setColor(new com.carto.graphics.Color(Color.argb(180, 64, 125, 191)));

Answer 1

You can fix the transparency issue with the latest CARTO SDK builds (will be released as 4.1.3) as these have now method setOpacity for all the layers. The trick would be to change Line style to have no transparency and use Layer-level opacity instead for whole layer. This should remove these turn "duplicate transparency" artefacts.

Dashed line would be more complex, this would require to use small semi-transparent custom bitmap (if you include it on a white color, you'll be able to color it using the setColor method from the LineStyleBuilder), taking into account that the bitmap will be repeated along the line. A 16x16px square png is enough, just add . The app code part would be something like:

styleBuilder.setBitmap(
    BitmapUtils.createBitmapFromAndroidBitmap(
        BitmapFactory.decodeResource(
            this.getResources(),
            R.drawable.dashedbitmap
        )
    )
);