Repository files navigation

This web map can be viewed via itsinformation page ordirectly.

It is a demo of theol-sld-styler (OpenLayers SLD Styler) andol-load-geopackage (OpenLayers OGC GeoPackage Loader) JavaScript NPM modules. Data and styling for the web map has been generated primarily in QGIS and exported as 2 OGC GeoPackages using thePackage Layers Processing Toolbox operation. This allows the web map to be quickly rebuilt from subsequent updated QGIS exports.

The 2OGC GeoPackages are:

• DSC_QGIS_Packaged_Layers.gpkg: Dorset & Somerset Canal specific data
• OS Open Data (clipped) & styles.gpkg:OS Open Zoomstack downloads to give context if no base map (or an aerial photograph) is used. The unmodifiedOS QGIS(QML) Cartographic Stylesheets define the styling.

Each Geopackage contains a collections of vector data layers and the associated SLD styling combined into a single "layer_styles" table as XML strings.

A version of the source QGIS map document used to generate both the above GeoPackages can be loaded into QGIS fromDS_Canal-local-gpkgs.qgz. Note that this version has had its data sources redirected to the GeoPackages in the local folder (rather than the collection of original data sources).

The web map also incorporates an additional SLD fileProbable path (10m nominal width).sld which was also exported from QGIS. This was not included in the GeoPackages as it uses the same source vector data as another layer in the GeoPackage, but (currently) the "Package Layers" operation would unnecessarily duplicate the vector source table.

The ol-sld-styler module requires a separate "layer configuration" object which is defined in this example in filemapconfig.js. It includes some user-defined function hooks for modifying SLD-imported styling where desired styling was not possible due to QGIS export or SLD limitations.

By using OGC GeoPackages as its primary data/styling sources, this web map can also be downloaded and used as anoffline map viewer for mobile phones or tablets which have poor (or non-existent) network connectivity. When a network connection is available, data and stying updates could then be done by downloading just 1 file.

The support files used to bundle this web application using Webpack 5 arepackage.json &webpack.config.js. If you clone the repository then you can (re-)build the code bundle with the following commands. Note that the "sql-install" script is to fulfill the requirements from theol-load-geopackage module which is incorporated. It simply copies the sql.js web assembly file (sql-wasm.wasm) from foldernode_modules/sql.js/dist/ to the folder where the web page is to be loaded from.

npm installnpm run-script sql-installnpm run-script build

In order to ensure the sql.js WASM file can be loaded you will have to host them with a (simple) local HTTP server, for example by running in the dist folder...

python -m http.server

...which will allow you to view them in a browser athttp://localhost:8000/.

The Webpack dev-server can be used to automatically re-build, act as a webhost and trigger the browser to reload every time the code changes. The following script command (defined inpackage.json) can be used to start the dev-server and open the web map in a browser:

npm start

Original code in this module is provided under the ISC licence - seeLICENCE.

Raw spatial data created for this web map (i.e. the contents of file DSC_QGIS_Packaged_Layers.gpkg) is provided under the Creative Commons Attribution 4.0(CC BY-SA 4.0) International License.

The following open source software and icons were used under licence:

• Font Awesome v5 icons under theCC BY 4.0 licence
• OpenLayersol NPM module: under theBSD 2-Clause License
• Proj4jsproj4 NPM module under theMIT licence
• OpenLayers LayerSwitcherol-layerswitcher NPM module © Matt Walker, under the MIT licence
• OpenLayers OGC GeoPackage Loaderol-load-geopackage NPM module under theISC licence
• OpenLayers SLD Stylerol-sld-styler NPM module under theISC licence
• (Within ol-sld-styler)@NieuwlandGeo/sldreader NPM module under theISC licence