From de42e97f9e4c7388e1a95e3573c4e1857ef0c938 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 24 Dec 2016 11:27:32 -0700 Subject: [PATCH] --- _readme_.md | 15 +++++++++++++++ index.html | 23 +++++++++++++++++++++++ main.js | 19 +++++++++++++++++++ package.json | 14 ++++++++++++++ 4 files changed, 71 insertions(+) create mode 100644 _readme_.md create mode 100644 index.html create mode 100644 main.js create mode 100644 package.json diff --git a/_readme_.md b/_readme_.md new file mode 100644 index 0000000..2418c0d --- /dev/null +++ b/_readme_.md @@ -0,0 +1,15 @@ +# OpenLayers + Webpack + +This example demonstrates how the `ol` package can be used with webpack 2. + +Install the project dependencies. + + npm install + +Create a bundle for the browser. + + npm run build + +Open `index.html` to see the result. + + open index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..a41671f --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + Using OpenLayers with Webpack + + + + +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..383466b --- /dev/null +++ b/main.js @@ -0,0 +1,19 @@ +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 + }) +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..4caa1a8 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "ol-webpack", + "version": "1.0.0", + "description": "Example using OpenLayers with Webpack", + "scripts": { + "build": "webpack --config webpack.config.js" + }, + "devDependencies": { + "webpack": "^2.2.0-rc.2" + }, + "dependencies": { + "ol": "^3.21.0-beta.5" + } +}