Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active August 29, 2015 14:14
Show Gist options
  • Save ThomasG77/7a92c94c6d7955fe81c9 to your computer and use it in GitHub Desktop.
Save ThomasG77/7a92c94c6d7955fe81c9 to your computer and use it in GitHub Desktop.
Minimum demo to use browserify with ol3

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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment