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://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

For more detail on quick prototyping without the use of a Node.js based setup, see the Skypack example.

TypeScript support

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

Supported Browsers

OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, polyfills (Fastly or Cloudflare) will likely need to be added.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

OpenLayers

Getting Started

Files

README.md

Latest commit

History

README.md

File metadata and controls

OpenLayers

Getting Started