This is the my script that I am currently using to show my GeoServer layers in OpenLayers:

<!DOCTYPE html>
    <title>WMTS Layer from Capabilities</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
    <div id="map" class="map"></div>
      proj4.defs('EPSG:27700','+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
      const proj27700 = ol.proj.get('EPSG:27700');
      const center_point = [394108.6719, 331807.5317];

      var parser = new ol.format.WMTSCapabilities();
      var map;

      fetch('http://localhost:8080/geoserver/ui/gwc/service/wmts?request=GetCapabilities').then(function(response) {
        return response.text();
      }).then(function(text) {
        var result = parser.read(text);
        var options = ol.source.WMTS.optionsFromCapabilities(result, {
          layer: 'intersects_new',
          matrixSet: 'EPSG:27700',
          crossOrigin: 'anonymous'

        map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.XYZ({
                attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Imagery/MapServer">ArcGIS</a> 2018',
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
              crossOrigin: 'anonymous'
            new ol.layer.Tile({
              opacity: 1,
              source: new ol.source.WMTS((options))
          target: 'map',
          view: new ol.View({
            projection: proj27700,
            center: center_point,
            zoom: 6

The intersect_new layer is a SQL view, which is working and uses default parameters I set in GeoServer. I would like to use the viewparams to change the parameters as in the below link:


I have gone through the OpenLayers documentation and I can't find viewparams as an option for either WMS or WMTS requests. Does anyone know how I can add this as an option to my fetch request?


If you need to set viewparams, you just need to change params options in the WMS

source: new ol.source.TileWMS({
  url: 'https://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'ui:intersects_new', 'TILED': true, VERSION: '1.1.1', viewparams: 'district:Barnet'},
  serverType: 'geoserver',
  // Countries have transparency, so do not fade tiles:
  transition: 0

For WMTS, with your code, add

var options = ol.source.WMTS.optionsFromCapabilities(result, {
  layer: 'intersects_new',
  matrixSet: 'EPSG:27700',
  crossOrigin: 'anonymous',
  viewparams: 'district:Barnet'

PS: I'm not sure WMTS support viewparams option

| improve this answer | |
  • viewparams works for WMS, sadly it doesn't seem to work WMTS. Thanks for the answer! – Trashmonk Jun 25 '18 at 10:26

For WMTS any additional parameters not supported by OpenLayers can be added using a custom tile url function:

var options = ol.source.WMTS.optionsFromCapabilities(result, {
  layer: 'intersects_new',
  matrixSet: 'EPSG:27700',
  crossOrigin: 'anonymous''

var source = new ol.source.WMTS(options);
var defaultTileUrlFunction = source.getTileUrlFunction().bind(source);

source.setTileUrlFunction(function(tileCoord, pixelRatio, projection) {
    return defaultTileUrlFunction(tileCoord, pixelRatio, projection) + '&viewparams=district:Barnet';
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.