<div dir="ltr">Hello,<div><br></div><div>I'm looking for some good examples of using VectorTiles from Geoserver with an openlayer webmap. I'm just having a bit of difficulty understanding the Openlayer calls necessary. In particular, the {z} {x} {y} is throwing us off. The documentation around the openlayers method "ol.tilegrid.createXYZ" has left me with lots of questions. I'm not sure what is returned from this method.</div><div><br></div><div>There seem to be a few ways that you can construct these and I'm interested in the tradeoffs.</div><div><br></div><div><pre class="gmail-lang-js gmail-s-code-block gmail-hljs gmail-javascript" style="margin-top:0px;padding:12px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:1.30769;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;width:auto;max-height:600px;overflow:auto;border-radius:5px"><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span class="gmail-hljs-keyword" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">const</span> layer = <span class="gmail-hljs-keyword" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">new</span> ol.layer.VectorTile({
<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">style</span>: vectorStyle,
<span class="gmail-hljs-comment" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">//declutter: true,</span>
<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">source</span>: <span class="gmail-hljs-keyword" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">new</span> ol.source.VectorTile({
<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">tileGrid</span>: ol.tilegrid.createXYZ({<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">maxZoom</span>: <span class="gmail-hljs-number" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">19</span>}),
<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">format</span>: <span class="gmail-hljs-keyword" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">new</span> ol.format.MVT(),
<span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">url</span>: <span class="gmail-hljs-string" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">`https://<geoserver_host>/gwc/service/tms/1.0.0/<span class="gmail-hljs-subst" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">${layer_name}</span>@<span class="gmail-hljs-subst" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">${matrix_set}</span>@pbf/{z}/{x}/{-y}.pbf`</span>,
}),
});
</code></pre><br class="gmail-Apple-interchange-newline"></div><div><br></div><div><pre class="gmail-language-js gmail-line-numbers" style="box-sizing:border-box;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:14px;margin-top:0.5em;margin-bottom:0.5em;overflow:auto;color:black;border:1px solid rgb(238,238,238);border-radius:0px;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;word-break:normal;line-height:1.5;padding:1em 1em 1em 3.8em"><code id="example-js-source" class="gmail-language-js" style="box-sizing:border-box;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;word-break:normal;background:none;white-space:inherit;word-spacing:normal;line-height:1.5"><span class="gmail-token gmail-keyword" style="box-sizing:border-box;color:rgb(0,119,170)">ew</span> <span class="gmail-token gmail-class-name" style="box-sizing:border-box;color:rgb(221,74,104)">VectorTileLayer</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">(</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">{</span>
source<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span> <span class="gmail-token gmail-keyword" style="box-sizing:border-box;color:rgb(0,119,170)">new</span> <span class="gmail-token gmail-class-name" style="box-sizing:border-box;color:rgb(221,74,104)">VectorTileSource</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">(</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">{</span>
attributions<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span>
<span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'© OpenStreetMap contributors, Who’s On First, '</span> <span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">+</span>
<span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'Natural Earth, and <a href="http://openstreetmapdata.com">openstreetmapdata.com</a>'</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
format<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span> <span class="gmail-token gmail-keyword" style="box-sizing:border-box;color:rgb(0,119,170)">new</span> <span class="gmail-token gmail-class-name" style="box-sizing:border-box;color:rgb(221,74,104)">TopoJSON</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">(</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">{</span>
layerName<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span> <span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'layer'</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
layers<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span> <span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">[</span><span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'water'</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span> <span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'roads'</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span> <span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'buildings'</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">]</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
<span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">}</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">)</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
maxZoom<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span> <span class="gmail-token gmail-number" style="box-sizing:border-box;color:rgb(153,0,85)">19</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
url<span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">:</span>
<span class="gmail-token gmail-string" style="box-sizing:border-box;color:rgb(102,153,0)">'<a href="https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=">https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=</a>'</span> <span class="gmail-token gmail-operator" style="box-sizing:border-box;color:rgb(154,110,58);background:rgba(255,255,255,0.5)">+</span>
key<span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">,</span>
<span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">}</span><span class="gmail-token gmail-punctuation" style="box-sizing:border-box;color:rgb(153,153,153)">)</span></code></pre></div><div><br></div><div> Does openlayers have a community forum like Geoserver?</div></div>