HSLayers-NG is a library which extends OpenLayers 6 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
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


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


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: npm i bootstrap@^4.0.0 ol@^6.0.0 @angular/common @angular/core@ @angular/forms@^12.0.0 @ngx-translate/http-loader@^6.0.0 deepmerge@^4.0.0 dayjs@^1.0.0 @ng-bootstrap/ng-bootstrap@^10.0.0 ol-popup@^4.0.0 proj4@^2.6.0 share-api-polyfill@^1.0.0 @angular/compiler@^12.0.0 @angular/platform-browser@^12.0.0 @angular/platform-browser-dynamic@^12.0.0 @angular/localize@^12.0.0 rxjs@^6.0.0 zone.js@^0.11.3 xml-js@^1.0.0 ngx-cookie-service@^12.0.0 geostyler-style@^4 geostyler-sld-parser@^2 geostyler-openlayers-parser@^2 ngx-color@^6 queue resumablejs --legacy-peer-deps

For using hslayers-ng prebuilt bundle including angular, bootstrap etc. dependencies by loading it through <script> tags see: Hslayers-ng application


Configuring hslayers-ng is described in more depth in 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 VectorLayer from 'ol/layer/Vector';
  import {HsConfig} from 'hslayers-ng';
 constructor(private HsConfig: HsConfig) {
      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,
        units: 'm',

Node.js proxy

First option is to use Node.js proxy (based on cors-anywhere) that you can find in lib/proxy.js file. Simply run it as any other Node.js script in terminal by

node proxy.js

or deploy it as a service for production use. To use this proxy in HSLayers-NG application, you have to set the proxyPrefix parameter in the config which specifies the proxy url, eg.

proxyPrefix: '/proxy/'

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 raitisbe@gmail.com

results matching ""

    No results matching ""