Building with webpack

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 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 https://github.com/hslayers/examples/tree/webpack/full :

import toolbar from 'toolbar';
import print from 'print';
import query from 'query';
import search from 'search';
import measure from 'measure';
import permalink from 'permalink';
import info from 'info';
import ds from 'datasource_selector';
import sidebar from 'sidebar';
import ows from 'ows';
import bootstrapBundle from 'bootstrap/dist/js/bootstrap.bundle';
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 components
]);

/* Here goes code to modify the UI for extra functionality */
module.directive(
    'hs', [
        'config', 'Core',
        function(config, Core) {
            return {
                /* A different layout of the application can be achieved by changing the main template*/
                template: require('hslayers.html'),
                link: function(scope, element) {
                    Core.fullScreenMap(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', 'hs.map.service', 'hs.compositions.service_parser', '$timeout',
    /* The order of function parameters must match the array of component names above */
    function($scope, Core, $compile, hsmap, composition_parser, $timeout) {
        $scope.hsl_path = config.hsl_path; //Get this from hslayers.js file
        /* 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) {
                layer.setVisible(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 webpack.dev.js --progress