cartodb / carto

hyperspeed CSS-like map styling

[DEPRECATED]

Hey! This content applies only to previous CARTO products.

Please check if it's relevant to your use case. On October 2021 we released the current version of our platform. You can learn more and read the latest documentation at docs.carto.com

What is CARTO?

CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our world.

Empower organizations to optimize operational performance, strategic investments, and everyday decisions with CARTO Engine—our embeddable platform for web and mobile apps—and the new CARTO Builder, a drag and drop analysis tool.

It was built to make it easier for people to tell their stories by providing them with flexible and intuitive ways to create maps and design geospatial applications. CARTO can be installed on your own server and we also offer a hosted service at carto.com.

If you would like to see some live demos, check out our videos on Vimeo. We hope you like it!

What can I do with CARTO?

With CARTO, you can upload your geospatial data (Shapefiles, GeoJSON, etc) using a web form and then make it public or private.

After it is uploaded, you can visualize it in a dataset or on a map, search it using SQL, and apply map styles using CartoCSS. You can even access it using the CARTO APIs, or export it to a file.

In other words, with CARTO you can make awesome maps and build powerful geospatial applications! Definitely check out the CARTO Platform for interactive examples and code.

Installing

Read the installation guide in CARTO developers documentation

How do I upgrade CARTO?

See UPGRADE for instructions about upgrading CARTO.

For upgrade of Windshaft-CartoDB and CartoDB-SQL-API see the relative documentation.

Developing & Contributing to CARTO

See our contributing doc for how you can improve CARTO, but you will need to sign a Contributor License Agreement (CLA) before making a submission, learn more here.

Testing

Check the testing doc section.

Requirements

CARTO works in any modern browser, but if you want more info:

31+ ✔	38+ ✔	11+ ✔	31+ ✔	8+ ✔

carto's Issues

[node-v6] Got SyntaxError parsing to JS on Node v6

I've discovered one more failing use case:

CartoCSS:

#layer0['mapnik::geometry_type'=1] { 
  marker-fill: red;
  marker-width: 10;
}

> if((8388607 & (1 << ctx.zoom)) && data.mapnik::geometry_type === 1){_value = '#ff0000';}
                                                
SyntaxError: Unexpected token :
    at Object._createFn (/vagrant/repos/Windshaft/node_modules/carto/lib/carto/renderer_js.js:153:12)
    at Object.parse (/vagrant/repos/Windshaft/node_modules/carto/lib/carto/renderer_js.js:245:40)
    at Object.setStyle (/vagrant/repos/Windshaft/node_modules/carto/lib/carto/renderer_js.js:120:23)
    at Object.CartoCSS (/vagrant/repos/Windshaft/node_modules/carto/lib/carto/renderer_js.js:10:10)
    at render (/vagrant/repos/Windshaft/node_modules/carto/lib/carto/renderer_js.js:280:12)
    at Object.module.exports.optionsFromCartoCSS (/vagrant/repos/Windshaft/lib/windshaft/utils/cartocss_utils.js:13:41)
    at /vagrant/repos/Windshaft/lib/windshaft/renderers/mapnik/geojson_renderer.js:20:38
...

Also it just happens on Node v6.

Notifications distorted pop up

Showing a weird cut popup on IE browser.

As a user, I want to manage API keys

This is your first user story's description - double click to edit

Ampersands on feature properties

Original issue: https://github.com/CartoDB/support/issues/1032

I think that carto is not managing ampersands in a good way, particularly on the JS code generation. They are expanded to: &amp, but they should be left as-is, just &.

RendererJS doesn't support operations with multiple operands

It seems like the JS string that we are generating to be evaluated only takes into account one operand.

e.g.:
marker-width: [value] * 0.5 is perfectly valid
marker-width: [value] * [value] * [0.5] generates an incorrect expression, because we're currently only looking for one operand.

cc @rochoa

Incorrect dasharray value

cartocss = "{ line-color: #7B00B4; line-width: 1; line-opacity: 0.7; line-dasharray: 4,2; }";
shader = new carto.RendererJS().render(cartocss),
style = shader.layers[0].getStyle({ property: 1 }, { zoom: zoom });

console.log({shader, style}); 

Value returned for the dasharray is just 4 instead of 4,2. Am I missing something?

Also, in the example on the homepage, the getStyle method takes the first argument { property: 1 } what does that mean?

Thanks

Extract all "marker-file" properties from ruleset

Max zoom 22

Ref. CartoDB/torque#55

Carto has a max zoom value of 22. Changing that value produces unexpected results, so obviously there is more to it.

@javisantana
@tiangolo

Error parsing marker-file with ramps

Problem

When using Builder styling point geometries with the cartocss console, we've found that right now it's not compatible with marker-file property with Turbocarto ramp value.

For example, given this cartocss:

