38

Unfortunately, there isn't one yet. I've asked myself the same thing occasionally but I've found a handful of examples through the years that I've drawn some inspiration and learned through. Unfortunately, most authors aren't putting their all or some of their work public. Also, there's been a couple small changes in carto, some of the code may not be 100% ...


6

Check this CartoCSS port of the OpenStreetMap default style. https://github.com/gravitystorm/openstreetmap-carto


6

You can't use zoom as a variable at the moment as you mentioned. I've read this is planned (and I'm excited to see it implemented too). Here's one work-around, etc: #ways[highway="trunk"] { line-color: #c99; [zoom=10] { line-width: 1; } [zoom=11] { line-width: 1.1; } [zoom=12] { line-width: 1.2; } If you have multiple highway types, you ...


6

We use a trick like: <style type="cartocss/text" id="simple"> #earthquakes_cdbjs_lesson3{ marker-fill: #FF6600; marker-allow-overlap: true; ... } </style> and after that cartocss: $("#simple").text();


5

Instead of select distinct (which would not work, because all routes differ slightly, even if for a direction), use select ST_LineMerge(ST_Union(way)) as way, ref from ... where ... group by ref.


5

Besides hardware and other software, rendering performance depends on the database, custom indexes, and the SQL in the style rendered. The style makes a huge difference, and badly written layer definitions can result in abysmal performance. If you change the database schema, it requires changing both the custom indexes and layer SQL, so it's not possible to ...


4

Check http://mapbox.com/tilemill/docs/upgrade/#transforms and http://mapbox.com/carto/api/2.1.0 rotate() and scale() are actually SVG transforms.


4

MapServer does support label LEADER since 6.2. http://mapserver.org/mapfile/leader.html Example:


4

Two separate marker-transform properties can't be applied for the same object, but if you can apply a single property with multiple functions in it: marker-transform: 'scale(0.5) rotate(180)'; However this would likely require you rearrange your code to apply the correct rotations at the same time and make things more complicated. A simpler approach would ...


4

try to add this text-dy: -10; you can look at file admin.mss in openstreetmap-carto project dir and find code #nature-reserve-text[zoom >= 13][way_pixels > 192000] { text-name: "[name]"; text-face-name: @book-fonts; text-fill: green; text-halo-radius: 1.0; text-halo-fill: rgba(255,255,255,0.6); text-placement: line; text-dy: -10; } ...


4

In cartodb.js you have an example integration with google charts. Other charting libraries should work in the same way. You can see it working here. The key is to call the chart function inside the infowindow template, note draw_chart call: var INFOWINDOW_TEMPLATE = [ '<div class="cartodb-popup v2">', ' <a href="#close" class="...


4

I've read this and several posts on SE, which pointed me in the right direction Your link is pointing to the docs about mapbox.js which is different from mapbox-gl.js. Docs for Mapbox GL JS: https://www.mapbox.com/mapbox-gl-js/api/#popup There is an official Mapbox tutorial which shows also how to style a Mapbox GL JS popup using CSS: https://www.mapbox....


3

Data properties can be used for filters in selectors (ie the #id[type='stop'] part), but TileMill cannot currently assign colors or most other property types based on values in the data. Instead, you would have to create a filter to check the data, then assign the color manually: #id[type='stop'] { [color='#ff0000'] { marker-line-color: #ff0000; } [...


3

Okay, maybe a bit ugly but I put a lot of functionality in here http://bl.ocks.org/andrewxhill/9003528 It includes create an initial layer on the fly a hover to the layer after timeout, changing the size of the density grid recalculating a style to go along with the new size I think it will get you pretty far. Note, you could make the style calculation ...


3

There is also a list of CartoCSS map styles on the OpenStreetMap wiki.


3

Line 9 on your osm-bright.osm2pgsql.mml file, you left out a comma when adding the line "type": "shape", You need to have proper JSON format.


3

So, you're looking for ways to style landuse at low/medium zoom levels, yeah? Looks like MapQuest is currently working on a new open CartoCSS-based map style (here). It's pretty bare bones still for stuff like landuse. Also checkout OSM's Carto styles, in particular landcover.mss. Also, MapBox has some good, open Carto styles. Their MapBox Outdoors is a ...


3

Preparing the vector PBF tiles is the first step. The MapBox Studio Classic is able to generate for you the vector PBF tiles (packed in MBTiles format) from any vector source (ShapeFiles, PostGIS, ...) and is quite easy to use. Under the hood it does the rendering with the mapnik+mapnik-vector-tile as you mentioned wrapped in tilelive (so scripting is ...


3

Vector tiles have different data at each zoom level. I'm guessing that the source vector tile dataset you're using in your style does not contain any data at zooms 0 and 1, which is why it can only be styled starting at zoom level 2 (where there's actually data to style).


3

This is a concept known as attachments. While the notation is similar to CSS pseudo classes they do not have much in common. The CartoCSS documentation offers an explanation. To summarize, attachments create implicit layers with the same data as defined by #layerId. Here is a real-world example from OSM Bright: #place::country[type='country'][zoom>3]...


3

In order to create lines from coordinates, you have to run the following query in your SQL console: SELECT a.value, st_transform( st_makeline( ST_SetSRID(st_makepoint(a.start_lon, a.start_lat),4326), ST_SetSRID(st_makepoint(b.end_lon, b.end_lat),4326) ), 3857) as the_geom_webmercator FROM ...


3

You can add labels as attachments using a CartoCSS similar to this one: #layer { marker-width: 20; marker-fill: #EE4D5A; marker-fill-opacity: 0.9; marker-file: url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/warehouse-18.svg'); marker-allow-overlap: true; marker-line-width: 1; marker-line-color: #FFFFFF; marker-...


3

You can add labels in CARTO.js using CartoCSS text properties in your layer style object. Something like this should work: #layer { polygon-fill: #826DBA; polygon-opacity: 0.9; } #layer::outline { line-width: 1; line-color: #FFFFFF; line-opacity: 0.5; } #layer::labels { text-name: [name]; text-face-name: 'DejaVu Sans Book'; text-size: 10; ...


2

I found a workaround: I created a polygon covers the whole world in GeoJSON and added it as layer #backgound. { "type": "Polygon", "coordinates": [ [ [-180, 89.9], [180, 89.9], [180, -89.9], [-180,-89.9], [-180,89.9] ] ] } now i can use this polygon as background #...


2

This is because the VectorFieldRenderer has not been implemented for SLD yet. If you are using this: it can't be exported to SLD.


2

Using the Natural Earth populated places file, you can filter on [ADM0CAP=1] to style only cities that are capitals of countries.


2

For a starting point you could use something like this: #line { line-color:#168; ::lineStartMarker{ line-width:10; line-cap: round; line-dasharray: 1,100000; // Second value greater then the line-lenght } } For a end point... sorry no concrete idea. EDIT: If you figure out the lenght of the line, then use this as second value in line-...


2

CartoCSS does not support hstore columns because Mapnik does not support them directly either. The only workaround right now is to extract the keys and values into normal columns in the SQL query. Eg: ( select tags->'wifi' as wifi, way from planet_osm_point where tags->'wifi' = 'yes' ) as data To make this easier for non-technical people, you ...


2

The code for a new line in CartoCSS is \n. So you can do text-name: [NAME]+'\n'+[TYPE]; The text-wrap-character approach will work as well, you just need to make sure to set text-wrap-width to a very low value such as 1 to trigger the wrapping. Further reading: https://www.mapbox.com/tilemill/docs/guides/styling-labels/


2

No - CartoCSS is a language that generates raster tiles. It is read by TileMill, which turns your data into images, and then all your browser sees are images. So there's no CartoCSS language in place when you're just looking at a map. This is why it's super fast for large data. If you need features that change their appearance on hover, it would be best to ...


Only top voted, non community-wiki answers of a minimum length are eligible