geostyler
Replies: 3 comments
-
|
I've found various other solution.... https://github.com/geostyler/geostyler/wiki/Migration-guide-v13.0.0#browserbuild In https://geostyler.org/codesprint-2025/
Any doc/procedure how to handle it in other framework? or in plain JS? |
Beta Was this translation helpful? Give feedback.
-
|
Currently, there are no plans to replace React or build wrappers for other frameworks. I had already considered replacing React with plain JavaScript or Web Components, but I estimated that it would take more than 1,000 hours of work. Therefore, unless someone funds this, there will be no GeoStyler without React. If wrapping the 'Style' and 'CardStyle' into a web component is feasible and involves reasonable effort, that would be a good solution. For most UI frameworks, there are multiple ways to include React components. I have not tried any of them, except for integration with plain JS. The issue is that there is no documentation for this, and I definitely think we should add some. For now, here is an example: <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/reset.css" />
<script src="https://unpkg.com/@ant-design/[email protected]/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/browser/geostyler.css" />
<script src="https://unpkg.com/[email protected]/browser/geostyler.iife.js"></script>
<title>GeoStyler Browser Example</title>
</head>
<body>
<div id="app"></div>
<script>
// or CardStyle
const { Style } = GeoStyler;
let style = {
name: "Browser Style",
rules: [
{
name: "browser rule",
symbolizers: [
{
kind: "Mark",
wellKnownName: "circle",
color: "#161cde",
radius: 10,
opacity: 0.1
}
]
}
]
};
const StyleElement = React.createElement(Style, {
style,
onStyleChange: newStyle => {
console.log("Style changed:", newStyle);
style = newStyle;
}
});
ReactDOM.render(
StyleElement,
document.getElementById("app")
);
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, maybe update the osgeo info page. From " Open Source JavaScript library that enables" |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
In your roadmap, is there a plan to build on top of the UI, a web component, to be reusable by other framework? i.e. Angular :)
I have some interest for the UI included hereafter.
Beta Was this translation helpful? Give feedback.
All reactions