Skip to content

Latest commit

 

History

History
145 lines (113 loc) · 10.7 KB

Examples.md

File metadata and controls

145 lines (113 loc) · 10.7 KB

Examples

Each example is presented as HTML/JavaScript source code + a "Map Configuration" JavaScript file and also as a directly viewable web page (generated by the Webpack module bundler). Successive examples introduce additional ol-sld-styler and example support features...

Table of Contents:

  • Basic example: Loads vector tables and associated QGIS "layer_styles" SLD XML strings from an OGC GeoPackage and render all tables as styled layers on an OpenLayers map. Displays details of package contents.
  • SLD File Load example: Additionally include styling data read from separate SLD file(s).
  • Legend example: Generate a map legend (with show/hide toggle).
  • Layer Switcher example: Embed symbology in a layer selector created by third party ol-layerswitcher NPM module.
  • Fully-featured example: Style OpenLayers vector layers, embed symbology in a layer selector, create a map legend, plus many extras required for a typical web map incorporating multiple data and SLD styling sources.

The example descriptions below indicate where ol-sld-styler built-in features are used (these are highlighted) and also give example code that may be useful to complement the ol-sld-styler functionality.

You can try the examples with your own GeoPackage data files (without having to install Node.js or WebPack) by cloning the GitHub repository then editing the "gpkgFile" definition in the *_mapconfig.js file associated with each example. 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 examples/dist folder...

python -m http.server

...which will allow you to view them in a browser at http://localhost:8000/. Note however that if your source data uses projections (SRS) other than the few built in to OpenLayers, then you would need to modify the .js source files to add more SRS and rebuild the .js bundles. This can be done as shown in the (commented out) Proj4s code in the Fully-featured example JS code, or as demonstrated in the Proj4 example of the ol-load-geopackage NPM module.

Basic example

Loads vector tables and associated QGIS "layer_styles" SLD XML strings from an OGC GeoPackage and render all tables as styled layers on an OpenLayers map. Displays details of package contents.

web page (sources: HTML, JavaScript, Map Config)

Features:

  • Use of ol-load-geopackage to load OGC GeoPackage
  • debugShowTableJson flag (false by default): generate an ol-sld-styler dataLayersConfig template (in browser console) for all tables found in the GeoPackages, including popupAttr properties including attributes for all layers. These are used to limit which attributes are displayed and if an attribute name is to be re-labeled.
  • Display SLDs extracted from "layer_styles" table in QGIS-exported GeoPackage
  • ol-sld-styler functions:
  • ol-sld-styler Map Config:
    • dataLayersConfig: simple layer definitions using table properties
    • tweakFeatureTypeStyle(): modify "featureTypeStyle" extracted from SLD style information by sldReader with an example function:
      • scaleLineSymbolizerDashArray(): workaround for QGIS bug when using predefined (not custom) dash patterns
    • tweakOlStyle(): modify generated olStyle definitions using an example function:
      • setIconDisplacement(): workaround for QGIS/sldreader limitation in setting Point Symbolizer displacement of external graphic from SLD displacement values

SLD File Load example

Additionally include styling data read from separate SLD file(s).

web page (sources: HTML, JavaScript, Map Config)

Additional features:

  • loadAllSldFiles(): asynchronous load of a list of SLD files
  • ol-sld-styler functions:
    • styleLayers(): incorporation of SLD file(s) alongside SLDs from GeoPackage
  • ol-sld-styler Map Config:
    • using styleName property to override SLD from GeoPackage layer_styles
    • tweakOlStyle(): example implemention of widths in units of metres at scale

Legend example

Generate a map legend (with show/hide toggle).

web page (sources: HTML, JavaScript, Map Config)

Additional features:

  • buildLegendBox(): example HTML container generation for legend
  • legendToggleControl(): Example OpenLayers toggle control to show/hide Legend box
  • ol-sld-styler functions:
  • ol-sld-styler Map Config:
    • using showLegend property to auto-generate symbols during styling
    • using legendSymbolSizing property to customize size of legend symbols
    • using group property to infer layer group hierarchy
    • using label property to customize legend layer/group text
    • tweakOlStyle(): example generation of 'hachure' symbology (not possible in SLD)

Layer Switcher example

Embed symbology in a layer selector created by third party ol-layerswitcher NPM module.

web page (sources: HTML, JavaScript, Map Config)

Additional features:

  • ol-sld-styler functions:
  • ol-sld-styler Map Config:
    • using addLayerSwitcherSymbols property to auto-generate symbols during styling
    • using lyrSwiSymbolSizing property to customize size of layer switcher symbols
    • using collapseSymbology property to initially hide symbology of multi-symbol layers
    • using visible property to initially turn off visibility of layers/groups
  • layerSwitcher.renderPanel(): if layer switcher symbology is not enabled, update layer switcher to remove "Loading..." for loaded layers
  • example base layer selector as part of Layer Switcher

Fully-featured example

Style OpenLayers vector layers, embed symbology in a layer selector, create a map legend, plus many extras required for a typical web map incorporating multiple data and SLD styling sources.

web page (sources: HTML, JavaScript, Map Config)

Additional features (most are example support code, rather than ol-sld-styler features):

  • (both layer switcher and legend as described in previous examples)
  • handling multiple OGC GeoPackages
  • additional checking that mandatory ol-sld-styler Map Config items are defined
  • proj4.defs: (commented out) example of use of proj4s to define additional SRS (coordinate systems)
  • ol_interaction_Select()/overlayPopup: generate popups to display properties of (multiple) click-selected features
  • debugShowTableJson(): generate an ol-sld-styler template mapConfig (in browser console) for all tables found in GeoPackage
  • ol-sld-styler Map Config:
    • tweakFeatureTypeStyle(): workarounds for bugs in QGIS export of "OS Open Zoomstack" SLD styling
  • ol-sld-styler Map Config:
    • using forceSingleSymbol property to display only the first symbol in legend/layer-switcher for multi-symbol layers
    • using selectable property set to false to remove layers from theselectableLayers return value of createAllLayers() (intended for use with feature popups)
    • using olLayerOptions property to define standard OpenLayers properties that are passed to ol_layer_Vector()
    • including standard ol-layerswitcher fold property to collapse layer switcher groups at start-up
    • including popupAttr property reserved for limiting the features properties shown in example popups code (and defining how they are labelled)
  • Notable features (PNG marker).sld: example workaround for QGIS raster (PNG) point marker export limitation - a manual edit of QGIS-exported SLD file to specify PNG filename and marker displacement
  • OS 1st edition (PNG fill).sld: example workaround for QGIS raster (PNG) polygon fill export limitation - a manual edit of QGIS-exported SLD file to specify PNG filename and marker size
  • baselayers_DSC.js: base layers split off into a separate module
  • OpenLayers base layer attribution
  • ol_control_ScaleLine(): OpenLayers scale line distance indicator
  • showDebugInfo flag to optionally shows ol-sld-styler processing times