Bootstrap isolation

This page is relevant for HSLayers-NG version 1 to 2.4.0. If you use HSLayers-NG 2.5.0 or newer, non of the following affects you.

Often Bootstrap styling needs to be isolated just in HSLayers map not to pollute the containing website with unnecessary styles, which can conflict with other CSS frameworks. To achieve this, HSLayers layout is contained in <div id="page-wrapper" class="bootstrap-iso">.

We need to generate a special bootstrap.isolated.css file based on the original bootstrap.css, where every selector is prefixed with .bootstrap-iso . This can be done with bootstrap-isolate.js contained in the scripts directory, which can be run with

node node_modules/hslayers-ng/scripts/bootstrap-isolate.js

if hslayers-ng is dependency of your app or npm run isolate-bootstrap if you have cloned hslayers-ng repo directly.

In app.js we have to set config: {useIsolatedBootstrap: true} to tell HSLayers to use this isolated version of bootstrap.