title: Combining an ImageLayer and VectorLayer in OpenLayers 6
body: <p>I'm using <a href="https://openlayers.org/" rel="nofollow noreferrer">OpenLayers</a> 6.3.1, trying to create a VectorLayer with some basic shapes on top of a simple static ImageLayer. </p>
  
  <p>Basically, I'm trying to put the shapes from <a href="https://openlayers.org/en/latest/examples/polygon-styles.html" rel="nofollow noreferrer">this example</a> on top of <a href="https://openlayers.org/en/latest/examples/static-image.html" rel="nofollow noreferrer">this static image example</a>.</p>
  
  <p>When I add the view's custom projection setting, I can see my image. When I remove it (let it default to 'EPSG:3857'), I can see the shapes.</p>
  
  <p>I've tried adding shapes with different coordinates, but I can't get them to show up on top of my image!</p>
  
  <p>Here's my initialization code. I left some comments in so you can see some of the things I'm trying to mess with. Can anyone help me set this up? I'm not working with any maps or map data for this application. It's an image annotation system, and I just want to be dealing with simple Cartesian co-ordinates.</p>
  
  <pre><code>const thumbnail = this.asset.getThumbnail();
  const img = this.asset.getImage();
  
  const extent = [
      0, 0,
      img.width, img.height
  ];
  
  const projection = new Projection({
      code: 'Flatland:1',
      units: 'pixels',
      extent: extent
  });
  
  const styles = [
      new Style({
          stroke: new Stroke({
              color: 'blue',
              width: 3
          }),
          fill: new Fill({
              color: 'rgba(0, 0, 255, 0.1)'
          })
      }),
      new Style({
          image: new CircleStyle({
              radius: 5,
              fill: new Fill({
                  color: 'orange'
              })
          }),
          geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new MultiPoint(coordinates);
          }
      })
  ];
  
  const geojsonObject = {
      type: 'FeatureCollection',
      crs: {
          type: 'name',
          properties: {
              //name: 'EPSG:3857'                                                                                                                                           
              name: 'Flatland:1'
          }
      },
      features: [
          {
              type: 'Feature',
              geometry: {
                  type: 'Polygon',
                  coordinates: [[
                      [-5e6, 6e6],
                      [-5e6, 8e6],
                      [-3e6, 8e6],
                      [-3e6, 6e6],
                      [-5e6, 6e6]
                  ]]
              }
          },
          {
              type: 'Feature',
              geometry: {
                  type: 'Polygon',
                  coordinates: [[
                      [63, 19.5],
                      [63, 5.5],
                      [28, 5.5],
                      [30, 19.5],
                      [63, 19.5],
                      [75, 22.5]
                  ]]
              }
          }
      ]
  };
  
  this.map = new Map({
      target: `map-${this.props.asset.id}`,
      controls: [],
      interactions: [],
      layers: [
          new ImageLayer({
              source: new Static({
                  url: thumbnail,
                  projection: projection,
                  imageExtent: extent
              })
          }),
          new VectorLayer({
              source: new VectorSource({
                  features: (
                      new GeoJSON(/*{dataProjection: 'Flatland:1'}*/)
                  ).readFeatures(
                      geojsonObject
                      /*, {dataProjection: 'Flatland:1',                                                                                                                    
                        featureProjection: 'Flatland:1'                                                                                                                     
                        }*/
                  )
              }),
              style: styles
          })
      ],
      view: new View({
          projection: projection,
          center: getCenter(extent),
          //center: [0, 3000000],                                                                                                                                           
          //center: [0, 300],                                                                                                                                               
          zoom: 1
      })
  });
  </code></pre>