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)));

enter image description here


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:

  • The transparency works perfectly! I was still using the 4.1.2 version, so good moment to upgrade. Gonna check about the dashed line and see how it goes. I believe other people could be interested in having this functionality included by default on Carto. Having dashes or dots could be a nice way of differentiating different vehicle routes, or to display a part of the route that you do by bus/train and then on foot. You can do that by having different lines, and coloring them (blue by car, green on foot), but to me dashes seem more logical, and offer a more readability of the map.
    – xarlymg89
    May 3 '18 at 10:59
  • OK, it works nicely. There's an awkward effect when zooming in/out with the fingers, but maybe I'll just leave it that way. It even works like the MarkerStyleBuilder, and I can apply a color to the bitmap, so I can color the routes as I wish. Thank you very much @JaakL
    – xarlymg89
    May 3 '18 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.