CARTO Basemap styles for web and mobile, raster and vector. Preview and compare with different viewers here.
This repository has working copies of basemap cartographic styles for different targets
Terms of service: for more information about CARTO basemaps use, pricing and terms of service, please double check https://carto.com/basemaps
The styles are based on current version of OpenMapTiles data schema and vector tiles: https://openmaptiles.org/schema
All the styles are "soft" in a sense that they are meant to be used as background or basemap below data layers. These are not really meant to be used as stand-alone map by itself, something you'l get from Google, Here and other general maps.
- Voyager - colored map, the default basemap in CARTO Builder
- Positron - light gray map, good for point data
- Dark Matter - dark gray map, good for polygon/line data
Service public info: https://carto.com/location-data-services/basemaps/
The structure of the URLs to call the service is the following: https://{s}.basemaps.cartocdn.com/{style}/{z}/{x}/{y}{scale}.png , where:
- {s}: one of the available subdomains, either [a,b,c,d]
- {z} : Zoom level. We support from 0 to 20 zoom levels in OSM tiling system.
- {x},{y}: Tile coordinates in OSM tiling system
- {scale}: OPTIONAL "@2x" for double resolution tiles
- {style}: Map style, possible value is one of:
light_all,
dark_all,
light_nolabels,
light_only_labels,
dark_nolabels,
dark_only_labels,
rastertiles/voyager,
rastertiles/voyager_nolabels,
rastertiles/voyager_only_labels,
rastertiles/voyager_labels_under
Sample with Leaflet JS:
layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
attribution:'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 20,
minZoom: 0
});
- Style is written in CartoCSS using Mapbox Studio Classic (https://www.mapbox.com/mapbox-studio-classic/), and shared here as Mapbox Studio Classic project
- Raster tiles generated by Mapnik tilelive-vector using Mapnik-XML styling.
- File folder in this repo: /cartocss/web
Styles use as much shared styling as possible. Shared cartocss (.mss) files are in /shared folder, and linked with symlinks to different style projects, as MB Studio requires files in single folder. Same symlink-based sharing is used for Fonts and Images subfolders. Every style has following unique files:
- project.yml - main project file. It is important to have here list of layers, as this determines order of layer rendering
- style.mss - specific values for style variables
- project.xml - generated file by MB Studio Classic. Normally is not edited manually, but real server uses this for real styling
- folder cartocss/mobile-sdk-styles
- these are taken from "Web Basemaps" .mss files (CartoCSS) and are modified to have vector rendering specifics - e.g. language and 3D display, smooth zoom variables
- Style modification from web basemap to mobile basemap is manual process
- You can try our experimental https://github.com/CartoDB/mobile-style-editor app to edit mobile basemap styles with a mobile device: Android tablet or iPad. This gives you direct user experience of your style right on mobile.
- Technical details how our Mobile CartoCSS is different from web CartoCSS: https://github.com/CartoDB/mobile-sdk/wiki/CartoCSS-notes . There are some mobile-specific extensions and also some limits.
- How to use the styles as custom styles in your mobile app: https://github.com/CartoDB/mobile-sdk/wiki/Creating-custom-basemap-styles
- Every style has mobile-specific .json metafile (e.g. voyager.json). This is SDK-specific format, somewhat similar to project.yml file in MB Studio Classic. Defines also order of layers, and some SDK-specific additional parameters. It has also file sizes and checksums, this is used in online style server to identify style updates.
- Note that MBStudio generated .xml is not used in mobile
- folder: /mapboxgl
- Master style is file /tools/style_tpl.json . It uses template placeholders for variable values for different styles
- Different styles are /style-name/style-name_vars.json files
- You should use tools/styler.py script to generate specific style from template and _vars.json file. The ready-made style-name.json files are generated and for reference only.
- Master style and variables files are manually created from a working style
- It can use mapbox-gl style, which is auto-converted using https://github.com/boundlessgeo/ol-mapbox-style
- folder: /tangram
- Can be edited using Tangram Play
- Use it 'as is', not supported or developed anymore by CARTO
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
