"Fossies" - the Fresh Open Source Software Archive

Member "user/extensions/vectortiles/tutorial.html" (22 Nov 2019, 25387 Bytes) of package /linux/www/geoserver-2.16.1-htmldoc.zip:


The requested HTML page contains a <FORM> tag that is unusable on "Fossies" in "automatic" (rendered) mode so that page is shown as HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
    4 <head>
    5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6   
    7   <title>Vector tiles tutorial &mdash; GeoServer 2.16.1 User Manual</title>
    8   <link rel="stylesheet" href="../../_static/blueprint/screen.css" type="text/css" media="screen, projection" />
    9   <link rel="stylesheet" href="../../_static/blueprint/print.css" type="text/css" media="print" /> 
   10   <!--[if IE]>
   11   <link rel="stylesheet" href="../../_static/blueprint/ie.css" type="text/css" media="screen, projection" />
   12   <![endif]-->
   13   <link rel="stylesheet" href="../../_static/default.css" type="text/css" />
   14   <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
   15   <script type="text/javascript">
   16     var DOCUMENTATION_OPTIONS = {
   17         URL_ROOT:    '../../',
   18         VERSION:     '2.16.1',
   19         COLLAPSE_MODINDEX: false,
   20         FILE_SUFFIX: '.html'
   21     };
   22   </script>
   23   <script type="text/javascript" src="../../_static/jquery.js"></script>
   24   <script type="text/javascript" src="../../_static/doctools.js"></script>
   25   <script type="text/javascript" src="../../_static/searchtools.js"></script>
   26   <script type="text/javascript" src="../../searchindex.js"></script>
   27   <link rel="shortcut icon" href="../../_static/geoserver.ico"/>
   28       <link rel="search" title="Search" href="../../search.html" />
   29       <link rel="top" title="GeoServer 2.16.1 User Manual" href="../../index.html" />
   30       <link rel="up" title="Vector Tiles" href="index.html" />
   31       <link rel="next" title="XSLT WFS output format module" href="../xslt/index.html" />
   32       <link rel="prev" title="Installing the Vector Tiles Extension" href="install.html" />
   33 </head>
   34 <body class="extensions/vectortiles/tutorial">
   35   <div id="header" class="selfclear">
   36     <div class="wrap selfclear">
   37       <div id="logo"><a href="../../index.html">GeoServer 2.16.1 User Manual</a></div>
   38       <ul id="top-nav">
   39         <li class="first"><a href="http://geoserver.org/about">About</a></li>
   40         <li><a href="http://blog.geoserver.org/">Blog</a></li>
   41         <li><a href="http://geoserver.org/download">Download</a></li>
   42         <!--<li><a href="../../index.html">Documentation</a></li>-->
   43       </ul>
   44         <form id="quick-search" action="../../search.html" method="get">
   45           <fieldset>
   46             <input type="hidden" name="check_keywords" value="yes" />
   47             <input type="hidden" name="area" value="default" />
   48             <input id="quick-search-query" type="text" name="q" accessKey="q" name="searchQuery.queryString" size="25" value="Search Documentation&hellip;" size="20" tabindex="3" onblur="if(this.value=='') this.value='Search Documentation&hellip;';" onfocus="if(this.value=='Search Documentation&hellip;') this.value='';" />
   49             <input id="quick-search-submit" type="image" value="Search" src="../../_static/chrome/search_icon_green.png" />
   50           </fieldset>
   51         </form>
   52     </div><!-- /.wrap -->
   53   </div><!-- /#header -->
   54   <div id="main">
   55     <div class="wrap selfclear">
   56       <div id="content-left" class="content-border"></div>
   57       <div id="content">
   58 <ul id="breadcrumbs">
   59   
   60   <li><a href="../../index.html">GeoServer 2.16.1 User Manual</a> &raquo;</li>
   61   <li><a href="../index.html" accesskey="U">Extensions</a> &raquo;</li>
   62   <li><a href="index.html" accesskey="U">Vector Tiles</a> &raquo;</li>
   63   <li>Vector tiles tutorial</li>
   64 </ul>
   65 <ul id="relatedlinks" class="selfclear">
   66   <li class="first">
   67     <a href="../../py-modindex.html" title="Python Module Index"
   68        accesskey="">modules</a></li>
   69   <li>
   70     <a href="../xslt/index.html" title="XSLT WFS output format module"
   71        accesskey="N">next</a>|</li>
   72   <li>
   73     <a href="install.html" title="Installing the Vector Tiles Extension"
   74        accesskey="P">previous</a>|</li>
   75 </ul>
   76         
   77   <div class="section" id="vector-tiles-tutorial">
   78 <span id="vectortiles-tutorial"></span><h1>Vector tiles tutorial<a class="headerlink" href="#vector-tiles-tutorial" title="Permalink to this headline"></a></h1>
   79 <p>This tutorial will show how to use the GeoServer vector tiles output.</p>
   80 <div class="section" id="why-use-vector-tiles">
   81 <h2>Why use vector tiles?<a class="headerlink" href="#why-use-vector-tiles" title="Permalink to this headline"></a></h2>
   82 <p>The advantages of vector tiles are;</p>
   83 <ul class="simple">
   84 <li><strong>Rendering is done by the client</strong> (for example, OpenLayers), not by the server. This allows different maps/applications to style a map differently without having to reconfigure GeoServer.</li>
   85 <li><strong>The size of a vector tile is usually smaller</strong> than an image tile, resulting in faster data transfer and lower bandwidth usage.</li>
   86 <li>GeoWebCache, embedded with GeoServer efficiently stores the vector tile data. Since styling is done by the client, not the server, <strong>GeoWebCache only needs to store one tile for all different styles</strong>.</li>
   87 <li>Because the vector data is available on the client, very <strong>high-resolution maps can be drawn without corresponding increases in bandwidth</strong>.</li>
   88 <li><strong>The client has native access to the actual feature information</strong> (attributes and geometry), allowing for very sophisticated rendering.</li>
   89 </ul>
   90 <p>On the other hand, the main disadvantage of vector tiles is that the geographic data may need to be pre-processed to allow the client to do the drawings it requires (similar to preprocessing data for image maps). With this in mind, <strong>vector tiles should only be used for rendering</strong>.</p>
   91 </div>
   92 <div class="section" id="vector-tile-formats">
   93 <h2>Vector tile formats<a class="headerlink" href="#vector-tile-formats" title="Permalink to this headline"></a></h2>
   94 <p>GeoServer can also produce vector tiles in three formats: GeoJSON, TopoJSON, and MapBox Vector (MVT). These are also supported by OpenLayers and other clients.</p>
   95 <div class="admonition warning">
   96 <p class="first admonition-title">Warning</p>
   97 <p class="last">When using vector tiles, be sure to use an up-to-date client. Older clients do not support all vector tiles capabilites and may result in rendering errors. We recommend using the latest version of OpenLayers (Currently v5.3.0).</p>
   98 </div>
   99 <ul class="simple">
  100 <li>MVT is the preferred format for production.</li>
  101 </ul>
  102 <table border="1" class="non-responsive docutils">
  103 <colgroup>
  104 <col width="33%" />
  105 <col width="33%" />
  106 <col width="33%" />
  107 </colgroup>
  108 <thead valign="bottom">
  109 <tr class="row-odd"><th class="head">Format</th>
  110 <th class="head">MIME</th>
  111 <th class="head">Description</th>
  112 </tr>
  113 </thead>
  114 <tbody valign="top">
  115 <tr class="row-even"><td><a class="reference external" href="https://github.com/mapbox/vector-tile-spec">MapBox Vector (MVT)</a></td>
  116 <td><code class="docutils literal notranslate"><span class="pre">application/vnd.mapbox-vector-tile</span></code></td>
  117 <td><strong>Recommended Format</strong> This is an efficient binary format that is widely supported by almost all Vector Tile applications.</td>
  118 </tr>
  119 <tr class="row-odd"><td><a class="reference external" href="http://geojson.org/">GeoJSON</a></td>
  120 <td><code class="docutils literal notranslate"><span class="pre">application/json;type=geojson</span></code></td>
  121 <td>This is a human readable JSON format.  Although many geo-spatial applications support GeoJSON datasets, few Vector Tile applications support tiles in this format.  Supported by Open Layers 3.</td>
  122 </tr>
  123 <tr class="row-even"><td><a class="reference external" href="https://github.com/mbostock/topojson/wiki">TopoJSON</a></td>
  124 <td><code class="docutils literal notranslate"><span class="pre">application/json;type=topojson</span></code></td>
  125 <td>This is a very complex, but somewhat human readable JSON format that is good for polygon coverages.  It is not a widely supported and very few Vector Tile applications support it.  Suported by Open Layers 3.</td>
  126 </tr>
  127 </tbody>
  128 </table>
  129 </div>
  130 <div class="section" id="publish-vector-tiles-in-geowebcache">
  131 <h2>Publish vector tiles in GeoWebCache<a class="headerlink" href="#publish-vector-tiles-in-geowebcache" title="Permalink to this headline"></a></h2>
  132 <p>We’ll be publishing our vector tiles through GeoWebCache and publishing the layer in a custom OpenLayers application.</p>
  133 <p>For this tutorial, we’ll be using the layer <code class="docutils literal notranslate"><span class="pre">opengeo:countries</span></code> to show off the capabilities, though with slight modifications, any layer will do.</p>
  134 <div class="admonition note">
  135 <p class="first admonition-title">Note</p>
  136 <p class="last">Download the <a class="reference external" href="http://www.naturalearthdata.com/downloads/110m-cultural-vectors">Admin 0 - Countries</a> shapefile and publish the layer as <code class="docutils literal notranslate"><span class="pre">opengeo:countries</span></code>.</p>
  137 </div>
  138 <ol class="arabic">
  139 <li><p class="first">In the GeoServer admin interface, click <code class="docutils literal notranslate"><span class="pre">Tile</span> <span class="pre">Layers</span></code> under <code class="docutils literal notranslate"><span class="pre">Tile</span> <span class="pre">Caching</span></code>.</p>
  140 <div class="figure" id="id1">
  141 <img alt="../../_images/tilelayerslink.png" src="../../_images/tilelayerslink.png" />
  142 <p class="caption"><span class="caption-text">Tile Layers</span></p>
  143 </div>
  144 </li>
  145 <li><p class="first">Click <code class="docutils literal notranslate"><span class="pre">opengeo:countries</span></code> in the list of layers.</p>
  146 </li>
  147 <li><p class="first">By default the tile formats are <code class="docutils literal notranslate"><span class="pre">image/jpeg</span></code> and <code class="docutils literal notranslate"><span class="pre">image/png</span></code>. Check the boxes for the following vector tile formats:</p>
  148 <ul class="simple">
  149 <li><code class="docutils literal notranslate"><span class="pre">application/json;type=geojson</span></code></li>
  150 <li><code class="docutils literal notranslate"><span class="pre">application/json;type=topojson</span></code></li>
  151 <li><code class="docutils literal notranslate"><span class="pre">application/vnd.mapbox-vector-tile</span></code></li>
  152 </ul>
  153 <div class="figure" id="id2">
  154 <img alt="../../_images/vectortiles_tileformats.png" src="../../_images/vectortiles_tileformats.png" />
  155 <p class="caption"><span class="caption-text">Vector tiles tile formats</span></p>
  156 </div>
  157 </li>
  158 <li><p class="first">Click <code class="docutils literal notranslate"><span class="pre">Save</span></code>.</p>
  159 </li>
  160 </ol>
  161 <p>Our layer is now ready to be served.</p>
  162 </div>
  163 <div class="section" id="create-openlayers-application">
  164 <h2>Create OpenLayers application<a class="headerlink" href="#create-openlayers-application" title="Permalink to this headline"></a></h2>
  165 <ol class="arabic">
  166 <li><p class="first">Create a <code class="docutils literal notranslate"><span class="pre">www/vectortiles</span></code> directory inside your GeoServer Data Directory.</p>
  167 </li>
  168 <li><p class="first">Download the <a class="reference external" href="http://openlayers.org/download/">latest version of OpenLayers</a>.</p>
  169 </li>
  170 <li><p class="first">Extract the following files to from the downloaded archive to the directory created in step 1:</p>
  171 <ul class="simple">
  172 <li><code class="docutils literal notranslate"><span class="pre">ol.js</span></code></li>
  173 <li><code class="docutils literal notranslate"><span class="pre">ol-debug.js</span></code></li>
  174 <li><code class="docutils literal notranslate"><span class="pre">ol.css</span></code></li>
  175 </ul>
  176 </li>
  177 <li><p class="first">In a text editor, create a new file with the following content:</p>
  178 <div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html --&gt;</span>
  179 <span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
  180 <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
  181   <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Vector tiles<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
  182 <span class="hll">  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;ol.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
  183 </span>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;ol.css&quot;</span><span class="p">&gt;</span>
  184   <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
  185     <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span> <span class="p">{</span>
  186       <span class="k">font-family</span><span class="p">:</span> <span class="kc">sans-serif</span><span class="p">;</span>
  187       <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
  188     <span class="p">}</span>
  189     <span class="p">.</span><span class="nc">map</span> <span class="p">{</span>
  190       <span class="k">height</span><span class="p">:</span> <span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
  191       <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
  192     <span class="p">}</span>
  193   <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
  194 <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
  195 <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
  196   <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>Mapbox Protobuf - vector tiles<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
  197   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;map&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;map&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
  198   <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  199 
  200   <span class="kd">var</span> <span class="nx">style_simple</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">Style</span><span class="p">({</span>
  201     <span class="nx">fill</span><span class="o">:</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">Fill</span><span class="p">({</span>
  202       <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ADD8E6&#39;</span>
  203     <span class="p">}),</span>
  204     <span class="nx">stroke</span><span class="o">:</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">Stroke</span><span class="p">({</span>
  205       <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#880000&#39;</span><span class="p">,</span>
  206       <span class="nx">width</span><span class="o">:</span> <span class="mi">1</span>
  207     <span class="p">})</span>
  208   <span class="p">});</span>
  209 
  210   <span class="kd">function</span> <span class="nx">simpleStyle</span><span class="p">(</span><span class="nx">feature</span><span class="p">)</span> <span class="p">{</span>
  211     <span class="k">return</span> <span class="nx">style_simple</span><span class="p">;</span>
  212   <span class="p">}</span>
  213 
  214   <span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="s1">&#39;opengeo:countries&#39;</span><span class="p">;</span>
  215   <span class="kd">var</span> <span class="nx">projection_epsg_no</span> <span class="o">=</span> <span class="s1">&#39;900913&#39;</span><span class="p">;</span>
  216   <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">Map</span><span class="p">({</span>
  217     <span class="nx">target</span><span class="o">:</span> <span class="s1">&#39;map&#39;</span><span class="p">,</span>
  218     <span class="nx">view</span><span class="o">:</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">View</span><span class="p">({</span>
  219       <span class="nx">center</span><span class="o">:</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">],</span>
  220       <span class="nx">zoom</span><span class="o">:</span> <span class="mi">2</span>
  221     <span class="p">}),</span>
  222     <span class="nx">layers</span><span class="o">:</span> <span class="p">[</span><span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">layer</span><span class="p">.</span><span class="nx">VectorTile</span><span class="p">({</span>
  223       <span class="nx">style</span><span class="o">:</span><span class="nx">simpleStyle</span><span class="p">,</span>
  224       <span class="nx">source</span><span class="o">:</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">source</span><span class="p">.</span><span class="nx">VectorTile</span><span class="p">({</span>
  225         <span class="nx">tilePixelRatio</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// oversampling when &gt; 1</span>
  226         <span class="nx">tileGrid</span><span class="o">:</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">tilegrid</span><span class="p">.</span><span class="nx">createXYZ</span><span class="p">({</span><span class="nx">maxZoom</span><span class="o">:</span> <span class="mi">19</span><span class="p">}),</span>
  227         <span class="nx">format</span><span class="o">:</span> <span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">format</span><span class="p">.</span><span class="nx">MVT</span><span class="p">(),</span>
  228         <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;/geoserver/gwc/service/tms/1.0.0/&#39;</span> <span class="o">+</span> <span class="nx">layer</span> <span class="o">+</span>
  229             <span class="s1">&#39;@EPSG%3A&#39;</span><span class="o">+</span><span class="nx">projection_epsg_no</span><span class="o">+</span><span class="s1">&#39;@pbf/{z}/{x}/{-y}.pbf&#39;</span>
  230       <span class="p">})</span>
  231     <span class="p">})]</span>
  232   <span class="p">});</span>
  233   <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
  234 <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
  235 <span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
  236 </pre></div>
  237 </div>
  238 </li>
  239 <li><p class="first">Save this file in the directory created above as <code class="docutils literal notranslate"><span class="pre">index.html</span></code>.</p>
  240 </li>
  241 <li><p class="first">Navigate to <code class="docutils literal notranslate"><span class="pre">http://localhost:8080/geoserver/www/vectortiles/index.html</span></code> and verify that the output shows without any errors.</p>
  242 <div class="admonition note">
  243 <p class="first admonition-title">Note</p>
  244 <p class="last">If your GeoServer is deployed at a server other than <code class="docutils literal notranslate"><span class="pre">http://localhost:8080/geoserver/</span></code>, then please adjust the above URL.</p>
  245 </div>
  246 <div class="figure" id="id3">
  247 <img alt="../../_images/vectortileoutput.png" src="../../_images/vectortileoutput.png" />
  248 <p class="caption"><span class="caption-text">Vector tile output</span></p>
  249 </div>
  250 </li>
  251 </ol>
  252 <p>These tiles are being rendered by the OpenLayers client.</p>
  253 </div>
  254 <div class="section" id="styling-vector-tiles">
  255 <h2>Styling vector tiles<a class="headerlink" href="#styling-vector-tiles" title="Permalink to this headline"></a></h2>
  256 <p>Since these tiles are rendered in the client, we need only change the styling instructions inside the client application. No changes to GeoServer are required, and tiles will not have to be regenerated.</p>
  257 <ol class="arabic">
  258 <li><p class="first">Change the fill color to light green:</p>
  259 <div class="highlight-none notranslate"><div class="highlight"><pre><span></span>var style_simple = new ol.style.Style({
  260   fill: new ol.style.Fill({
  261 <span class="hll">    color: &#39;lightgreen&#39;
  262 </span>  }),
  263    stroke: new ol.style.Stroke({
  264       color: &#39;#880000&#39;,
  265       width: 1
  266     })
  267 }) ;
  268 </pre></div>
  269 </div>
  270 </li>
  271 <li><p class="first">Save the file and reload the application.</p>
  272 <div class="figure" id="id4">
  273 <img alt="../../_images/vectortileoutputgreen.png" src="../../_images/vectortileoutputgreen.png" />
  274 <p class="caption"><span class="caption-text">Vector tile output with alternate color</span></p>
  275 </div>
  276 </li>
  277 <li><p class="first">We can also do attributed-based styling. This dataset contains has a property (<code class="docutils literal notranslate"><span class="pre">region_un</span></code>) which contains the region the country is in. Let’s highlight countries in Africa by adding another style definition below the existing style:</p>
  278 <div class="highlight-html notranslate"><div class="highlight"><pre><span></span> var style_highlighted = new ol.style.Style({
  279    fill: new ol.style.Fill({
  280 <span class="hll">     color: &#39;yellow&#39;
  281 </span>   }),
  282    stroke: new ol.style.Stroke({
  283      color: &#39;#880000&#39;,
  284      width: 1
  285    })
  286  });
  287 </pre></div>
  288 </div>
  289 </li>
  290 <li><p class="first">Replace the existing style function:</p>
  291 <div class="highlight-html notranslate"><div class="highlight"><pre><span></span> function simpleStyle(feature) {
  292 <span class="hll">   return style_simple;
  293 </span> }
  294 </pre></div>
  295 </div>
  296 <p>with the following:</p>
  297 <div class="highlight-html notranslate"><div class="highlight"><pre><span></span> function simpleStyle(feature) {
  298 <span class="hll">   if (feature.get(&quot;region_un&quot;) == &quot;Africa&quot;) {
  299 </span><span class="hll">     return style_highlighted;
  300 </span><span class="hll">   }
  301 </span><span class="hll">   return style_simple;
  302 </span> }
  303 </pre></div>
  304 </div>
  305 </li>
  306 <li><p class="first">Save the file and reload the application.</p>
  307 <div class="figure" id="id5">
  308 <img alt="../../_images/vectortileoutputafrica.png" src="../../_images/vectortileoutputafrica.png" />
  309 <p class="caption"><span class="caption-text">Vector tile output with Africa highlighted</span></p>
  310 </div>
  311 </li>
  312 </ol>
  313 </div>
  314 </div>
  315 
  316 
  317       <div class="selfclear pagination-nav">
  318           <div class="leftwise"><strong>Previous</strong>: <a href="install.html" title="previous chapter">Installing the Vector Tiles Extension</a></div>
  319           <div class="rightwise"><strong>Next</strong>: <a href="../xslt/index.html" title="next chapter">XSLT WFS output format module</a></div>
  320       </div>
  321       </div><!-- /#content> -->
  322       <div id="content-right" class="content-border"></div>
  323   <div id="sidebar" class="contrast">
  324       <div id="toc" class="section">
  325         <h3 class="pngfix">Table Of Contents</h3>
  326         <ul>
  327 <li><a class="reference internal" href="#">Vector tiles tutorial</a><ul>
  328 <li><a class="reference internal" href="#why-use-vector-tiles">Why use vector tiles?</a></li>
  329 <li><a class="reference internal" href="#vector-tile-formats">Vector tile formats</a></li>
  330 <li><a class="reference internal" href="#publish-vector-tiles-in-geowebcache">Publish vector tiles in GeoWebCache</a></li>
  331 <li><a class="reference internal" href="#create-openlayers-application">Create OpenLayers application</a></li>
  332 <li><a class="reference internal" href="#styling-vector-tiles">Styling vector tiles</a></li>
  333 </ul>
  334 </li>
  335 </ul>
  336 
  337         <div class="section-footer"></div>
  338       </div>
  339         <div class="section">
  340           <h3>Continue Reading</h3>
  341           <ul>
  342             <li>Previous: <a href="install.html" title="previous chapter">Installing the Vector Tiles Extension</a></li>
  343             <li>Next: <a href="../xslt/index.html" title="next chapter">XSLT WFS output format module</a></li>
  344           </ul>
  345         </div>
  346         <div class="section">
  347         <h3>This Page</h3>
  348         <ul class="this-page-menu">
  349                 
  350         <li><a href="https://github.com/geoserver/geoserver/tree/master/doc/en/user/source/extensions/vectortiles/tutorial.rst">Edit</a></li>
  351         </ul>
  352         </div>
  353   </div><!-- /#sidebar -->
  354   </div><!-- /.wrap> -->
  355 </div><!-- /#main -->
  356 <div id="footer">
  357   <div class="wrap">
  358     &copy; Copyright 2019, Open Source Geospatial Foundation. License <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a>.
  359     Last updated on Nov 22, 2019.
  360     Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>.
  361   </div><!-- /.wrap> -->
  362 </div><!-- /#footer -->
  363   </body>
  364 </html>