| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Layer selector example | CartoDB.js</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> | |
| <style> |
Map Links: Vignettes // Water Lines
Coastal vignettes (left) and water lines (right) are two artistic effects used by cartographers to promote better figure-ground between land and water features.
Using a polygon layer, the Create areas of influence (AOI) analysis, and some styling tricks, you can create both effects using CARTO Builder with just a few steps!
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
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ocean bathymetry | CARTO</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta charset="UTF-8"> | |
| <!-- Include CARTO VL JS --> | |
| <script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script> | |
| <!-- Include Mapbox GL JS --> | |
| <script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Add layer | CARTO</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.0.0/carto-vl.js"></script> | |
| <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script> | |
| <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" /> | |
| <style> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script> | |
| <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script> | |
| <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" /> | |
| <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet"> | |
| </head> | |
| <body> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>CARTO VL: Selection by polygon example</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="shortcut icon" href="https://carto.com/favicon.ico"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Interactive based styling | 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.0.0/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" /> |