From f01e5d3eaf3a9aef75aa781111a96ceba2b0d73f Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Fri, 28 Jul 2017 16:29:13 +0200 Subject: [PATCH] Update Browserify tutorial to use the ol package --- doc/tutorials/browserify.md | 64 ++++++++++++++++++------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/doc/tutorials/browserify.md b/doc/tutorials/browserify.md index f33387b13d..a405178004 100644 --- a/doc/tutorials/browserify.md +++ b/doc/tutorials/browserify.md @@ -5,57 +5,56 @@ layout: doc.hbs # Introduction -When going beyond modifying existing examples you might be looking for a -way to setup your own code with dependency management together with external -dependencies like OpenLayers. +When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers. -This tutorial serves as a suggested project setup using NPM and Browserify -for the most basic needs. There are several other options and in particular -you might be interested in -[compiling your own code together with OpenLayers](closure.html). +This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) [using Webpack with OpenLayers](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8). ## Initial steps -Create a new empty directory for your project and navigate to it by running -`mkdir new-project && cd new-project`. Initialize your project using `npm init` -and answer the questions asked. +Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked. -At this point you can ask NPM to add required dependencies by running -`npm install --save-dev openlayers browserify watchify uglify-js`. Watchify and -Uglify will be used to monitor for changes and to build into a minified -bundle. +Add OpenLayers as dependency to your application with `npm install --save ol`. + +At this point you can ask NPM to add required development dependencies by running +``` +npm install --save-dev cssify browserify cssify http-server uglify-js watchify +npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs +``` +We will be using `cssify` to include the css definitions required by OpenLayers in our bundle. `watchify`, `http-server` and `uglify-js` are used to monitor for changes and to build into a minified bundle. `babelify` and `babel-plugin-transform-es2015-modules-commonjs` are used to make the `ol` package, which was created using ES2015 modules, work with CommonJS. ## Application code and index.html Place your application code in `index.js`. Here is a simple starting point: ```js -var ol = require('openlayers'); - -var map = new ol.Map({ +require('ol/ol.css'); +var ol_Map = require('ol/map').default; +var ol_layer_Tile = require('ol/layer/tile').default; +var ol_source_OSM = require('ol/source/osm').default; +var ol_View = require('ol/view').default; + +var map = new ol_Map({ target: 'map', layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() + new ol_layer_Tile({ + source: new ol_source_OSM() }) ], - view: new ol.View({ + view: new ol_View({ center: [0, 0], zoom: 0 }) }); ``` -You will also need an `ìndex.html` file that will use your bundle. Here is a simple -example: +You will also need an `ìndex.html` file that will use your bundle. Here is a simple example: ```html - + Using Browserify with OpenLayers -