Static Image

This example uses a static image as a layer source. The map view is configured with a custom projection that translates image coordinates directly into map coordinates.

import Image from '@planet/maps/layer/Image.js';
import ImageStatic from '@planet/maps/source/ImageStatic.js';
import Map from '@planet/maps/Map.js';
import Projection from 'ol/proj/Projection.js';
import React from 'react';
import View from '@planet/maps/View.js';
import {getCenter} from 'ol/extent.js';

const extent = [0, 0, 1024, 968];
const projection = new Projection({
  code: 'xkcd-image',
  units: 'pixels',
  extent,
});

function StaticImage() {
  return (
    <Map>
      <View
        options={{projection, center: getCenter(extent), zoom: 2, maxZoom: 8}}
      />
      <Image>
        <ImageStatic
          options={{
            attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
            url: 'https://imgs.xkcd.com/comics/online_communities.png',
            projection,
            imageExtent: extent,
          }}
        />
      </Image>
    </Map>
  );
}

export default StaticImage;