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
<!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>
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
})
});
{
"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"
}
}