Considering the code below (which uses openlayers and Viglino's ol-ext), how do I disable imageSmoothingEnabled for the geoImageLayer? I am trying to achieve the same thing as in this question, but for the geoImageLayer, which is part of Viglino's ol-ext.

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    zoom: 18,
    center: ol.proj.fromLonLat([4.8728,52.3316])
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()

var geoImageLayer = new ol.layer.Image({
  name: "Georef",
  opacity: 0.5,
  source: new ol.source.GeoImage({
    url: 'image.jpg',
    imageCenter: ol.proj.fromLonLat([4.8728,52.3316]),
    projection: 'EPSG:3857',
    imageScale: [1, 1]

The internet says that this should work:

map.on('precompose', function(evt) {
  evt.context.imageSmoothingEnabled = false;

And it does work for the background OSM layer, but it does nothing for the geoImageLayer

I've also tried,

geoImageLayer.on('change', function(evt) {
  evt.target.values_.source.canvas_.canvas_.getContext('2d').imageSmoothingEnabled = false;

but it didn't do the trick. Probably because I'm modifying a copy of the actual layer, but I don't have any other ideas.

Here is a jsfiddle with the above code.

  • If you check the ol-ext source for GeoImage you will see it uses an internal canvas before rendering to the map, so you would probably need to customise that to disable smoothing. The simplest solution (tested on your jsfiddle) is to use ImageStatic instead of GeoImage. – Mike Feb 24 at 17:03
  • thanks, but I kind of need the scale and rotation of GeoImage – Andrei Feb 24 at 17:07
  • 1
    Customising the GeoImage source is easy. Make a copy of the GeoImage section of ol-ext.js and insert ctx.imageSmoothingEnabled = false; immediately after the line var ctx = canvas.getContext('2d'); It worked on your jsfiddle. – Mike Feb 24 at 17:35

Your Answer

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

Browse other questions tagged or ask your own question.