2016-12-24 11:27:32 -07:00 · 2016-12-24 11:27:32 -07:00 · de42e97f9e
commit de42e97f9e
4 changed files with 71 additions and 0 deletions
--- a/_readme_.md
+++ 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
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Using OpenLayers with Webpack</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>
--- a/main.js
+++ 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
+  })
+});
--- a/package.json
+++ 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"
+  }
+}