├── index.html
├── main.js
├── readme.md
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Using OpenLayers with Skypack
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import Map from 'https://cdn.skypack.dev/ol/Map.js';
2 | import View from 'https://cdn.skypack.dev/ol/View.js';
3 | import TileLayer from 'https://cdn.skypack.dev/ol/layer/Tile.js';
4 | import OSM from 'https://cdn.skypack.dev/ol/source/OSM.js';
5 |
6 | const map = new Map({
7 | target: 'map',
8 | layers: [
9 | new TileLayer({
10 | source: new OSM()
11 | })
12 | ],
13 | view: new View({
14 | center: [0, 0],
15 | zoom: 2
16 | })
17 | });
18 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # OpenLayers + Skypack
2 |
3 | This example demonstrates how the `ol` package can be used with [Skypack](https://www.skypack.dev/).
4 |
5 | Skypack allows web pages to import remote packages using ES modules without a development server or bundler. When using Skypack, instead of importing directly from the `ol` package, you rewrite your imports to use URLs like `https://cdn.skypack.dev/ol`. For example:
6 |
7 | ```js
8 | import Map from 'https://cdn.skypack.dev/ol/Map.js';
9 | ```
10 |
11 | See the `main.js` for a complete example.
12 |
13 | Although you do not need a development server to bundle modules, using Skypack does require that you use HTTP(S) to view your `index.html` page. So an HTTP server like Apache or nginx is required.
14 |
15 | For developing locally, you can also launch a simple HTTP server using your favorite environment right from this directory:
16 |
17 | npx serve . # Node.js, or
18 | python3 -m http.server 3000 # Python, or
19 | php -S localhost:3000 # PHP, or
20 | ruby -run -e httpd . -p 3000 # Ruby
21 |
22 | You should now be able to load the `index.html` map example at http://localhost:3000.
23 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | height: 100%;
5 | }
6 |
7 | #map {
8 | position: absolute;
9 | top: 0;
10 | bottom: 0;
11 | width: 100%;
12 | }
--------------------------------------------------------------------------------