ol

What is ol?

The 'ol' npm package, also known as OpenLayers, is a powerful library for displaying map data in web browsers. It provides a comprehensive set of tools for working with maps, including support for various map layers, projections, and interactions. OpenLayers is highly customizable and can be used to create complex mapping applications.

What are ol's main functionalities?

Creating a Map

This code initializes a basic map using OpenStreetMap (OSM) as the tile source. The map is centered at a specific longitude and latitude and is set to a zoom level of 4.

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
  })
});

Adding Vector Layers

This code adds a vector layer to the map. The vector layer contains a single point feature, which is placed at a specific longitude and latitude.

const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([37.41, 8.82]))
      })
    ]
  })
});
map.addLayer(vectorLayer);

Handling Map Interactions

This code adds a select interaction to the map, allowing users to click on features. When a feature is selected, the selected features are logged to the console.

const select = new ol.interaction.Select();
map.addInteraction(select);
select.on('select', function(e) {
  console.log('Selected features:', e.selected);
});

Other packages similar to ol

leaflet

Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use, making it a good choice for simple mapping applications. Compared to OpenLayers, Leaflet has a smaller feature set but is often preferred for its simplicity and ease of use.

mapbox-gl

Mapbox GL JS is a powerful library for rendering interactive maps using WebGL. It offers high performance and a wide range of features, including support for custom vector tiles and 3D terrain. Compared to OpenLayers, Mapbox GL JS provides more advanced rendering capabilities but may require a Mapbox account for certain features.

cesium

Cesium is a JavaScript library for creating 3D globes and maps. It is designed for high-performance visualization of large datasets and supports a wide range of data formats. Compared to OpenLayers, Cesium is more focused on 3D visualization and is often used for applications that require a 3D perspective.

README

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.

Getting Started

Install the ol package:

npm install ol

Import just what you need for your application:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

See the following examples for more detail on bundling OpenLayers with your application:

• Using Vite
• Using Rollup
• Using webpack
• Using Parcel

Sponsors

OpenLayers appreciates contributions of all kinds. We especially want to thank our fiscal sponsors who contribute to ongoing project maintenance.

Pozi helps connect communities through spatial thinking. We love Openlayers and it forms a core part of our platform. https://pozi.com/ https://app.pozi.com/

yey'maps is a scalable cloud GIS suite that is developed with the powerful Openlayers API and the GDAL library. https://www.yeymaps.io/

Your one-stop-shop for geospatial open source software. https://www.geosolutionsgroup.com/

We develop leading Physical Security Information Management (PSIM) software. OpenLayers is the core of our map engine and we love it! https://elacompil.recruitee.com/

See our GitHub sponsors page or Open Collective if you too are interested in becoming a regular sponsor.

ES Modules

The ol package contains a src/ folder with the sources, authored as ES Modules. To use these untranspiled sources, either import modules from ol/src instead of ol, or configure your bundler with an alias pointing to ol/src for the ol package.

TypeScript support

The ol package includes auto-generated TypeScript declarations as *.d.ts files.

Supported Browsers

OpenLayers runs on all modern browsers that support HTML5 and ECMAScript 5. This includes Chrome, Firefox, Safari and Edge.

For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and older, Safari v12 and older), polyfills may be needed for the following browser features:

• fetch: Available from polyfill.io.
• requestAnimationFrame: Available from polyfill.io.
• element.prototype.classList (add/remove): Available from polyfill.io.
• URL API: Available from polyfill.io or core-js.
• TextDecoder: Available from polyfill.io.
• Number.isInteger: Available from polyfill.io or core-js.
• Reflect: Available from core-js.
• Pointer events: Use elm-pep (lightweight) or pepjs (for really, really old browsers).

ol/source/GeoTIFF requires a browser that supports ECMAScript 6. Additionally a polyfill for Promise.allSettled may be needed.

Documentation

Check out the hosted examples, the workshop or the API documentation.

Bugs

Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.

Contributing

Please see our guide on contributing if you're interested in getting involved.

Community

• Need help? Find it on Stack Overflow using the tag 'openlayers'
• Follow @openlayers on Twitter