First commit

openlayers · Aug 9, 2018 · 3457ef9 · 3457ef9
commit 3457ef9
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+bundle.js
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# OpenLayers + Browserify
+
+This example demonstrates how the `ol` package can be used with browserify.
+
+Clone the project.
+
+    git clone git@github.com:openlayers/ol-browserify.git
+
+Install the project dependencies.
+
+    cd ol-browserify
+    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
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <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>
diff --git a/main.js b/main.js
@@ -0,0 +1,29 @@
+import {PluggableMap, View} from 'ol';
+import MapRenderer from 'ol/renderer/canvas/Map';
+import TileLayerRenderer from 'ol/renderer/canvas/TileLayer';
+import {Tile as TileLayer} from 'ol/layer';
+import {XYZ} from 'ol/source';
+import {defaults as controlDefaults} from 'ol/control';
+import {defaults as interactionDefaults} from 'ol/interaction';
+
+PluggableMap.prototype.createRenderer = function() {
+  const renderer = new MapRenderer(this);
+  renderer.registerLayerRenderers([TileLayerRenderer]);
+  return renderer;
+}
+new PluggableMap({
+  target: 'map',
+  controls: controlDefaults(),
+  interactions: interactionDefaults(),
+  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
@@ -0,0 +1,19 @@
+{
+  "name": "ol-browserify",
+  "version": "1.0.0",
+  "description": "Using browserify and the ol package",
+  "main": "main.js",
+  "scripts": {
+    "build": "browserify -g [ babelify --presets [ \"@babel/preset-env\" ] ] -g uglifyify --entry main.js > bundle.js"
+  },
+  "dependencies": {
+    "ol": "^5.1.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.56",
+    "@babel/preset-env": "^7.0.0-beta.56",
+    "babelify": "^9.0.0",
+    "browserify": "^16.2.2",
+    "uglifyify": "^5.0.1"
+  }
+}