13.2.1 • Published 21 days ago

hslayers-ng-app v13.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
21 days ago

Installation

npm install hslayers-ng-app

Create empty html page and include <hslayers-app></hslayers-app> Where you want the map to appear.

Include hslayers-ng styles in page <head>:

<link rel="stylesheet" href="node_modules/hslayers-ng-app/styles.css">

Include hslayers-ng-app bundle scripts:

<script src="node_modules/hslayers-ng-app/runtime.js"></script>
<script src="node_modules/hslayers-ng-app/polyfills-es5.js"></script>
<script src="node_modules/hslayers-ng-app/polyfills.js"></script>
<script src="node_modules/hslayers-ng-app/vendor.js"></script><!-- Must be included since 4.x -->
<script src="node_modules/hslayers-ng-app/main.js"></script>

Configuration

A global hslayersNgConfig function, which returns a configuration object, NEEDS TO BE CREATED BEFORE loading the main.js script (insert it before the bundle script in the html). It returns a JSON object that describes the application's looks, behavior and data to display. See Configuration options for the list of available config options. HSLayers-ng exposes OpenLayers as global 'ol' variable, which is used in defining layers and configuration.

<script>
    function hslayersNgConfig(ol) {
      return {
        assetsPath: 'node_modules/hslayers-ng-app/assets/',
        default_layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
            title: "OpenStreetMap",
            base: true,
            visible: true,
            removable: false
          })
        ],

        default_view: new ol.View({
          center: ol.proj.fromLonLat([17.474129, 52.574000]),
          zoom: 4,
        })
      }
    } 
  </script>

Multiple apps setup

Built-in option for bootstrapping multiple app instances can be utilized by simply creating (and styling) desired number of hslayers-app elements including with ids

<html>
...
  <hslayers-app id="app-a"></hslayers-app>
  <hslayers-app id="app-b"></hslayers-app>
...
</html>

and creating hslayersNgConfig function which name would include corresponding id string such as

<script>
    function hslayersNgConfigapp-a(ol) {
      ...
    } 
  </script>

In case no exact match between app id and config name is found, the app tries to call default function i.e. hslayersNgConfig

14.0.0-next.2

21 days ago

14.0.0-next.1

28 days ago

14.0.0-next.0

1 month ago

13.2.1

3 months ago

13.2.0

3 months ago

13.0.0

6 months ago

13.1.0

5 months ago

12.1.0

7 months ago

12.0.0

9 months ago

11.3.0

8 months ago

11.2.2

11 months ago

11.2.3

10 months ago

11.2.0

1 year ago

11.2.1

1 year ago

11.1.0

1 year ago

11.0.0

1 year ago

10.0.0

2 years ago

10.0.0-next.1

2 years ago

10.0.0-next.0

2 years ago

9.3.0

2 years ago

9.2.0

2 years ago

9.1.0

2 years ago

9.0.0

2 years ago

8.1.0

2 years ago

8.0.0

2 years ago

7.0.0

2 years ago

7.0.4

2 years ago

7.0.3

2 years ago

7.1.0

2 years ago

7.0.1

2 years ago

6.1.1

3 years ago

6.1.0

3 years ago

6.0.2

3 years ago

5.1.0

3 years ago

5.0.0

3 years ago

4.0.0

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago