Leaflet provides the possibility of creating non-geographical maps by using CRS.Simple where

[...] one horizontal map unit is mapped to one horizontal pixel, and idem with vertical.

For the sake of simplicity it can be said that this allows creating maps using pixels as units of measurement. However, I do not use Leaflet, I use OpenLayers (which works pretty well).

Is there any way to implement non-geographical maps in OpenLayers? Looking at its API or examples I couldn't find anything useful so far.


Thanks @Mike! The example Static Image was the right advice to look at.

The following code creates a 4000 x 2000 pixel large map with a feature representing its bounding box:

const extent = [0, 0, 4000, 2000];

const projection = new Projection({
  code: 'pixel-map',
  units: 'pixels',

const geojsonObject = {
  type: 'FeatureCollection',
  features: [
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [[0, 0], [0, extent[3]], [extent[2], extent[3]], [extent[2], 0], [0, 0]]
    // More Features
    // ...

const vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(geojsonObject),
  format: new GeoJSON()

const vectorLayer = new VectorLayer({
  source: vectorSource

const map = new Map({
  target: 'my-pixel-map',
  layers: [
  view: new View({
    center: getCenter(extent),
    zoom: 2,
    minZoom: 2,
    maxZoom: 8
| improve this answer | |

Your Answer

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

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