Skip to content
Browse files

Add wiki instructions for building with webpack

  • Loading branch information...
raitisbe committed Jul 20, 2019
1 parent 5075f63 commit 888cc47f3a473a251f12f3a331af2231ee7c05a1
Showing with 93 additions and 0 deletions.
  1. +93 −0 wiki/building-with-webpack.txt
@@ -0,0 +1,93 @@
If you are creating your own app.js and not using the provided bundled one, the source will need to be compiled using webpack.

Before building [create an isolated bootstrap css file](Bootstrap-isolation) to not polute the container application with boostrap styles. Execute the following comand in terminal:

`node node_modules/hslayers-ng/scripts/bootstrap-isolate.js`

Example webpack configuration files are provided at :

import 'toolbar.module';
import 'print.module';
import 'query.module';
import 'search.module';
import 'measure.module';
import 'permalink.module';
import 'info.module';
import 'datasource-selector.module';
import 'sidebar.module';
import 'add-layers.module';
import { Tile, Group } from 'ol/layer';
import { TileWMS, WMTS, OSM, XYZ } from 'ol/source';
import {ImageWMS, ImageArcGISRest} from 'ol/source';
import View from 'ol/View';
import {transform, transformExtent} from 'ol/proj';

var module = angular.module('hs', [
//** List of Hslayers components

/* Here goes code to modify the UI for extra functionality */
'hs', [
'config', 'Core',
function(config, Core) {
return {
/* A different layout of the application can be achieved by changing the main template*/
template: Core.hslayersNgTemplate,
link: function(scope, element) {

/* Here goes configuration of layers, viewport and HsLayers components */
module.value('config', {
/* Here goes layer definitions which can be ordinary OL layers with extra parameters which are interpreted by HsLayers or some special layer types which are unique to HsLayers */
default_layers: [
new Tile({
source: new OSM(),
title: "Base layer",
base: true,
path: 'Roads/Additional Cycling routes'
default_view: new View({
center: transform([6.1319, 49.6116], 'EPSG:4326', 'EPSG:3857'), //Latitude longitude to Spherical Mercator
zoom: 13,
units: "m"

/* The main code which does extra things apart from HsLayers components is located in the controller function below*/
module.controller('Main', ['$scope', 'Core', '$compile', '',
/* The order of function parameters must match the array of component names above */
function($scope, Core, $compile, hsmap) {
/* Core component is responsible for bootstrapping the application and managing top level interface such as panels and toolbar */
$scope.Core = Core;

/* We can listen to event emited by components such as layer manager and hide a layer which was added by code or by user for example*/
$scope.$on('layermanager.updated', function(data, layer) {
if (layer.get('base') != true && layer.get('always_visible') != true) {

/* To hide certain panels even if they are loaded as a dependency to other component use panelEnabled function */
Core.panelEnabled('compositions', false);
Core.panelEnabled('permalink', false);



To build execute in terminal:

`webpack --config --progress`

0 comments on commit 888cc47

Please sign in to comment.
You can’t perform that action at this time.