1 | # ol
|
2 |
|
3 | OpenLayers as ES2015 modules.
|
4 |
|
5 | ## Usage
|
6 |
|
7 | Add the `ol` package as a dependency to your project.
|
8 |
|
9 | npm install ol --save
|
10 |
|
11 | Import just what you need for your application:
|
12 |
|
13 | ```js
|
14 | import Map from 'ol/map';
|
15 | import View from 'ol/view';
|
16 | import TileLayer from 'ol/layer/tile';
|
17 | import XYZ from 'ol/source/xyz';
|
18 |
|
19 | new Map({
|
20 | target: 'map',
|
21 | layers: [
|
22 | new TileLayer({
|
23 | source: new XYZ({
|
24 | url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
25 | })
|
26 | })
|
27 | ],
|
28 | view: new View({
|
29 | center: [0, 0],
|
30 | zoom: 2
|
31 | })
|
32 | });
|
33 | ```
|
34 |
|
35 | See the following examples for more detail on bundling OpenLayers with your application:
|
36 |
|
37 | * Using [Rollup & Uglify](https://gist.github.com/tschaub/8beb328ea72b36446fc2198d008287de)
|
38 | * Using [Rollup & Closure Compiler](https://gist.github.com/tschaub/32a5692bedac5254da24fa3b12072f35)
|
39 | * Using [Webpack & Uglify](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8)
|
40 | * Using [Webpack & Closure Compiler](https://gist.github.com/ahocevar/8ceafc6293455ba491dd9be12c15761f)
|
41 | * Using [Browserify & Uglify](https://gist.github.com/tschaub/4bfb209a8f809823f1495b2e4436018e)
|
42 |
|
43 | ## Module Identifiers
|
44 |
|
45 | The module identifiers above (e.g. `ol/map`) are like the `ol.Map` names in the [API documentation](http://openlayers.org/en/latest/apidoc/) with `/` instead of `.` and all lowercase. Each module only has a `default` export (there are no other named exports).
|
46 |
|
47 | Constructors are exported from dedicated modules. For example, the `ol/layer/tile` module exports the `Tile` layer constructor.
|
48 |
|
49 | Utility functions are available as properties of the default export from utility modules. For example, the `getCenter` function is a property of the default export from the `ol/extent` utility module.
|