Possible to use zoom level as variable in mss styles?

[csytsma]

Instead of having to create duplicate zoom level sections, with the only difference a change in the number for a width or size, it would be great if the rendering zoom level could be referenced as a variable, and then use a multiplier to determine desired value.

For example, say we wanted: [zoom=15] { text-size: 18; } [zoom=16] { text-size: 19; }

Could instead be written, assuming that zoom_level would have a value of either 15 or 16: { text-size: [zoom_level] * 1.2; }

This would greatly collapse the repeated zoom sections and allow a simple reuse, and much easier to maintain.

Thanks, Cory

[Komzpa]

would you please report this to carto project? https://github.com/mapbox/carto thanks!

[csytsma]

This appears to have been implemented in Mapnik, but from what I understand, now needs to be implemented in Tilemill so that it passes the variables at render time. Kosmitik has this implemented (https://github.com/kosmtik/kosmtik/pull/206).

Mapnik implementation: https://github.com/mapbox/carto/issues/269

Apologies if I'm mistaken, and this has been implemented in Tilemill already.

[csytsma]

This actually works in TileMill without any edits necessary, because of the way it was implemented in Mapnik. The syntax you want to use is: text-name: '@zoom'

The apostrophes around @zoom will pass it as text through Carto.js, then Mapnik will pick up the variable. At least, that's how I interpreted https://gist.github.com/springmeyer/7226517#gistcomment-1307394

It is somewhat limited, in that you have to pass any operations within the quotes, and can't be within a filter.

For example, in my roads.mss, I had to put it at the top, before any #road_high{} type filters. Any operations need to be done directly on the @zoom variable, you can't do it on a variable you assigned it to.

So this works: @roads_path: '@zoom * @zoom * .005'; line-width: @roads_path;

or line-width: '@zoom * @zoom * .005';

This doesn't: line-width: @roads_path / 2;

[csytsma]

UPDATE: This only partially works. It will render correctly on the screen, but exporting to static printed map doesn't work. No errors, just doesn't draw the elements.

I tried adding 'zoom' as an option, as referenced in other forums, but doesn't seem to do anything:

servers/Tile.bones:

                    var opts = {
                        scale_denominator: carto.tree.Zoom.ranges[req.query.static_zoom] || 0.0,
                        scale: model.mml.scale,
                        variables: {zoom: this.z}
                    }
                    map.render(im,opts,function(err,im){
                        if (err) return next(err);
                        im.encode('png24',function(err,tile) {
                            if (err) return next(err);
                            res.send(tile,{ 'Content-Type': 'image/png' });
                        });
                    });

I'm not familiar enough with where the rendering for the screen happens, compared to where rendering for export happens.