Building with webpack

HSLayes-NG versions 1 and 2 used Webpack to create distributable bundles. HSLayers-NG version 3 and above uses Angular CLI. If you use HSLayers-NG version 3 or higher, refer to Building with Angular CLI.

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 to not pollute the container application with Bootstrap styles. Execute the following command in terminal:

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

Example webpack configuration files are provided at https://github.com/hslayers/examples/tree/webpack/full .

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', [
    'hs.layermanager',
    'hs.query',
    'hs.print',
    ...
    //**  List of HsLayers-ng components
]);

/* Here goes code to modify the UI for extra functionality */
module.directive(
    'hs',
        (HsCore) => {
            'ngInject';
            return {
                /* A different layout of the application can be achieved by changing the main template */
                template: HsCore.hslayersNgTemplate,
                link: function(scope, element) {
                    HsCore.fullScreenMap(element);
                }
            };
        }
    );

/* Here goes configuration of layers, viewport and HsLayers components */
module.value('HsConfig', {
    /* 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"
    }),
    panelsEnabled: {
       composition_browser: false,
       permalink: false
    });

/* The main code which does extra things apart from HsLayers components is located in the controller function below*/
module.controller('Main',
    function($scope, $compile, HsMapService) {
        /* 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) {
                layer.setVisible(true);
            }
        });
    }
);

To build execute in terminal:

webpack --config webpack.dev.js --progress

if webpack is installed globally or

npx webpack --config webpack.dev.js --progress

if webpack is your devDependency.