I want to set up a local WMTS with GeoServer. There are a couple of example data layers such as 'topp:states' which has the EPSG:4326 projection. I'm using the default configuration of GeoServer and testing it with OpenLayers like this:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

const projection = getProjection('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(14);
const matrixIds = new Array(14);
for (let z = 0; z < 14; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = "EPSG:4326:" + z;

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
      opacity: 0.7
    new TileLayer({
      opacity: 0.7,
      source: new WMTS({
        attributions: '...',
        url: 'http://localhost:8080/geoserver/gwc/service/wmts',
        layer: 'topp:states',
        matrixSet: 'EPSG:4326',
        format: 'image/png',
        projection: projection,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: matrixIds
  target: 'map',
  controls: defaultControls({
    attributionOptions: {
      collapsible: false
  view: new View({
    center: [-11158582, 4813697],
    zoom: 4

But it shows me the map on the wrong location. What am I missing?

enter image description here


Your map is in metres (EPSG:3857) and your tiles are in degrees (EPSG:4326) so they don't line up. So change your tiles to match your map.

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.