HSLayers-NG

HSLayers-NG is a library which extends OpenLayers functionality by providing a foundation to build map GUI and extra components such as layer manager, permalink generating, styling of vector features, including OpenGIS® Web Map Service Interface Standard (WMS) layers to the map in a user friendly way etc.

Hslayers version	Angular version	Bootstrap	OpenLayers
1	1.7	4.5.3
2	1.7 + 9.1.x (hybrid)	>=4.4
3	9.x	4.x
4	10.x	4.x
5	11.x	4.x
6	12.x	4.x
7	12.x	5.x
8	14.x	5.x
9	14.x	5.x	^6.14.1
10	14.x	5.x	^6.14.1, ^7.0.0
11	15.x	5.x	7x
12	16.x	5.3	7.x
13	17.x	5.3	^8.2

Demo

Check out the examples and live projects to get an idea:

• http://ng.hslayers.org/examples/
• https://groundwater.smartagro.lv/fie/index.html
• https://www.smartafrihub.com/cs/map1/
• http://sdi4apps.eu/spoi
• (Material) https://atlasbestpractices.com/
• (Material) https://app.hslayers.org/agroinfo
• (3D) https://app.hslayers.org/project-agro-climatic/
• (3D) https://app.hslayers.org/project-rostenice/

Installation

We strongly recommend using Angular CLI for setting up a new project. If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add hslayers-ng library to it.

Just run the following:

ng add hslayers-ng It will install hslayers-ng for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option:

ng add hslayers-ng --project myProject

Add peer dependencies if not installed automatically by npm: npm i bootstrap@^5.3 ol@^8.2 @angular/cdk@^17 @angular/common@^17 @angular/core@^17 @angular/forms@^17 @angular/compiler@^17 @angular/platform-browser@^17 @angular/platform-browser-dynamic@^17 @angular/localize@^17 @ngx-translate/core@^15 @ngx-translate/http-loader@^8 deepmerge@^4.0.0 dayjs@^1.0.0 @ng-bootstrap/ng-bootstrap@^16 ol-popup@^5.0.0 proj4@^2.8.1 share-api-polyfill@^1.0.0 rxjs@^7.0.0 zone.js@~0.14.0 xml-js@^1.6.11 ngx-cookie-service@^17 geostyler-style@^7.2.0 geostyler-sld-parser@^5 geostyler-openlayers-parser@^4 geostyler-legend@4 geostyler-qgis-parser@^2 ngx-color@^9 queue@^7 resumablejs@^1 d3@^7 jszip@^3 polygon-splitter@^0.0.11 polygon-clipping@^0.15.3 @popperjs/core@^2 ol-ext@^4

For using hslayers-ng prebuilt bundle including Angular, Bootstrap and other dependencies by loading it through <script> tags see: Hslayers-ng application

Configuration

Configuring hslayers-ng is described in more depth in the wiki

HsConfig service

Use HsConfig service injected in your component to set applications layers, looks and behavior. See full list of config options

  import {Vector as VectorSource} from 'ol/source';
  import {Vector as VectorLayer} from 'ol/layer';
  import {HsConfig} from 'hslayers-ng';
  ...
 constructor(private HsConfig: HsConfig) {
    this.hsConfig.update({
      default_layers: [
        new VectorLayer({
          title: 'Bookmarks',
          path: 'User generated',
          source: new VectorSource({features}),
        }),
      ],
      default_view: new View({
        center: transform([17.474129, 52.574], 'EPSG:4326', 'EPSG:3857'), //Latitude longitude    to Spherical Mercator
        zoom: 4,
      })
    })

Proxy

We provide a Node.js based server application hslayers-server for proxy based on cors-anywhere that you can install by:

npm i hslayers-server

To run: ./node_modules/.bin/hslayers-server

To use this proxy in HSLayers-NG application, you have to set the proxyPrefix parameter in the app config which specifies the proxy url, eg.

 proxyPrefix: window.location.hostname.includes('localhost')
        ? `${window.location.protocol}//${window.location.hostname}:8085/`
        : '/proxy/'

This will check if the hslayers-ng based application is running in development mode i.e. on http://localhost:4200 and use proxy server address http://localhost:8085 in that case OR in production with the same domain but different directory for proxy application. You can configure the proxy URL to your setup (ports, domains, paths) of course.

Library development

Library build

Run ng build hslayers to build the project. The build artifacts will be stored in the dist/ directory. You can use npm link for linking it to your project and rebuild the library continuously by ng build hslayers --watch

Running unit tests

Run ng test hslayers to execute the unit tests via Karma.

Further help

To get more help write [e-mail]