block by ThomasG77 7a92c94c6d7955fe81c9

Minimum demo to use browserify with ol3

Full Screen

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

index.html

<!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>

app.js

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
  })
});

package.json

{
  "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"
  }
}