#layer {
  marker-width: 10;
  marker-fill: ramp([name], (#5F4690, #d94bd5, #38A6A5, #0F8554), ("Avenida de América", "Alonso Martínez", "Argüelles", "Colonia Jardín"), "=");
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 3;
  marker-line-color: #FFF;
  marker-line-opacity: 1;

marker-file: ramp([name], (url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/circle-stroked-18.svg'), url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/star-stroked-18.svg'), '', url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/star-stroked-18.svg')), ("Avenida de América", "Alonso Martínez", "Argüelles", "Colonia Jardín"), "=");
}

The line corresponding to the marker-file with ramp returns an error once the changes are submitted:

Syntax error. Line 10: Invalid value for marker-file, the type uri is expected. ramp([name],https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/circle-stroked-18.svg, https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/star-stroked-18.svg, , https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/star-stroked-18.svg,Avenida de América, Alonso Martínez, Argüelles, Colonia Jardín,=) (of type call) was given.

Possible causes

Seems like the parser in charge of detecting syntax errors doesn't recognize a ramp inside a marker-file property, as it does in the marker-fill one.

Request

We don't know if there's another accepted way to specify the marker-file using Turbocarto, in case there isn't any we need to fix the parser to accept this syntax. This is important to develop this feature properly.

cc @xavijam @rochoa @javierarce

[node-v6] Got exception parsing to JS on Node v6

For the following css input:

#layer[name=~".*Cairo*"] {
  marker-width: 14;
}

RendererJS throws:

(new carto.RendererJS({ debug: true })).render(css);
---
if((8388607 & (1 << ctx.zoom)) && data['name'] =~ '.*Cairo*'){_value = 14;}
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ReferenceError: Invalid left-hand side in assignment
      at Object._createFn (/vagrant/repos/carto/lib/carto/renderer_js.js:153:12)
      at Object.parse (/vagrant/repos/carto/lib/carto/renderer_js.js:245:40)
      at Object.setStyle (/vagrant/repos/carto/lib/carto/renderer_js.js:120:23)
      at Object.CartoCSS (/vagrant/repos/carto/lib/carto/renderer_js.js:10:10)
      at render (/vagrant/repos/carto/lib/carto/renderer_js.js:280:12)
      at Context.<anonymous> (/vagrant/repos/carto/test/rendering_js.test.js:192:58)
      [...]

On Node v6, but it doesn't throw error on Node v0.10

[Tangram R&D] Throw an exception when a ccss property is not supported

Allow pass a reference at instantiation time and throw an exception when CCSS is not valid with that reference.

ADDON: Testing the trigger exception, we've discovered that Reference.setData is setting the reference passed as a closure under at module level, if you have several references in different instances of Renderer they will use the latest reference setted

Properties inside a [zoom] filter are not being marked as `filtered`

The following CartoCSS is filtering marker-allow-overlap by zoom:

#layer {
  marker-width: 10.5;
  marker-fill: ramp([rank_max], (#E4F1E1, #9CCDC1, #63A6A0, #337F7F, #0D585F), quantiles);
  marker-fill-opacity: 1;
  marker-line-width: 0;
  marker-line-color: #FFF;
  marker-line-opacity: 1;

  [zoom > 1] {
    marker-allow-overlap: true;
  }
}

Parsing this (:point_up:) and getting the metadata for marker-allow-overlap returns something like:

{
  "constant": true,
  "symbolizer": "markers",
  "js": [
    "if((8388604 & (1 << ctx.zoom))){_value = true;}"
  ],
  "index": 392,
  "filtered": false
}

I would expect filtered to be true in this case.

There's some context in this comment.

cc: @IagoLast @javisantana

Get update_to_master branch into master

After discussing it with @javisantana and as it seems the changes in update_to_master branch are not gonna get accepted in upstream repository we better move forward and make this branch into this repository's master branch.

Variable access changed to dot notation

It looks like carto now use a dot notation to access properties in the js generated.

This has a main inconvenient if you use a my-variable-name it is gonna try to get data.my-variable-name... failing.

We should go back to the old use of array like property access.

cc/ @rochoa

Console.log is polluting the tests

When running npm test the Renderer has the debug flag activated, causing the test result to be a little hard to read.

An example:

 ✓ should parse styles with string 
    ◦ should parse styles with filters not supported by dot notation: props { 'line-width': 
   [ { index: 9,
       symbolizer: 'line',
       js: 'if((8388607 & (1 << ctx.zoom))){_value = 2;}',
       constant: true,
       filtered: true } ],
  'line-color': 
   [ { index: 24,
       symbolizer: 'line',
       js: 'if((8388607 & (1 << ctx.zoom))){_value = \'#ff0000\';}',
       constant: true,
       filtered: true } ] }
props { 'line-width': 
   [ { index: 63,
       symbolizer: 'line',
       js: 'if((8388607 & (1 << ctx.zoom)) && ctx["frame-offset"] === 1){_value = 3;}',
       constant: true,
       filtered: true } ] }
props { 'line-width': 
   [ { index: 101,
       symbolizer: 'line',
       js: 'if((8388607 & (1 << ctx.zoom)) && ctx["frame-offset"] === 2){_value = 3;}',
       constant: true,
       filtered: true } ] }
props { 'line-width': 
   [ { index: 149,
       symbolizer: 'line',
       js: 'if((8388607 & (1 << ctx.zoom)) && ctx["frame-offset"] === 10){_value = 4;}',
       constant: true,
       filtered: true } ] }
{ '#world::__default__': 
   { symbolizers: [],
     frames: [],
     zoom: 8388607,
     'line-width': { constant: true, symbolizer: 'line', js: [Object], index: 101 },
     'line-color': { constant: true, symbolizer: 'line', js: [Object], index: 24 } },
  '#worls::__default__': 
   { symbolizers: [],
     frames: [],
     zoom: 8388607,
     'line-width': { constant: true, symbolizer: 'line', js:

Be able to set `buffer-size` at layer level

With mapnik we can set buffer-size at layer level:

<Layer name="wadus" srs="+init=epsg:3857" buffer-size="64">

If we try to set buffer-size at layer level directly in CartoCSS:

#layer { buffer-size: 64 }

then carto raises the following error:

Error: Map properties are not permitted in other rules

In order to take advantage of mapnik's feature we need to be able to set buffer-size as layer's property as we can do at Map level.

cc @rochoa, @javisantana, @jorgesancha