title: Keep Coordinates while Rotating Static Image in Openlayers
body: <p>I'm currently working a project where to solve the requirements, I've added an static image as an ImageLayer, and generated an projecting on this to create logical coordinates for the end user.</p>
  
  <p>My code for the map and initial layer looks like this (please note that i'm using Angular):</p>
  
  <pre><code>    private createMap(id): OlMap {
        const extent = [0, 0, 160, 160];
        const projection = new Projection({
          code: 'FPT 5th Floor',
          units: 'pixels',
          extent
        });
  
        const map = new OlMap({
          layers: [
            new ImageLayer({
              source: new Static({
                url: '/assets/t5-testing-Model.png',
                projection,
                imageExtent: extent,
                rotation: 1.54
              }),
            }),
          ],
          target: id,
          view: new OlView({
            projection,
            center: getCenter(extent),
            zoom: 2,
            maxZoom: 8,
          })
        });
  
        return map;
      }
  
  
      public getMap() {
        const id = 'map';
  
        if (!this.map[id]) {
          this.map[id] = this.createMap(id);
        }
        return this.map[id];
      }
  
  </code></pre>
  
  <p>This perfectly out of the box, and my map looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ez2tN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ez2tN.png" alt="image"></a></p>
  
  <p>But when i rotate, my vector layers stay on the correct coordinates. But the imagelayer is skewed:</p>
  
  <p><a href="https://i.stack.imgur.com/WK6Tr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WK6Tr.png" alt="image"></a></p>
  
  <p>How would i go ahead with correcting this?</p>