# OpenLayers
[OpenLayers](https://openlayers.org/) 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](https://opensource.org/licenses/BSD-2-Clause).
## Getting Started
Install the [`ol` package](https://www.npmjs.com/package/ol):
```
npm install ol
```
Import just what you need for your application:
```js
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 [Rollup](https://github.com/openlayers/ol-rollup)
* Using [Webpack](https://github.com/openlayers/ol-webpack)
* Using [Parcel](https://github.com/openlayers/ol-parcel)
* Using [Browserify](https://github.com/openlayers/ol-browserify)
## 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/
See our [GitHub sponsors page](https://github.com/sponsors/openlayers) or [Open Collective](https://opencollective.com/openlayers/contribute/sponsors-214/checkout) if you too are interested in becoming a regular sponsor.
## IntelliSense support and type checking for VS Code
The ol package contains a src/ folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a [`jsconfig.json`](https://gist.github.com/ahocevar/9a7253cb4712e8bf38d75d8ac898e36c#file-jsconfig-json) (when authoring in JavaScript) or [`tsconfig.json`](https://gist.github.com/ahocevar/ad7b52a2fa0f6c5495193cd695ab3780#file-tsconfig-json) (when authoring in TypeScript) config file in the project root:
jsconfig.json
```json
{
"compilerOptions": {
"checkJs": true,
"baseUrl": "./",
"paths": {
"ol": ["node_modules/ol/src"],
"ol/*": ["node_modules/ol/src/*"]
}
},
"include": [
"**/*.js",
"node_modules/ol/**/*.js"
],
"typeAcquisition": {
"exclude": ["ol"]
}
}
```
tsconfig.json
```json
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "./",
"paths": {
"ol": ["node_modules/ol/src"],
"ol/*": ["node_modules/ol/src/*"]
}
},
"include": [
"**/*.ts",
"node_modules/ol/**/*"
],
"typeAcquisition": {
"exclude": ["ol"]
}
}
```