diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d1c1dbe --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +bundle.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..40d139a --- /dev/null +++ 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 new file mode 100644 index 0000000..e849f5d --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + Using OpenLayers with Webpack + + + + +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..71a5d03 --- /dev/null +++ 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 new file mode 100644 index 0000000..b6bd62b --- /dev/null +++ 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" + } +}