{"id":10937,"library":"geostyler","title":"GeoStyler","description":"GeoStyler is an open-source JavaScript library and framework for styling geospatial data, providing a robust set of modular React UI components for map styling in web applications. It is currently at version 18.4.2 and receives frequent updates, with minor releases for features and bug fixes occurring regularly. A core differentiator is its \"micro packages\" approach, allowing users to leverage standalone parsers for translating between various styling formats like SLD, OpenLayers, QGIS, and Mapbox without needing the full UI component suite. Internally, it uses its own `GeoStyler Style` definition as an exchange format for seamless conversion. This modularity enables developers to either integrate high-level, opinionated UI components like the `StyleEditor` or build custom interfaces using its fundamental building blocks. It also offers command-line and REST API tools for style conversion outside of a UI context.","status":"active","version":"18.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/geostyler/geostyler","tags":["javascript","geo","styler","geostyler","typescript"],"install":[{"cmd":"npm install geostyler","lang":"bash","label":"npm"},{"cmd":"yarn add geostyler","lang":"bash","label":"yarn"},{"cmd":"pnpm add geostyler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for GeoStyler's UI components, as it is a React component library.","package":"react","optional":false},{"reason":"Required for rendering GeoStyler's React UI components to the DOM.","package":"react-dom","optional":false},{"reason":"Peer dependency for OpenLayers integration, particularly for the OpenLayers parser and related components. GeoStyler UI can connect to several data sources.","package":"ol","optional":false},{"reason":"TypeScript type definitions for React, essential when using GeoStyler with TypeScript.","package":"@types/react","optional":true},{"reason":"TypeScript type definitions for ReactDOM, essential when using GeoStyler with TypeScript.","package":"@types/react-dom","optional":true}],"imports":[{"note":"The primary UI component for a full-featured style editor is named `Style`, not `StyleEditor`. It is a named export.","wrong":"import StyleEditor from 'geostyler';","symbol":"Style","correct":"import { Style } from 'geostyler';"},{"note":"The core type definition for a GeoStyler style is `Style` and is typically imported from the `geostyler-style` package, which is a dependency of `geostyler`.","wrong":"import { GeoStylerStyle } from 'geostyler';","symbol":"GeoStylerStyle","correct":"import { Style } from 'geostyler-style';"},{"note":"Parsers for specific styling formats (like SLD) are provided as separate 'micro packages' and are default exports from their respective libraries, not from the main `geostyler` package.","wrong":"import { SLDParser } from 'geostyler';","symbol":"SLDParser","correct":"import SLDParser from 'geostyler-sld-parser';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { Style } from 'geostyler';\nimport SLDParser from 'geostyler-sld-parser';\nimport OpenLayersParser from 'geostyler-openlayers-parser';\nimport { Style as GeoStylerCoreStyle } from 'geostyler-style';\n\nconst initialGeoStylerStyle: GeoStylerCoreStyle = {\n  name: 'My Initial Style',\n  rules: [\n    {\n      name: 'Orange Point Rule',\n      symbolizers: [\n        { kind: 'Mark', wellKnownName: 'circle', color: '#FFA500', radius: 8 }\n      ],\n    },\n  ],\n};\n\nconst MyStyleEditor: React.FC = () => {\n  const [currentStyle, setCurrentStyle] = useState<GeoStylerCoreStyle>(initialGeoStylerStyle);\n  const sldParser = new SLDParser();\n  const olParser = new OpenLayersParser();\n\n  // Note: For a fully functional setup, you might need to provide a data source\n  // and more comprehensive locale and editor configurations via the Style component's props.\n  // This example focuses on basic style management.\n  return (\n    <div style={{ width: '100%', height: 'calc(100vh - 20px)', padding: '10px' }}>\n      <h1>GeoStyler Style Editor</h1>\n      <Style\n        style={currentStyle}\n        onStyleChange={(newStyle: GeoStylerCoreStyle) => {\n          console.log('Style changed:', newStyle);\n          setCurrentStyle(newStyle);\n        }}\n        // The Style component often needs parsers to function correctly,\n        // enabling read/write operations for different formats.\n        sldParser={sldParser}\n        olParser={olParser}\n        // Other parsers can be added as props: qmlParser, mapboxStyleParser, etc.\n        // locale={{ /* custom locale */ }}\n        // data={{ /* data source */ }}\n      />\n      <pre style={{ marginTop: '20px', backgroundColor: '#eee', padding: '10px' }}>\n        {JSON.stringify(currentStyle, null, 2)}\n      </pre>\n    </div>\n  );\n};\n\nexport default MyStyleEditor;\n","lang":"typescript","description":"This quickstart demonstrates a basic GeoStyler `Style` (the main UI component) integrated into a React application, allowing users to view and edit a geospatial style. It initializes a simple point style, handles style changes, and shows how to pass parser instances to the `Style` component."},"warnings":[{"fix":"Review your build pipeline configuration (e.g., Webpack, Vite) for any LESS-related loaders or plugins and remove/update them to align with plain CSS.","message":"GeoStyler updated its internal styling from LESS to plain CSS. If your application's build configuration previously assumed the existence of `.less` files or specific LESS tooling, you might need to adjust these configurations.","severity":"breaking","affected_versions":">=17.0.0"},{"fix":"Update `onCloneRule` and `onRemoveRule` callbacks to accept a numeric index parameter instead of a `RuleRecord` object when interacting with the `RuleTable` component.","message":"The `RuleTable` component's `onCloneRule` and `onRemoveRule` signatures changed. They now expect a numeric index instead of a `RuleRecord`. This impacts applications explicitly using `RuleTable` or interacting with these callbacks.","severity":"breaking","affected_versions":">=17.0.0"},{"fix":"Ensure your development and deployment environments are running Node.js version 20.6.0 or higher. Update Node.js using `nvm` or your preferred package manager.","message":"The `node` engine requirement for GeoStyler is `>=20.6.0`. Running the package with older Node.js versions may lead to unexpected errors or failures.","severity":"breaking","affected_versions":">=18.0.0"},{"fix":"Install all required peer dependencies using npm or yarn: `npm install react react-dom ol @types/react @types/react-dom`.","message":"GeoStyler relies on several peer dependencies, including `react`, `react-dom`, and `ol` (OpenLayers). These must be installed separately in your project, along with their respective `@types` packages for TypeScript.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Install parsers as needed (e.g., `npm install geostyler-sld-parser`) and import them from their specific package paths: `import SLDParser from 'geostyler-sld-parser';`","message":"GeoStyler emphasizes a 'micro packages' approach. Style parsers (e.g., `geostyler-sld-parser`, `geostyler-openlayers-parser`) are separate npm packages and must be installed and imported individually, not directly from the main `geostyler` package.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure your project is configured to handle ESM imports, potentially updating bundler configurations or import statements to include `.js` extensions for ESM modules as necessary. This change affects specific parser packages, not the main `geostyler` package directly.","message":"Some parser packages (e.g., `geostyler-geojson-parser`) have introduced ESM builds as a breaking change, requiring adaptation of import paths and/or configurations if your application was relying on CommonJS or older module resolution.","severity":"breaking","affected_versions":">=2.0.0 (for geostyler-geojson-parser)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install React and ReactDOM: `npm install react react-dom` along with their types if using TypeScript: `npm install @types/react @types/react-dom`.","cause":"Missing peer dependencies required by GeoStyler's React components.","error":"Error: Cannot find module 'react' or 'react-dom'"},{"fix":"Ensure you are using correct ESM `import SLDParser from 'geostyler-sld-parser';` and that your build tool is correctly configured for ESM. If in a strict CJS environment, you might need `const SLDParser = require('geostyler-sld-parser').default;` or similar, though ESM is preferred.","cause":"Attempting to import a default export (like `SLDParser`) as a named export from a CommonJS context, or incorrect bundling of ESM default exports.","error":"TypeError: (0 , geostyler_sld_parser__WEBPACK_IMPORTED_MODULE_2__.default) is not a constructor"},{"fix":"Update your Node.js installation to version 20.6.0 or newer. Use `nvm install 20 && nvm use 20` or a similar method appropriate for your system.","cause":"The project's `node` engine requirement is not met, leading to runtime errors.","error":"ERR_OS_NOT_SUPPORTED: The current Node.js version is not supported. Please use Node.js >= 20.6.0."},{"fix":"Ensure all required parser packages are correctly installed and that the `Style` component in your `geostyler` version supports these specific parser props. If types are outdated, consider `npm update` or checking the documentation for prop name changes.","cause":"TypeScript error indicating that a prop like `sldParser` is not recognized by the `Style` component's prop types.","error":"Property 'sldParser' does not exist on type 'IntrinsicAttributes & StyleProps'."}],"ecosystem":"npm"}