slow lines rendering

[farfromrefug]

I created a layer to draw mapbox terrain vector layer. Thus i get contour line drawing. At high zoom level there a lot of line drawn in moutain areas (one line every 10m of elevation). I can clearly see that the drawing speed is a lot slower in those areas Here is my cartocss style related to contours:

contour[ele>0] {
  line-width: 0.6;
  line-opacity: 0.3;
  line-color: #959393;
  text-face-name: @mont;
  text-fill: @contour_text;
  text-halo-fill: @contour_halo;
  text-halo-rasterizer: fast;
  text-halo-radius: 1;
  text-avoid-edges: true;
  text-placement: line;
  text-character-spacing: 1;
  text-size: linear([view::zoom], (15, 9.5), (20, 12.0));
  text-name: "";
  [index=10] { 
    line-opacity: 0.4; 
    line-width: 1.1; 
    text-name: [ele]+' m';
  }

Is there a way to make it faster? I have looked here https://github.com/CartoDB/mobile-sdk/blob/b13a7b8931be78efda4507d2dadcedee15870754/libs-carto/cartocss/src/cartocss/CartoCSSMapnikTranslator.cpp But could not see a property that would make line draw faster

[farfromrefug]

Also as soon as i use text-placement: line; my text does not draw. Any idea?

[mtehver]

Style looks ok, perhaps the number of line is large? If you remove the texts, does this improve performance?

About the text-placement issue. Really strange, this should not affect anything.

[farfromrefug]

@mtehver sorry for the very late answer. Yes there are a lot of line and removing text does not improve that much. To be honest i am testing mapbox because of performances and style. Carto customization is quite perfect but the performances for contours are really far behind mapbox. Also carto is really missing a better style support. Especially mapbox style.

Anyway will try and find time to work more on carto. Would it be possible for you to setup a working example with vector contours drawing so that i can compare? Thanks

[mtehver]

@farfromrefug Thanks for the feedback! I am surprised that MapBox has better performance when rendering contours. CARTO SDK should be quite efficient when rendering complex lines or lots of lines. A small style change that may improve performance is to use 'line-cap: butt'. This should be visually almost unnoticable but will help if the number of lines is large and lines have few segments.

[farfromrefug]

So i am back on cartoMobile.I use the very last release 4.1.2-rc1 line-cap: butt seems to make a big difference. Drawing seems a lot faster. Now i still have the issue with text not drawing with text-placement: line;

Here are 2 screenshots. FIrst one without text-placement: line;

I attached the style so you can test. carto.zip

Thanks

[jaakla]

@farfromrefug - what is the tile sources configuration for it (code snippet would be nice), and which style exactly you use here from your package - voyager or terrain I guess?

[farfromrefug]

@jaakla Sorry for the lack of information! About the code snippet, pretty tough as i use cartoMobile within a module for a cross platform framework where my app is actually written in javascript ... Sorry about that :s At one point i will have to create a cartomobile dev env so that i can use a test app and then share easy snippets.

About the style, sorry i forgot that terrain was still in there. I don't use it anymore. I use voyager where i have added contours. Also i use a "merge" source mentioned here for :

• carto.streets
• mapbox terrain v2

But it s exactly the same as 2 sources, both using the style voyager. The only difference is the layers order. You wont get the contours under the roads.

[jaakla]

The issue seems to be that mapbox terrain v2 contours are not lines, they are polygons technically, and the 'line' text placement gets confused from this. @mtehver will check what we can do here in SDK level.

By the way, alternative provider openmaptiles.org has contours as lines in vector tiles, but their hillshading is separately in raster, so it would mean a bit bigger change in styling. Their tiles may be smaller and faster through, due to less data layers in them.

[farfromrefug]

@jaakla that might be it. About openmaptiles.org they dont propose contours and hillshades in their free version i think. I am not saying i am not willing to pay, just no way to test iif it is any better

[jaakla]

@farfromrefug - I created in server side new test online source with name 'carto.streets,contours', which adds contour line layer to the online tiles. It has a bit different attribute names, see metadata:

      "minzoom": 9,
      "maxzoom": 14,
      "fields": {
        "height": "Elevation in meters (10m resolution)",
        "nth_line": "Marks every other, 2nd, 5th or 10th line (value is int: '1','2' etc)"
      }

I modified your style a bit for the attributes, and it looks quite fast and nice to me, see file and screenshot carto.zip

[farfromrefug]

@jaakla you mean you created a new CARTO map vector source? Your idea was just to test the text rendering on lines, right? Do you render contours as line, or as polygons like mapbox?

Sorry for all the questions, i am just wondering what approach i should take to render a topo vectored map with contours (and possibly vector shading). This is my main point in switching from Google Maps to Carto.

Anyway this looks great! anyway i can test this?

[jaakla]

Yes, please test it: use 'carto.streets,contours' as source ID in CartoOnlineTileDataSource (instead of 'carto.streets'), and modified carto.zip style, I think only change was change of attribute name (from "ele" to "height"). You may want to do additional small adjustments to separate 10th line etc. This source adds layer named 'contour' as lines, not polygons, so the label rendering should work fine, as in my screenshot.

We use openmaptiles as upstream vector source, and from there we do not get hillshades in vector, only in raster png tiles. Raster hillshade looks similar to vector, but raster layer/tile cannot added to same tiles as one 'intermediate' layer. It has to be separate layer, maybe you can add one on top, it is semi-transparent anyway. You may test with this code, please let me know if it works:

CartoOnlineRasterTileLayer rasterHillshadeLayer =
          new CartoOnlineRasterTileLayer("carto.hillshade");
  mapView.getLayers().add(rasterHillshadeLayer);

[farfromrefug]

@jaakla will test it right away. About rasto hillshade i was already using one from acetate. But i am really trying to get rid of all rasters. The idea is to make region download a lot smaller when preparing hike or things like that. Plus getting rid of images is good for memory on android

[farfromrefug]

@jaakla It works great! Now are you going to keep that source `carto.streets,contours? Will it become part of cartoDB? Also it helped me figure out the real source of the slow rendering issue. I use your new source but i keep mapbox to get vector hillshading. And thus it draws polygons. The slow rendering issue happens when i zoom a lot on a polygon (or maybe multiple ones). Especially i think it happens when i can't see the whole polygons anymore, when it has to do "offscreen" rendering. Do you want me to create another issue for this?

Thanks again for your help!

[jaakla]

Yes, it would be better to have separate issue to track the polygon rendering. Regarding contours: currently not sure if and how we'll add this source. In your case - if you read mapbox source anyway, then more optimal looks to be to fix the issue of text label placement for polyon borders, and keep using mapbox terrain tiles?

[mtehver]

@farfromrefug Thanks for the hint about issue. This is a possibility, SDK does not do very fine-grained line or polygon clipping. I will think about it a bit more.

@jaakla The text label placement issue (polygon geometry with line-placement) should be now fixed in the development branch.

[farfromrefug]

@jaakla @mtehver will create 2 issues out of this one then: one for text label placement on polygon borders, and one for the polygon zoom drawing issue

@jaakla It would be great to see contours in carto. To be honest i would prefer to keep as much as possible within carto source. I will keep on using other sources because this is also the main feature of my app. I have around 50 different sources. Though as for vector sources if everything could be within carto, that would be awesome. Plus having mapbox on the side make "bigger mvt" and also requires me to manage 2 subscriptions...

Thanks again!

I think i can close that issue