[FR] tool to edit style

[farfromrefug]

There is a real need for a tool to live edit cartocss style. I tried to use kosmtik but i t wont render because most of the properties values are not recognized (linear, step, all nuti....)

I see you have https://github.com/CartoDB/mobile-style-editor but i don't even have a xamarin project to test it. Also would be much simpler to have a simple js example to load a style. I see that on your website: https://carto.com/documentation/cartojs/examples/#example-edit-sql-&-cartocss

In the js code i see cart.style.CartoCSS, can it load mobile style project?

[jaakla]

What do you mean by JS example? If you use some JS framework, then the code depends on specific framework, it is hard to give generic samples for it. Regarding CartoCSS styling there are two ways to use it - (1) in style package (.zip) file, as with bundled and custom basemap styles. This is suitable for complex Layers with a lot of different styling data, including icons, texts/fonts etc. (2) For simple single-data case you can put CartoCSS to a String object and apply this to a vector tiled layer. I have a Java example code for this - it adds a Layer with polygons from a Mapbox account map. In similar way you can fetch vector tiles from a Carto account table.

    String  css = "#land-polygons {\n" +
                "polygon-fill: #FFFFFF;\n" +
                "polygon-opacity: 1.0;\n" +
                "}";
    HTTPTileDataSource  dataSource = new HTTPTileDataSource(0, 12, "https://a.tiles.mapbox.com/v4/jaakl.landpolygons-mz12/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiamFha2wiLCJhIjoiR3FYNFJrRSJ9.n8PoOPy9tvnULFJ8h67pIA");
    mapView.getLayers().add(new VectorTileLayer(dataSource, new MBVectorTileDecoder(new CartoCSSStyleSet(css))));

[farfromrefug]

@jaakla i am using the style package (.zip) within android. My issue is to actually create my style (i am trying to mimic mapbox terrain style) i need to "play" with my style. But right changing and testing a simple change requires me to repackage the zip file then recompile and install my APK. This is a very long process for a very simple change. For cartoCSS there are tools to edit the style like kosmtik. Mapbox as it's own studio. Now i am looking at a way to do that with CartoMobile. The only thing i found was the Xamarin mobile-style-editor. I was wondering if there was such a tool in JS. But about what you said. You mean the style language is not the same for cartoMobile and carto.js ?

[jaakla]

Yes, it is not the same, so the carto.js and CARTO web tools (Builder) have same issue as kosmtik - they do not know mobile-specific cartocss additions; and as many of the additions are really mobile-specific then there is no plan to add them there. So the only tool which fully works with our CartoCSS is the Mobile Style Editor; it is also done with the mobile SDK can therefore it can render all the features. We are modifying the CartoCSS files manually ourselves, with Instant Run and a tool to edit text files directly in zip files (I have BetterZip) it is not that bad.

[farfromrefug]

@jaakla ok i get it about the different styles. About instant run sadly i can't use it yet as my framework works with eclipse for now :s I will try with ios simulator to see if i can do live updates.

Now about the Mobile Style Editor. I managed to get it to build but it crashes because of

Octokit.NotFoundException: repos/CartoDB/mobile-sample-styles/contents/ was not found.

Apparently CartoDB does not have a github repo mobile-sample-styles which makes the app unusable. Will report on the repo

[jaakla]

Thanks for feedback! @Nikituh is checking this

[Nikituh]

Hey there, @farfromrefug

Yeah, we changed the logic of how and where we host our public styles, and forgot to update the editor application. It's fixed in master branch now, and I'll soon release new versions to HockeyApp as well.

[farfromrefug]

@Nikituh that s great news! By any chance could you release a iOS test version? Anyway will try to build it Thanks

@jaakla I am going to try another way to live edit a zip style. For that i am using nativescript which makes it quite easy. Will report here

[Nikituh]

Can do, @farfromrefug !

Here it is: https://rink.hockeyapp.net/apps/477fcd9fba6d4c29be7d0256dfffac7e

As far as I know, it hasn't been publicly tested by anyone yet, just used internally. If it crashes or you find any bugs, please be nice :)

[farfromrefug]

@Nikituh that was fast :D Thanks will test it!

[farfromrefug]

@jaakla that's it, found a way to do live update dead fast. I created a nativescript module for ios that auto update itself on zip file change. It taks about 1s to update. I will publish it as soon as possible. One question about betterzip, did you find a way to make it auto update/save without asking? Thanks

[farfromrefug]

@Nikituh just tried the new version. Now it connects correctly and download the templates juste fine. But the map does not load. Could it be the api key? Will try to build it to get the logs

[farfromrefug]

@Nikituh @jaakla A little question on the side related to styling Carto. Is there a doc of carto.streets layers somewhere? I need to know how to find some features like cliffs. Something like this

[Nikituh]

There does indeed seem to be a problem with the HockeyApp version. I'll try to get a fix up as soon as possible.

As for the style documentation... Sadly, I have to say no, but it's a great idea. We'll probably create a small README/guide to our layers (and styles, in general)

[farfromrefug]

@Nikituh about the style doc that would be great. I would glad to help in any way!

[Nikituh]

Hotfix uploaded to HockeyApp, @farfromrefug

[farfromrefug]

@Nikituh thanks will try it later as i don't have a ipad with me.

[farfromrefug]

@Nikituh Sorry it took me so long to test it. It works perfectly! And it gaves me a great idea. I am going to try make it a live edit thing from vscode to nativescript. Following the idea you used in the editor i think i can make it so that nativescript auto update on mss change from vscode or other editors.

[carlos-mg89]

@Nikituh did you finally made public that readme file with the guide for the layers / styles? I'm in the need of editing the default.xml packed into the nutibright-v3.zip and seems to be a hard task to edit the file without having many clues about it. And I guess, there isn't any LIVE editor at the moment, right?

[jaakla]

Editing of the .xml is difficult indeed. We never do this, we use cartocss-based projection MB Studio Classic, which is used either as set of .mss files in style.zip, or as generated XML. To use max of SDK both cartocss and XML needs some manual adjustments. Unfortunately we don't have detailed guides about that, and do not have short term plans to add them just in case. Maybe with enterprise support contracts.

[carlos-mg89]

I'm trying yo apply the solution you suggested, @jaakla , which is to apply the CartoCSS directly to the layer. In my case, I would like to draw the contour lines, and the labels, based on the MapTiler ones.

The information from the contour lines is here https://cloud.maptiler.com/data/contours/

Here I attach the JSON link with a testing key so you can directly see the information: https://maps.tilehosting.com/data/contours.json?key=OhIrANXYBfS56VwqOYW5

You can observe that there are 2 fields, height and nth_line. I've tried to apply the CartoCSS from the OSM Bright ( https://github.com/cyberang3l/osm-maps/tree/master/osm-bright-contours/osm-bright ), using the contours.mss and contour_labels.mss , although I had to change the ids, from #contour_lines to #contour . And that works. I can see the contour lines over the map, in the Android SDK. However, I cannot manage to display the text labels to show the elevation.

I changed the variable, from ele to height, but it doesn't work. I see nothing. Could you give me a hand please?