schema.html

---
layout: page
title: Open vector tile schema for OpenStreetMap layers
description: Vector Tile Schema describes how are vector data organized into different thematic layers and which attribute and values each layer contains.
---
<style>
  #layernav {
    top: 250px;
    position: fixed;
  }
  #layernav.top {
    top: 10px;
  }
  .layer-title {
    display: inline-block;
  }
  .layer-title {
    display: inline-block;
  }
  .layer-btn {
    margin-left: 10px;
    margin-top: 28px;
    float: right;
    display: inline-block;
    padding: 10px;
    line-height: 1.2;
    height: auto;
  }
  .layer-diagram-btn {
    background: #cacaca;
  }
  .layer-diagram-btn:hover {
    background: #aeaeae;
  }
  h2.main:before{
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    margin: 6px 10px 6px 0;
    background: #898989;
  }
  h2:not(.main){
    font-size: 24px;
  }
  h3{
    font-size: 18px;
  }
  a code {
    color: #8791c7;
  }
  @media (max-width: 900px) {
    #layernav {
      display: none;
    }
    .layer-btn {
      display: none;
    }
  }
</style>
<div class="container">
  <div class="row">
    <div class="col3 padx-0">
      <div id="layernav">
        <p class="b mar-0"><a class="btn" href="/inspect/">Inspect</a></p>
        <h3>Layers</h3>
        <ul>
          {% for page in site.pages %}
          {% if page.category == 'layer' %}
          <li><a href="#{{ page.title }}">{{ page.title }}</a></li>
          {% endif %}
          {% endfor %}
        </ul>
        <h3 class="padt-4">Tools</h3>
        <p><a href="https://www.maptiler.com/cloud/customize/">Style editor</a></p>
      </div>
    </div>
    <div class="col9">
      <p>The vector tile schema describes how the vector data is organized into different thematic layers and which attribute and values each layer contains. This is useful for writing a map style and allows for alternative implementations of a schema.
      </p>
      <p>The OpenMapTiles schema is open (CC-BY) and you are free to use, extend or <a href="https://github.com/openmaptiles/openmaptiles">build upon the existing implementation</a> (BSD license). Attribution is required. Please properly reference OpenMapTiles if you build upon the schema.
      </p>
      <p>The vector tile schema has been developed by <a href="https://www.klokantech.com/">Klokan Technologies GmbH</a> and was initially modelled after the cartography of the <a href="https://carto.com/location-data-services/basemaps/">Carto Basemap Positron</a>. The vector tile schema has been refined and improved in cooperation with the <a href="https://www.mediawiki.org/wiki/Maps">Wikimedia Foundation</a> and is heavily influenced by the many years Paul Norman's experience of creating maps from OpenStreetMap.
      </p>
      <p>Schema <a href="https://data.maptiler.com/changelog/">updates and changelog</a>.</p>
      <h1 class="padb-0 padt-2 mary-0">Definition of layers</h1>
      {% for page in site.pages %}
      {% if page.category == 'layer' %}
      <article class="page--article">
        <div class="clearfix">
          <h2 id="{{ page.title }}" class="layer-title main">{{ page.title }}</h2>
          <a class="btn layer-btn" href="https://github.com/openmaptiles/openmaptiles/tree/master/layers/{{page.title}}">View on GitHub</a>
          <button class="btn layer-btn layer-diagram-btn" >Show Diagrams</button>
        <div>
        {{ page.content | markdownify }}
        <div class="layer-diagrams" style="display: none;">
          <img alt="ETL diagram" src="/media/mapping_{{ page.title }}.png" />
          <img alt="Mapping diagram" src="/media/etl_{{ page.title }}.png" />
        </div>
      </article>
      {% endif %}
      {% endfor %}

    </div>
  </div>
</div>
<script>
window.addEventListener('scroll', function(e) {
  var layernav = document.getElementById('layernav')
  if(window.scrollY > 210) {
    layernav.className = "top"
  } else {
    layernav.className = ""
  }
});

[].forEach.call(document.querySelectorAll('.layer-diagram-btn'), function(btn) {
  btn.addEventListener("click", function() {
    [].forEach.call(document.querySelectorAll('.layer-diagrams'), function(diagram) {
      diagram.style.display = 'block';
    });
    [].forEach.call(document.querySelectorAll('.layer-diagram-btn'), function(btn) {
      btn.style.display = 'none';
    });
  });
});
</script>