Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Created October 26, 2016 09:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/8dbc0c7e9ae91406cf29ababf67ec83d to your computer and use it in GitHub Desktop.
Save ramiroaznar/8dbc0c7e9ae91406cf29ababf67ec83d to your computer and use it in GitHub Desktop.
How to create overlapping category and bubble maps with CartoCSS
SELECT
*,
7 as italians,
3 as french,
19 as spanish
FROM
populated_places
WHERE
name ILIKE 'Barcelona'
UNION ALL
SELECT
*,
10 as italians,
12 as french,
4 as spanish
FROM
populated_places
WHERE
name ILIKE 'Tarragona'
UNION ALL
SELECT
*,
5 as italians,
7 as french,
14 as spanish
FROM
populated_places
WHERE
name ILIKE 'Madrid'
UNION ALL
SELECT
*,
15 as italians,
2 as french,
1 as spanish
FROM
populated_places
WHERE
name ILIKE 'Zaragoza'
#layer {
line-width: 0.1;
marker-allow-overlap: true;
}
#layer::italians {
marker-fill: green;
marker-allow-overlap: true;
marker-opacity: 0.5;
[ italians <= 19] {
marker-width: 25.0;
}
[ italians <= 14] {
marker-width: 20.0;
}
[ italians <= 9] {
marker-width: 16.7;
}
[ italians <= 4] {
marker-width: 15.0;
}
[ italians <= 1] {
marker-width: 11.7;
}
}
#layer::french {
marker-fill: blue;
marker-allow-overlap: true;
marker-opacity: 0.5;
[ french <= 19] {
marker-width: 25.0;
}
[ french <= 14] {
marker-width: 20.0;
}
[ french <= 9] {
marker-width: 16.7;
}
[ french <= 4] {
marker-width: 15.0;
}
[ french <= 1] {
marker-width: 11.7;
}
}
#layer::spanish {
marker-fill: red;
marker-allow-overlap: true;
marker-opacity: 0.5;
[ spanish <= 19] {
marker-width: 25.0;
}
[ spanish <= 14] {
marker-width: 20.0;
}
[ spanish <= 9] {
marker-width: 16.7;
}
[ spanish <= 4] {
marker-width: 15.0;
}
[ spanish <= 1] {
marker-width: 11.7;
}
}
@ramiroaznar
Copy link
Author

map2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment