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
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) {
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,
units: 'm',
})
})
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/'
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
Run ng test hslayers
to execute the unit tests via Karma.
To get more help write raitisbe@gmail.com