Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
OpenLayers + Rollup
/node_modules/
bundle.js

OpenLayers + Rollup

This example demonstrates how the ol package can be used with Rollup.

Clone the project.

git clone git@gist.github.com:8beb328ea72b36446fc2198d008287de.git ol-rollup

Install the project dependencies.

cd ol-rollup
npm install

Create a bundle for the browser.

npm run build

Open index.html to see the result.

open index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using OpenLayers with Rollup</title>
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css">
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./bundle.js"></script>
</body>
</html>
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
})
});
{
"name": "ol-rollup",
"version": "1.0.0",
"description": "Example using OpenLayers with Rollup",
"scripts": {
"build": "rollup --config rollup.config.js"
},
"devDependencies": {
"rollup": "^0.41.4",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1"
},
"dependencies": {
"ol": "^4.0.1-beta.2"
}
}
module.exports = {
entry: 'main.js',
targets: [
{dest: 'bundle.js', format: 'iife'}
],
plugins: [
require('rollup-plugin-node-resolve')(),
require('rollup-plugin-commonjs')(),
require('rollup-plugin-uglify')()
]
};
@tstaapp

This comment has been minimized.

Show comment Hide comment
@tstaapp

tstaapp Jan 9, 2018

is good

tstaapp commented Jan 9, 2018

is good

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment