In this case, there are multiple types filtered from the same layer. I want to assign each type a unique color.
If/else conditions with a fallback. (following this example)
{
dataLayer: `admin`,
In this case, there are multiple types filtered from the same layer. I want to assign each type a unique color.
If/else conditions with a fallback. (following this example)
{
dataLayer: `admin`,
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Congrats on the new job!</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Congrats on the house!</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Congrats on the house!</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Exported map | CARTO VL</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="http://libs.cartocdn.com/carto-vl/v1.4.4/carto-vl.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" /> | |
<style> |
Inside of CARTO Builder we offer a set of default color schemes, CARTOColors, that can be used for both qualitative and quantitative data.
But what about the times when you want to customize the colors on your map, because of its theme, a predefined brand color, or just because? There are a variety of tools and guidelines available to find harmonious color combinations that can be brought into Builder to customize your map.
Another option to get started, that we outline here, is using the CartoCSS color function spin
to get started with custom color schemes, particularly for qualitative data.
With the basic building blocks in place, this function can be used in a variety of ways on many different maps. To demonstrate, we'll generate a series of well-known [color harmonies](https://en.wikipedia.org/wiki/Harmony_(co
The recent release of PostGIS 3.0 brings an updated spatial reference system table that includes over 8000 projections out of the box and we're happy to report that the Equal Earth Projection is one of them!
As a CARTO user, this means you can start using this popular projection in your maps right away!
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Equal Earth | CARTO</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.4.2/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" /> | |
<link href="https://carto.com/developers/carto-vl/v1.4.2/examples/maps/style.css" rel="stylesheet"> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Label clusters by count | CARTO VL</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.2.5/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> | |
<link href="https://carto.com/developers/carto-vl/v1.2.5/examples/maps/style.css" rel="stylesheet"> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Label clusters by count | CARTO VL</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.2.5/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> | |
<link href="https://carto.com/developers/carto-vl/v1.2.5/examples/maps/style.css" rel="stylesheet"> |