{"id":13221,"library":"geostyler-openlayers-parser","title":"GeoStyler OpenLayers Style Parser","description":"The `geostyler-openlayers-parser` package provides a robust implementation of a GeoStyler style parser specifically tailored for OpenLayers. It enables developers to convert GeoStyler's abstract style definitions into concrete OpenLayers style objects, and vice-versa, facilitating cross-platform style management for geospatial applications. The current stable version is 5.6.1, released in April 2026. The project maintains a very active release cadence, with multiple minor and patch updates occurring monthly, indicating continuous development and bug fixing. A key differentiator is its seamless integration within the broader GeoStyler ecosystem, allowing for consistent style representation across various mapping libraries, and its support for advanced OpenLayers styling features like `graphicStroke` and `WellKnownNames` for enhanced symbolization.","status":"active","version":"5.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/geostyler/geostyler-openlayers-parser","tags":["javascript","geostyler","parser","style","openlayers","typescript"],"install":[{"cmd":"npm install geostyler-openlayers-parser","lang":"bash","label":"npm"},{"cmd":"yarn add geostyler-openlayers-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add geostyler-openlayers-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for OpenLayers style generation and application.","package":"ol","optional":false},{"reason":"Core dependency providing the abstract GeoStyler style definitions and utilities.","package":"geostyler-style","optional":false}],"imports":[{"note":"The primary class for parsing GeoStyler styles to/from OpenLayers styles. Package is primarily ESM, but older Node versions might attempt CommonJS.","wrong":"const OpenLayersParser = require('geostyler-openlayers-parser');","symbol":"OpenLayersParser","correct":"import OpenLayersParser from 'geostyler-openlayers-parser';"},{"note":"This is a common import pattern for OpenLayers vector layers, often used in conjunction with the parser output.","wrong":"import { Vector as OlLayerVector } from 'ol/layer';","symbol":"OlLayerVector","correct":"import OlLayerVector from 'ol/layer/Vector';"},{"note":"In browser environments, the `OlStyleParser` might be exposed globally or via a namespace. For modern ES modules, `OpenLayersParser` is the correct named export. `GeoStylerOpenlayersParser.OlStyleParser` is typically seen in older UMD/IIFE bundles.","wrong":"var parser = new GeoStylerOpenlayersParser.OlStyleParser(ol);","symbol":"OlStyleParser","correct":"import OpenLayersParser from 'geostyler-openlayers-parser';"}],"quickstart":{"code":"import OpenLayersParser from 'geostyler-openlayers-parser';\nimport OlLayerVector from 'ol/layer/Vector';\nimport OlMap from 'ol/Map';\nimport OlView from 'ol/View';\nimport OlSourceVector from 'ol/source/Vector';\nimport Feature from 'ol/Feature';\nimport Point from 'ol/geom/Point';\n\nconst pointSimplePoint = {\n  name: 'OL Style',\n  rules: [\n    {\n      name: 'OL Style Rule 0',\n      symbolizers: [\n        {\n          kind: 'Mark',\n          wellKnownName: 'circle',\n          color: '#FF0000',\n          radius: 6,\n          stroke: {\n            color: '#000000',\n            width: 2\n          }\n        }\n      ]\n    }\n  ]\n};\n\nconst parser = new OpenLayersParser();\n\n// Create a dummy feature and source for the layer\nconst feature = new Feature({ geometry: new Point([0, 0]) });\nconst source = new OlSourceVector({ features: [feature] });\n\nconst layer = new OlLayerVector({ source });\n\nparser\n  .writeStyle(pointSimplePoint)\n  .then(({output: olStyle}) => {\n    if (olStyle) {\n      layer.setStyle(olStyle);\n      console.log('OpenLayers style applied to layer.');\n    } else {\n      console.error('Failed to parse style: output is undefined.');\n    }\n  })\n  .catch(error => console.error('Error parsing or applying style:', error));\n\n// Basic OpenLayers Map setup for demonstration (optional, but makes code runnable)\nconst map = new OlMap({\n  target: document.createElement('div'), // Render to a div, not necessarily visible\n  layers: [layer],\n  view: new OlView({\n    center: [0, 0],\n    zoom: 10\n  })\n});\nconsole.log('OpenLayers map initialized with layer.');","lang":"typescript","description":"This example demonstrates how to convert a GeoStyler JSON style definition into an OpenLayers style object using `geostyler-openlayers-parser` and apply it to an `ol/layer/Vector`."},"warnings":[{"fix":"Check your `package.json` for `ol` and `geostyler-openlayers-parser` to ensure their versions meet the specified peer dependency range. Upgrade `ol` if necessary.","message":"This package has a peer dependency on `ol` (OpenLayers). Ensure your OpenLayers version is compatible with the version specified in the `peerDependencies` (currently `>=7.4`), otherwise, runtime errors or unexpected styling behavior may occur.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Always use `import OpenLayersParser from 'geostyler-openlayers-parser';` for modern JavaScript/TypeScript projects. If using older Node.js or a CommonJS environment, check if a separate CommonJS build is available or configure your bundler (e.g., Webpack, Rollup) to handle ESM.","message":"The package primarily uses ES Modules (ESM). Using `require()` for CommonJS imports in an ESM-only project will lead to `TypeError: require is not a function` or incorrect module resolution.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Upgrade to `geostyler-openlayers-parser@5.1.0` or newer to leverage the `OlFlatStyleParser` and its enhanced parsing features for flat OpenLayers styles.","message":"The `OlFlatStyleParser` was introduced in `v5.1.0` to support flat style objects in OpenLayers. If you are working with these flat styles, ensure you are on `v5.1.0` or higher to utilize its capabilities for parsing expressions and specific symbolizer properties like `icon-width`.","severity":"gotcha","affected_versions":"<5.1.0"},{"fix":"To ensure full compatibility with modern GeoStyler and OpenLayers styles that use features like `graphicStroke` or expanded `WellKnownNames`, upgrade to the latest stable version of `geostyler-openlayers-parser`.","message":"Recent versions (e.g., `v5.6.0`, `v5.5.0`) introduced support for `graphicStroke` in `LineSymbolizer` and additional `WellKnownNames`. If your styles utilize these features, earlier versions of the parser will not correctly interpret or apply them.","severity":"gotcha","affected_versions":"<5.6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add error handling and null/undefined checks for the `olStyle` output. Thoroughly validate your input GeoStyler style object against the `geostyler-style` schema to ensure it's well-formed.","cause":"The `olStyle` returned from `parser.writeStyle()` might be undefined or null, indicating a parsing error or an invalid input GeoStyler style, leading to attempts to call `setStyle` on a non-object.","error":"TypeError: Cannot read properties of undefined (reading 'setStyle')"},{"fix":"Ensure that OpenLayers classes are imported and instantiated correctly, e.g., `import OlLayerVector from 'ol/layer/Vector'; const layer = new OlLayerVector();`. Avoid direct destructuring like `import { Vector } from 'ol/layer';` which can sometimes lead to this issue depending on the bundler configuration.","cause":"This error typically arises in OpenLayers when a class constructor (like `Vector` for `ol/layer/Vector`) is called as a function instead of with the `new` keyword, often due to incorrect destructuring or module imports.","error":"TypeError: Class constructor Vector cannot be invoked without 'new'"},{"fix":"If your project is ES Module-based, use `import` statements. If you are in a CommonJS environment that needs to consume an ESM package, consider using dynamic `import()` or upgrading your project to ESM.","cause":"Attempting to `require()` an ES Module in a CommonJS context, or when Node.js is configured for ESM-only.","error":"ERR_REQUIRE_ESM"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}