HS App initialization - hslayers/hslayers-ng GitHub Wiki

OUTDATED DOCUMENTATION: valid for HSLayers-NG version 1 and 2

App initialization

HS layers app is in most cases initialized by Core HS directive

module.directive('hs', ['hs.map.service', 'Core', function(OlMap, Core) {
  return {
    templateUrl: hsl_path + 'hslayers.html',
    link: function(scope, element) {
      //Core.init();
    }
  };
}]);

Size initialization

For correct management of app and map size in your webpage and correct initialization, Init function is needed to be added. Multiple versions of initialization are currently supported. They are using either full CSS setting of template or sizes of elements higher in DOM hiearchy.

By CSS

When CSS is correctly set for elements in template (html, body, div with hs directive), simple version of Init function is utilized:

link: function(scope, element) {
  Core.init(element);
}

Note: When not behaving correctly sometimes overflow:hidden CSS property for html tag is needed.

By parent element

When HS app element has parent element with computed sizes it can be used as container for HS app. Second parameter for init function is needed as options object with parent property set as true:

link: function(scope, element) {
  Core.init(element,{
     parent: true}
  );
}

By element selected with JQuery

Similarly any other element can be used. Element property of options object is used with string JQuery selector (id is recommended).

link: function(scope, element) {
  Core.init(element,{
     element: "#id"}
  );
}