Top Related Projects
OpenMapTiles Vector Tile Schema Implementation
An open source visual editor for the 'MapLibre Style Specification'
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
MapLibre GL JS - Interactive vector tile maps in the browser
Quick Overview
OpenStreetMap Carto is a cartography project that provides a style sheet for rendering OpenStreetMap data. It is the default style used on the OpenStreetMap website and serves as a reference implementation for rendering OSM data. The project aims to create a visually appealing and informative map style that can be used globally.
Pros
- Widely adopted and recognized as the standard style for OpenStreetMap
- Highly customizable and extensible for various mapping needs
- Actively maintained with regular updates and improvements
- Supports multiple languages and scripts for global use
Cons
- Can be complex to set up and configure for beginners
- Requires significant computational resources for rendering large areas
- May not be suitable for specialized mapping needs without extensive customization
- Limited documentation for advanced customization options
Getting Started
To get started with OpenStreetMap Carto:
-
Clone the repository:
git clone https://github.com/gravitystorm/openstreetmap-carto.git cd openstreetmap-carto
-
Install required dependencies:
sudo apt-get install nodejs npm npm install -g carto sudo apt-get install postgresql-12-postgis-3 postgis
-
Set up the database and import OpenStreetMap data:
createdb gis psql -d gis -c 'CREATE EXTENSION postgis; CREATE EXTENSION hstore;' osm2pgsql -d gis --create --slim -G --hstore --tag-transform-script openstreetmap-carto/openstreetmap-carto.lua -C 2048 --number-processes 2 -S openstreetmap-carto/openstreetmap-carto.style /path/to/data.osm.pbf
-
Generate the Mapnik XML style file:
carto project.mml > mapnik.xml
-
Use the generated
mapnik.xml
file with a map rendering tool like Mapnik or TileMill to create your maps.
For more detailed instructions and advanced configuration options, refer to the project's documentation on GitHub.
Competitor Comparisons
OpenMapTiles Vector Tile Schema Implementation
Pros of OpenMapTiles
- Optimized for vector tile rendering, resulting in faster map loading and smoother zooming
- Supports multiple languages and scripts for global map labeling
- Offers a more flexible styling system, allowing for easier customization of map appearance
Cons of OpenMapTiles
- Requires more complex setup and infrastructure compared to OpenStreetMap Carto
- May have higher storage and processing requirements for tile generation
- Less frequently updated than OpenStreetMap Carto, potentially leading to outdated map data
Code Comparison
OpenMapTiles (SQL):
CREATE OR REPLACE FUNCTION layer_water(bbox geometry, zoom_level int)
RETURNS TABLE(geometry geometry, class text) AS $$
SELECT geometry, 'ocean'::text AS class
FROM ne_10m_ocean
WHERE zoom_level < 5 AND geometry && bbox
UNION ALL
SELECT geometry, 'lake'::text AS class
FROM ne_10m_lakes
WHERE zoom_level BETWEEN 5 AND 7 AND geometry && bbox
$$ LANGUAGE SQL IMMUTABLE;
OpenStreetMap Carto (CartoCSS):
#water-areas {
[natural = 'glacier']::natural {
[zoom >= 5] {
line-width: 1.0;
line-color: @glacier-line;
polygon-fill: @glacier;
}
}
}
The code snippets demonstrate the different approaches: OpenMapTiles uses SQL for data selection and processing, while OpenStreetMap Carto uses CartoCSS for styling map features.
An open source visual editor for the 'MapLibre Style Specification'
Pros of Maputnik
- User-friendly visual editor for creating and editing map styles
- Supports multiple map providers and style formats
- Cross-platform compatibility (web-based and desktop application)
Cons of Maputnik
- Focused on style editing, not cartography or data management
- May require additional tools for comprehensive map creation
- Less integrated with OpenStreetMap ecosystem
Code Comparison
Maputnik (JSON-based style):
{
"version": 8,
"name": "Basic Style",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#f8f4f0"
}
}
]
}
OpenStreetMap Carto (CartoCSS):
Map {
background-color: @land-color;
}
#water-areas {
polygon-fill: @water-color;
polygon-gamma: 0.75;
}
While Maputnik uses JSON for style definitions, OpenStreetMap Carto employs CartoCSS. Maputnik's approach is more aligned with modern vector tile styling, whereas OpenStreetMap Carto's syntax is tailored for traditional cartography workflows.
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Pros of mapbox-gl-js
- High-performance vector rendering with WebGL
- Extensive customization options for styling and interactivity
- Supports 3D terrain and custom data sources
Cons of mapbox-gl-js
- Requires a Mapbox account and API key for full functionality
- Steeper learning curve for developers new to WebGL
- Limited built-in support for OpenStreetMap data formats
Code Comparison
openstreetmap-carto (CartoCSS):
#landcover {
[feature = 'wetland_marsh'] {
polygon-fill: @marsh;
}
}
mapbox-gl-js (JSON style):
{
"id": "landcover",
"type": "fill",
"paint": {
"fill-color": [
"match",
["get", "class"],
"wetland", "#d1e5eb",
"#ffffff"
]
}
}
openstreetmap-carto focuses on traditional cartography using CartoCSS, while mapbox-gl-js employs a JSON-based styling language for vector tiles. The latter offers more dynamic rendering capabilities but requires a different approach to map design.
Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
Pros of tileserver-gl
- Supports vector tiles, allowing for more efficient data transfer and dynamic styling
- Built-in support for multiple data sources, including MBTiles and GeoJSON
- Easier setup and configuration for serving map tiles
Cons of tileserver-gl
- Less customization options for cartography compared to openstreetmap-carto
- May require more server resources due to on-the-fly rendering of vector tiles
- Limited support for complex symbology and advanced rendering techniques
Code Comparison
openstreetmap-carto (CartoCSS):
#landcover {
[feature = 'wetland_marsh'] {
polygon-fill: @marsh;
}
}
tileserver-gl (Mapbox GL Style):
{
"id": "landcover",
"type": "fill",
"paint": {
"fill-color": [
"match",
["get", "class"],
"wetland", "#d1e5eb",
"#ffffff"
]
}
}
The code comparison shows the different approaches to styling map features. openstreetmap-carto uses CartoCSS, which is similar to traditional CSS, while tileserver-gl uses Mapbox GL Style JSON format, which is more flexible and supports data-driven styling.
MapLibre GL JS - Interactive vector tile maps in the browser
Pros of MapLibre GL JS
- Offers high-performance vector rendering and client-side styling
- Supports interactive, customizable maps with 3D terrain and buildings
- Provides a more modern, JavaScript-based approach to map rendering
Cons of MapLibre GL JS
- Steeper learning curve for developers new to vector tile-based mapping
- May require more client-side processing power, especially for complex maps
- Less suitable for traditional static map rendering use cases
Code Comparison
MapLibre GL JS:
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-74.5, 40],
zoom: 9
});
OpenStreetMap Carto:
<Style name="landcover">
<Rule>
<PolygonSymbolizer fill="#f2efe9" />
</Rule>
</Style>
MapLibre GL JS uses JavaScript to initialize and configure the map, while OpenStreetMap Carto uses XML-based styling rules. MapLibre GL JS offers a more programmatic approach, whereas OpenStreetMap Carto focuses on declarative styling for traditional tile-based rendering.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
OpenStreetMap Carto
These are the CartoCSS map stylesheets for the Standard map layer on OpenStreetMap.org.
The general purpose, the cartographic design goals and guidelines for this style are outlined in CARTOGRAPHY.md.
These stylesheets can be used in your own cartography projects, and are designed to be easily customised. They work with Kosmtik and also with the command-line CartoCSS processor.
Since August 2013 these stylesheets have been used on the OSMF tileservers (tile.openstreetmap.org), and are updated from each point release. They supersede the previous XML-based stylesheets.
Installation
You need a PostGIS database populated with OpenStreetMap data along with auxillary shapefiles. See INSTALL.md.
Contributing
Contributions to this project are welcome, see CONTRIBUTING.md for full details.
Versioning
This project follows a MAJOR.MINOR.PATCH versioning system. In the context of a cartographic project you can expect the following:
- PATCH: When a patch version is released, there would be no reason not to upgrade. PATCH versions contain only bugfixes e.g. stylesheets won't compile, features are missing by mistake, etc.
- MINOR: These are routine releases and happen every 2-5 weeks. They will contain changes to what's shown on the map, how they appear, new features added and old features removed. They may rarely contain changes to assets i.e. shapefiles and fonts but will not contain changes that require software or database upgrades.
- MAJOR: Any change the requires reloading a database, or upgrading software dependencies will trigger a major version change.
Roadmap
Initial Release (v1.0.0, December 2012)
This was a full re-implementation of the original OSM style, with only a few bugs discovered later. There's been no interest in creating further point releases in the v1.x series.
Mapnik 2 work (v2.x)
The v2.x series initially focused on refactoring the style, both to to fix glitches and to leverage new features in CartoCSS / Mapnik to simplify the stylesheets with only small changes to the output, as well as removing 'old-skool' tagging methods that are now rarely used. It then started adding new features.
Mapnik and CartoCSS update (v3.x)
The v3.x series was triggered by an update to the required Mapnik and CartoCSS versions.
Care has been taken to not get too clever with variables and expressions. While these often make it easier to customise, experience has shown that over-cleverness (e.g. interpolated entities) can discourage contributions.
Database schema change (v4.x)
The v4.x series includes osm2pgsql lua transforms and a hstore column with all other tags, allowing use of more OpenStreetMap data. Users need to reload their databases, v3.x compatibility is not maintained.
Database schema change (v5.x)
The v5.x series updates Lua tag transforms, linestring and polygon decisions have changed.
There are over 500 open requests, some that have been open for years. These need reviewing and dividing into obvious fixes, or additional new features that need some cartographic judgement.
Alternatives
There are many open-source stylesheets written for creating OpenStreetMap-based maps using Mapnik, many based on this project. Some alternatives are:
Maintainers
- Andy Allan @gravitystorm
- Daniel KoÄ @kocio-pl
- Christoph Hormann @imagico
- Lukas Sommer @sommerluk
- Joseph Eisenberg @jeisenbe
Previous maintainers
- Paul Norman @pnorman
- Michael Glanznig @nebulon42
- Matthijs Melissen @matthijsmelissen
- Mateusz Konieczny @matkoniecz
Top Related Projects
OpenMapTiles Vector Tile Schema Implementation
An open source visual editor for the 'MapLibre Style Specification'
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
MapLibre GL JS - Interactive vector tile maps in the browser
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot