OpenLayers

https://openlayers.org/doc/
Admin
OpenLayers is a JavaScript library for displaying maps and geographic data on web pages with support...
Tokens:5,819
Snippets:73
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Create and Start a New OpenLayers Project

Source: https://openlayers.org/doc/quickstart.html

Use `npm create ol-app` to scaffold a new project, `cd` into the directory, and `npm start` to launch the development server.

```bash
npm create ol-app my-app
cd my-app
npm start

```

--------------------------------

### Install Proj4js Library

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Install the Proj4js library using npm, which is required for handling custom projections not supported by default in OpenLayers.

```bash
npm install proj4

```

--------------------------------

### Complete Map Initialization Example

Source: https://openlayers.org/doc/tutorials/concepts.html

Combines all essential components (Map, View, Source, Layer) into a single script to render a functional map with OpenStreetMap tiles.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';

new Map({
  layers: [
    new TileLayer({source: new OSM()}),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  target: 'map',
});
```

--------------------------------

### Initialize Map with Corrected Coordinates using fromLonLat

Source: https://openlayers.org/doc/faq.html

This example demonstrates the correct way to set the map center by transforming longitude and latitude coordinates to the Web Mercator projection using `fromLonLat()` before passing them to the map view.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import {fromLonLat} from 'ol/proj.js';

const washingtonLonLat = [-77.036667, 38.895];
const washingtonWebMercator = fromLonLat(washingtonLonLat);

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    center: washingtonWebMercator,
    zoom: 8
  })
});

```

--------------------------------

### Basic Map Setup with Different Source and View Projections

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Configure a map with a TileWMS layer and a view, specifying different projections for the source and the view. OpenLayers will automatically reproject the raster data.

```javascript
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile.js';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  view: new View({
    projection: 'EPSG:3857', // here is the view projection
    center: [0, 0],
    zoom: 2,
  }),
  layers: [
    new TileLayer({
      source: new TileWMS({
        projection: 'EPSG:4326', // here is the source projection
        url: 'https://ahocevar.com/geoserver/wms',
        params: {
          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
        },
      }),
    }),
  ],
});

```

--------------------------------

### Center Map on Specific Coordinates (Correct Order)

Source: https://openlayers.org/doc/faq.html

Shows how to correctly center a map on Schladming by providing coordinates in the longitude, latitude order. This example highlights the importance of the correct order for `fromLonLat` when using EPSG:4326.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import {fromLonLat} from 'ol/proj.js';

const schladming = [13.689167, 47.394167]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
const schladmingWebMercator = fromLonLat(schladming);

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    center: schladmingWebMercator,
    zoom: 9
  })
});

```

--------------------------------

### Initialize Map with Incorrect Coordinates

Source: https://openlayers.org/doc/faq.html

This example shows how providing longitude and latitude directly to the map view center can lead to unexpected centering if the coordinates are not in the map's default projection (Web Mercator).

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const washingtonLonLat = [-77.036667, 38.895];
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    center: washingtonLonLat,
    zoom: 12
  })
});

```

--------------------------------

### Get Feature Count from KML Source (Asynchronous)

Source: https://openlayers.org/doc/faq.html

Attempts to get the number of features from a KML source immediately after layer creation. This will initially log 0 because KML loading is asynchronous. Use event listeners for accurate counts after loading.

```javascript
import VectorLayer from 'ol/layer/Vector.js';
import KMLSource from 'ol/source/KML.js';

const vector = new VectorLayer({
  source: new KMLSource({
    projection: 'EPSG:3857',
    url: 'data/kml/2012-02-10.kml'
  })
});
const numFeatures = vector.getSource().getFeatures().length;
console.log("Count right after construction: " + numFeatures);

```

--------------------------------

### Build OpenLayers Application for Deployment

Source: https://openlayers.org/doc/quickstart.html

Run `npm run build` to bundle your application into a `dist` directory, creating static files ready for production deployment.

```bash
npm run build

```

--------------------------------

### Create OpenStreetMap Source

Source: https://openlayers.org/doc/tutorials/concepts.html

Instantiates an OpenStreetMap source, which provides tiled map data. This is a common source for base maps.

```javascript
import OSM from 'ol/source/OSM.js';

const source = new OSM();
```

--------------------------------

### Import Map and View Classes

Source: https://openlayers.org/doc/tutorials/background.html

Import Map and View classes from the 'ol/Map.js' and 'ol/View.js' modules respectively. This is the standard way to import classes that are default exports.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';

```

--------------------------------

### Import Utility Functions

Source: https://openlayers.org/doc/tutorials/background.html

Import utility functions like getUid from 'ol' and fromLonLat from 'ol/proj.js'. This shows how to import named exports for constants and functions from lowercase modules.

```javascript
import {getUid} from 'ol';
import {fromLonLat} from 'ol/proj.js';

```

--------------------------------

### Initialize OpenLayers Map

Source: https://openlayers.org/doc/tutorials/concepts.html

Constructs a new OpenLayers Map instance and renders it into the specified target div. Ensure the target div exists in your HTML.

```javascript
import Map from 'ol/Map.js';

const map = new Map({target: 'map'});
```

--------------------------------

### Import Layer Classes

Source: https://openlayers.org/doc/tutorials/background.html

Import Map and View classes directly from the 'ol' package, and Tile and Vector layer classes from 'ol/layer.js'. This demonstrates convenience re-exports for commonly used classes.

```javascript
import {Map, View} from 'ol';
import {Tile, Vector} from 'ol/layer.js';

```

--------------------------------

### Listen for KML Source Load Completion

Source: https://openlayers.org/doc/faq.html

Attaches an event listener to the KML source to detect when the data has finished loading and is ready. It then logs the accurate number of features available in the source.

```javascript
vector.getSource().on('change', function(evt){
  const source = evt.target;
  if (source.getState() === 'ready') {
    const numFeatures = source.getFeatures().length;
    console.log("Count after change: " + numFeatures);
  }
});

```

--------------------------------

### Initialize OpenLayers Map in JavaScript

Source: https://openlayers.org/doc/quickstart.html

This script initializes a new OpenLayers map with an OSM tile layer and a default view. It imports necessary modules and sets the map target, layers, and view.

```javascript
import './style.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

```

--------------------------------

### Load KML Features into a Vector Layer

Source: https://openlayers.org/doc/faq.html

Initializes a VectorLayer to load features from a KML file. The `projection` is set to 'EPSG:3857' for display, and the `url` points to the KML data.

```javascript
import VectorLayer from 'ol/layer/Vector.js';
import KMLSource from 'ol/source/KML.js';

const vector = new VectorLayer({
  source: new KMLSource({
    projection: 'EPSG:3857',
    url: 'data/kml/2012-02-10.kml'
  })
});

```

--------------------------------

### Add Tile Layer to Map

Source: https://openlayers.org/doc/tutorials/concepts.html

Creates a TileLayer using a previously defined source and adds it to the map. This layer will display the map tiles.

```javascript
import TileLayer from 'ol/layer/Tile.js';

// ...
const layer = new TileLayer({source: source});
map.addLayer(layer);
```

--------------------------------

### Basic HTML Structure for OpenLayers Map

Source: https://openlayers.org/doc/quickstart.html

The HTML file requires a `div` element to contain the map and a script tag to load the JavaScript.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick Start</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

```

--------------------------------

### Set Map Projection to EPSG:4326

Source: https://openlayers.org/doc/faq.html

Use this to set the map's projection to World Geodetic System 1984 (EPSG:4326). Ensure you import Map and View from 'ol/Map.js' and 'ol/View.js' respectively.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';

// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
const map = new Map({
  view: new View({
    projection: 'EPSG:4326'
    // other view properties like map center etc.
  })
  // other properties for your map like layers etc.
});
```

--------------------------------

### Enable Reprojection Edge Rendering

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Enable rendering of reprojection edges for debugging purposes. This can help visualize the triangulation process.

```javascript
source.setRenderReprojectionEdges(true);
```

--------------------------------

### Manually Trigger Synchronous Map Render

Source: https://openlayers.org/doc/faq.html

Offers a synchronous method to force a map re-render. Use this when immediate rendering is required and asynchronous behavior is not suitable.

```javascript
map.renderSync();

```

--------------------------------

### Define and Register Custom Projection (British National Grid)

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Define a custom projection using Proj4js, including its definition string and extent, and then register it with OpenLayers. This allows the map to use and reproject data to this custom CRS.

```javascript
import proj4 from 'proj4';
import {get as getProjection} from 'ol/proj.js';
import {register} from 'ol/proj/proj4.js';

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
    '+x_0=400000 +y_0=-100000 +ellps=airy ' +
    '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
    '+units=m +no_defs');
register(proj4);
const proj27700 = getProjection('EPSG:27700');
proj27700.setExtent([0, 0, 700000, 1300000]);


```

--------------------------------

### Manually Trigger Map Render

Source: https://openlayers.org/doc/faq.html

Provides a method to manually force the map to re-render. This is useful when changes occur that the map does not automatically detect.

```javascript
map.render();

```

--------------------------------

### Calculate Ideal Source Resolution

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Calculate the ideal source resolution for reprojection to achieve a 1:1 pixel mapping. This function is useful for determining the correct zoom level from the source.

```javascript
const idealSourceResolution = ol.reproj.calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution);
```

--------------------------------

### Center Map on Specific Coordinates (Incorrect Order)

Source: https://openlayers.org/doc/faq.html

Demonstrates centering a map on Schladming using incorrect coordinate order (latitude, longitude). This will result in centering on an unintended location due to the common mistake of mixing longitude and latitude.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import {fromLonLat} from 'ol/proj.js';

const schladming = [47.394167, 13.689167]; // caution partner, read on...
// since we are using OSM, we have to transform the coordinates...
const schladmingWebMercator = fromLonLat(schladming);

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    center: schladmingWebMercator,
    zoom: 9
  })
});

```

--------------------------------

### Set Map View Configuration

Source: https://openlayers.org/doc/tutorials/concepts.html

Configures the map's view, including its center coordinates, zoom level, and projection. The default projection is Spherical Mercator (EPSG:3857).

```javascript
import View from 'ol/View.js';

map.setView(new View({
  center: [0, 0],
  zoom: 2,
}));
```

--------------------------------

### Register and Use Custom Projection with Proj4js

Source: https://openlayers.org/doc/faq.html

Register a custom projection like Swiss EPSG:21781 using proj4js and OpenLayers' register function. This allows the map to use projections not built-in by default. Import necessary modules from 'ol/proj/proj4.js' and 'ol/proj.js'.

```javascript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj.js';

// To use other projections, you have to register the projection in OpenLayers.
// This can easily be done with [http://proj4js.org/](proj4)
//
// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
// So we create a projection instance for EPSG:21781 and pass it to
// register to make it available to the library for lookup by its
// code.
proj4.defs('EPSG:21781',
  '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
  '+x_0=600000 +y_0=200000 +ellps=bessel ' +
  '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
register(proj4);
const swissProjection = getProjection('EPSG:21781');

// we can now use the projection:
const map = new Map({
  view: new View({
    projection: swissProjection
    // other view properties like map center etc.
  })
  // other properties for your map like layers etc.
});
```

--------------------------------

### Increase VectorLayer Render Buffer for Hit Detection

Source: https://openlayers.org/doc/faq.html

When using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, large icons or labels might not be detected. Increase the `renderBuffer` property on `VectorLayer` to expand the hit detection area. A recommended value is the size of the largest symbol, line width, or label.

```javascript
import VectorLayer from 'ol/layer/Vector.js';

const vectorLayer = new VectorLayer({
  ...
  renderBuffer: 200
});

```

--------------------------------

### Transform Coordinates to a Custom Projection

Source: https://openlayers.org/doc/faq.html

This snippet shows how to transform coordinates from WGS84 (EPSG:4326) to a custom projection (e.g., EPSG:21781) using the `transform` utility function, which is useful when working with non-default projections.

```javascript
import {transform} from 'ol/proj.js';
// assuming that OpenLayers knows about EPSG:21781, see above
const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');

```

--------------------------------

### HTML for Map Container

Source: https://openlayers.org/doc/tutorials/concepts.html

This HTML snippet defines a div element that will serve as the container for the OpenLayers map.

```html
<div id="map" style="width: 100%; height: 400px"></div>
```

--------------------------------

### Set Custom Reprojection Error Threshold

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Configure a custom reprojection error threshold when constructing a tile image source. The default is 0.5 pixels.

```javascript
const source = new ol.source.TileImage({
  url: '...', // your tile URL
  projection: 'EPSG:4326',
  reprojectionErrorThreshold: 1
});
```

--------------------------------

### Change Map View Projection

Source: https://openlayers.org/doc/tutorials/raster-reprojection.html

Update the map's view to use a different projection, such as 'EPSG:27700', by creating and setting a new ol/View instance on the ol/Map. Ensure the center coordinates are appropriate for the new projection.

```javascript
map.setView(new View({
  projection: 'EPSG:27700',
  center: [400000, 650000],
  zoom: 4,
}));

```

--------------------------------

### OpenLayers Map CSS Styling

Source: https://openlayers.org/doc/quickstart.html

This CSS imports OpenLayers base styles and ensures the map container fills the entire page. It sets the map to be an absolute positioned element covering the full viewport.

```css
@import "node_modules/ol/ol.css";

html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

```
Tokens:
Raw