I'm trying to display some raster images hosted from GeoServer using OpenLayers. Following this example from OpenLayers website, it seems I could achieve it by consume the data through "xyz" Using the help from here, I was able to get the xyz url path from:http://localhost:8080/geoserver/gwc/service/tms/1.0.0 after enable tile cache for TMS service and GeoWebCache layers.

Though after I add the layer to the map, they look completely off, like shown below. enter image description here

This is the one of the default image file provided by GeoServer "A sample ArcGrid file", below is what it looks from the geoserver: enter image description here

Here is my code snippet:

const test = new TileLayer({
  source: new XYZ({
    url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/nurc%3AArc_Sample@EPSG%3A4326@png/{z}/{x}/{y}.png'

const centerLocation = [-75.6972, 45.4215];
const map = new Map({
  layers: [test],
  // layers: [vector],
  interactions : defaults({doubleClickZoom :false}),
  target: 'map',
  view: new View({
    projection: 'EPSG:4326',
    center: centerLocation,
    zoom: 12

Can someone tell me why the map is so wrong?

I had a feeling it's the tile size or projections

  • The source appears (as well as the view) to be in an EPSG:4326 projection, will must be specified. You may also need the tileSize (256 is default) and maxResolution (whether the first zoom level fits horizontally or vertically (so zoom 0 has two tiles) TMS should also use {-y} placeholder in the url Example codesandbox.io/s/xyz-esri-4326-512-forked-6eshil?file=/main.js
    – Mike
    Jul 25, 2022 at 17:35
  • Thanks for the comment mike, do you mean add the projection, tilesize and the maxResoultion to the source? How do I calculate the maxResoultion and the tileSize for the layer? or is it displayed somewhere from the geoserver?
    – MaxG
    Jul 25, 2022 at 19:02
  • Those are the most common values. What do you see if you open http://localhost:8080/geoserver/gwc/service/tms/1.0.0/nurc%3AArc_Sample@EPSG%3A4326@png/0/0/0.png (half or full world, and size of image?)
    – Mike
    Jul 25, 2022 at 19:19
  • It's half of the world, what do you mean by TMS should also use {-y}? TIA!
    – MaxG
    Jul 25, 2022 at 19:37

1 Answer 1


Not all your information is provided we will need to know a few things:

  • What map projection are your source rasters in (gdalinfo).
  • Have the original Rasters in Openlayers been correctly georeferenced before you put the raster files into the Geoserver system and XYZ tiles preperations done.
  • Once you know this you will then know how to proceed in Geoserver and Openlayers-Leaflet.
  • If you are using a custom CRS in your geoserver source Rasters then these will have to be transferred over to the Openlayers system (Proj4) and the map reprojected to the custom CRS system/likewise with Leaflet.
  • If the source rasters are in EPSG:4326 and or EPSG:3857 then these are provided inhouse by Openlayers and or Leaflet so you may not need Proj4.
  • You are using the XYZ tile layer option you may need to process your orignal Rasters into this layout in QGIS takes a while these are best for basemaps ie:OSM url (I am unfamiliar with this feature to load my own rasters). In geoserver a better option may be a simple Raster Tile Layer loaded into your map via WMS as your service is not time based from what i can see.

This problem hints at possibly a Projection problem and pre production issue as your Geoserver layer preview loads the map correctly and your Openlayers example connected to geoserver doesnt. Is also revealed through the misalignment and misplacement of your Browser map tiles.

  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Nov 20, 2022 at 21:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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