To test
Clone the gist and cd into the dir
git clone https://gist.github.com/ThomasG77/7a92c94c6d7955fe81c9 demo_browserify_ol3
cd demo_browserify_ol3
Run NPM
npm install
Build the js including ol3 lib and custom code
./node_modules/.bin/browserify app.js > bundle.js
Open a browser and job done
| var ol = require('openlayers'); | |
| map = new ol.Map({ | |
| target: 'map', | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.MapQuest({layer: 'sat'}) | |
| }) | |
| ], | |
| view: new ol.View({ | |
| center: ol.proj.transform([3.6656, 45.9192], 'EPSG:4326', 'EPSG:3857'), | |
| zoom: 6 | |
| }) | |
| }); |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>OpenLayers 3 with Browserify</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="node_modules/openlayers/css/ol.css"></link> | |
| <style> | |
| .map { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| <title>OpenLayers 3 quickstart example</title> | |
| </head> | |
| <body> | |
| <div id="map" class="sidebar-map"></div> | |
| <script src="bundle.js"> | |
| </script> | |
| </body> | |
| </html> |
| { | |
| "name": "mini_ol3_browserify", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "app.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "openlayers": "^3.1.1" | |
| }, | |
| "devDependencies": { | |
| "browserify": "^8.1.1" | |
| } | |
| } |