).current = map.current;
+ }
+ }, []);
+
+ useEffect(() => {
+ if (map.current && props.children) {
+ render(props.children as React.ReactElement, map.current);
+ }
+ }, [props.children]);
+
+ return React.createElement("div", {
+ id: id,
+ ref: containerRef,
+ className: props.className
+ ? `react-geojson-map ${props.className}`
+ : "react-geojson-map",
+ style: {
+ width: "100%",
+ height: "100%",
+ },
+ });
+}
+
+export default forwardRef(GeoMap);
diff --git a/src/lib/components/Popup.ts b/src/lib/components/Popup.ts
new file mode 100644
index 0000000..c77664e
--- /dev/null
+++ b/src/lib/components/Popup.ts
@@ -0,0 +1,49 @@
+import { createElement, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { POPUP } from "../utils/config";
+
+export interface PopupProps {
+ properties: P;
+ popupFunc: (properties: P) => React.ReactNode;
+}
+
+export default function Popup
(props: PopupProps
) {
+ const overlayPortalContainer = useRef(null);
+
+ if (!overlayPortalContainer.current) {
+ overlayPortalContainer.current = document.createElement("div");
+
+ if (process.env.NODE_ENV === "development") {
+ overlayPortalContainer.current.className = "popup";
+ overlayPortalContainer.current.style.zIndex = "1000";
+ overlayPortalContainer.current.style.width = "200px";
+ overlayPortalContainer.current.style.height = "200px";
+ overlayPortalContainer.current.style.backgroundColor = "red";
+ }
+
+ document.body.appendChild(overlayPortalContainer.current);
+ createPortal(
+ props.popupFunc(props.properties),
+ overlayPortalContainer.current
+ );
+ }
+
+ useEffect(() => {
+ return () => {
+ document.body.removeChild(
+ overlayPortalContainer.current as HTMLDivElement
+ );
+ overlayPortalContainer.current = null;
+ };
+ }, []);
+
+ // NOTE:: WIP
+ return null;
+
+ return createElement(POPUP, {
+ ...props,
+ type: POPUP,
+ overlayPortalContainer: overlayPortalContainer.current,
+ popupFunc: props.popupFunc,
+ });
+}
diff --git a/src/lib/index.d.ts b/src/lib/index.d.ts
new file mode 100644
index 0000000..6746d97
--- /dev/null
+++ b/src/lib/index.d.ts
@@ -0,0 +1,28 @@
+import type React from "react";
+
+export interface GeoMapProps {
+ children?: React.ReactNode;
+ className?: string;
+}
+
+export function GeoMap(props: GeoMapProps): React.ReactElement;
+
+export interface DataSourceProps {
+ url: string;
+ fitViewToData?: boolean;
+}
+
+export function GeoDataSource(props: DataSourceProps): React.ReactElement;
+
+// NOTE:: WIP
+export interface PopupProps {
+ properties: P;
+ popupFunc: (properties: P) => React.ReactNode;
+}
+
+export function Popup
(props: PopupProps
): React.ReactElement | null;
+
+export function observeCSSVariables(
+ targetElement: HTMLElement,
+ callback: () => void
+): MutationObserver;
diff --git a/src/lib/index.js b/src/lib/index.js
new file mode 100644
index 0000000..d16534d
--- /dev/null
+++ b/src/lib/index.js
@@ -0,0 +1,4 @@
+import GeoDataSource from "./components/GeoDataSource";
+import GeoMap from "./components/GeoMap";
+
+export { GeoDataSource, GeoMap };
diff --git a/src/lib/render.ts b/src/lib/render.ts
new file mode 100644
index 0000000..b2ca9ef
--- /dev/null
+++ b/src/lib/render.ts
@@ -0,0 +1,242 @@
+import { Map as OlMap, Overlay } from "ol";
+import GeoJSON from "ol/format/GeoJSON";
+import VectorSource from "ol/source/Vector";
+import ReactDOM from "react-dom";
+import ReactReconciler from "react-reconciler";
+import {
+ ConcurrentRoot,
+ DefaultEventPriority,
+} from "react-reconciler/constants.js";
+import type { DataSourceProps } from "./components/GeoDataSource";
+import type { OlInstance, PopupInstance, SupportedLayerType } from "./types";
+import { DATA_SOURCE, POPUP } from "./utils/config";
+import { observeCSSVariables } from "./utils/utils";
+
+const roots = new WeakMap();
+
+function createInstance(
+ type: string,
+ props: Record
+): OlInstance | null {
+ try {
+ if (type === DATA_SOURCE) {
+ if (typeof props.layerConstructor === "function") {
+ const geojsonFormat = new GeoJSON();
+ const layer = new props.layerConstructor({
+ source: new VectorSource({
+ url: props.url,
+ format: geojsonFormat,
+ }),
+ });
+
+ return { type, element: layer, props };
+ }
+ }
+
+ if (type === POPUP) {
+ // NOTE:: WIP
+ const popupOverlay = new Overlay({
+ element: props.overlayPortalContainer,
+ });
+
+ return { type, element: popupOverlay, props };
+ }
+ } catch (error) {
+ console.error("Error in createInstance", error);
+ return null;
+ }
+ return null;
+}
+
+function appendChildToContainer(container: OlMap, child: OlInstance) {
+ if (container instanceof OlMap) {
+ if (child.type === DATA_SOURCE) {
+ const layer = child.element as SupportedLayerType;
+
+ const targetElement = container.getTargetElement() as HTMLElement;
+
+ const applyStyles = () => {
+ const computedStyle = getComputedStyle(targetElement);
+ layer.setStyle({
+ "fill-color":
+ computedStyle.getPropertyValue(
+ "--data-source-polygon-fill-color"
+ ) || "rgba(126, 188, 111, 0.1)",
+ "stroke-color":
+ computedStyle.getPropertyValue(
+ "--data-source-polygon-stroke-color"
+ ) || "rgba(91, 124, 186, 1)",
+ "stroke-width":
+ Number.parseFloat(
+ computedStyle.getPropertyValue(
+ "--data-source-polygon-stroke-width"
+ )
+ ) || 2,
+ });
+ };
+
+ container.addLayer(layer);
+
+ const observer = observeCSSVariables(targetElement, applyStyles);
+ observer.observe(targetElement, {
+ attributes: true,
+ attributeFilter: ["style", "class"],
+ });
+
+ applyStyles();
+
+ layer.getSource()?.once("change", () => {
+ if (layer.getSource()?.getState() === "ready") {
+ const extent = layer.getSource()?.getExtent();
+
+ if (
+ child.props?.fitViewToData &&
+ extent &&
+ !extent.every((value) => !Number.isFinite(value))
+ ) {
+ container.getView().fit(extent, {
+ padding: [20, 20, 20, 20],
+ maxZoom: 19,
+ duration: 1000,
+ });
+ }
+ }
+ });
+ } else if (child.type === POPUP) {
+ const popupInstance = child as PopupInstance;
+ container.addOverlay(popupInstance.popupOverlay);
+
+ if (!popupInstance)
+ console.error("popupInstance is null, this feature is WIP");
+
+ container.on("singleclick", (event) => {
+ const feature = container.forEachFeatureAtPixel(
+ event.pixel,
+ (feature) => feature
+ );
+
+ if (feature) {
+ const coordinate = event.coordinate;
+ popupInstance.popupOverlay.setPosition(coordinate);
+ ReactDOM.render(
+ popupInstance.popupFunc(
+ feature.getProperties()
+ ) as React.ReactElement,
+ popupInstance.popupOverlay.getElement() as HTMLElement
+ );
+ } else {
+ popupInstance.popupOverlay?.setPosition(undefined);
+ if (popupInstance.popupOverlay?.getElement()) {
+ ReactDOM.unmountComponentAtNode(
+ popupInstance.popupOverlay.getElement() as HTMLElement
+ );
+ }
+ }
+ });
+ }
+ }
+}
+function removeChild(parent: OlInstance | null, child: OlInstance | null) {
+ if (parent?.element instanceof OlMap && child) {
+ (parent.element as OlMap).removeLayer(child.element as SupportedLayerType);
+ }
+ if (child?.element instanceof Overlay) {
+ (child as PopupInstance).popupOverlay.setMap(null);
+ }
+}
+
+function commitUpdate(
+ instance: OlInstance,
+ updatePayload: any,
+ type: string,
+ nextProps: any
+) {
+ if (type === DATA_SOURCE) {
+ if (
+ (updatePayload as DataSourceProps).url &&
+ (instance?.element as SupportedLayerType).getSource()
+ ) {
+ (instance?.element as SupportedLayerType)
+ .getSource()
+ ?.setUrl((updatePayload as DataSourceProps).url);
+ }
+ }
+}
+
+function prepareUpdate(
+ instance: OlInstance,
+ type: string,
+ prevProps: Record,
+ nextProps: Record
+) {
+ if (type === DATA_SOURCE && prevProps.url !== nextProps.url) {
+ return { url: nextProps.url };
+ }
+ if (type === POPUP && prevProps.overlay !== nextProps.overlay) {
+ return { overlay: nextProps.overlay };
+ }
+ return null;
+}
+
+const reconciler = ReactReconciler({
+ supportsMutation: true,
+ createInstance,
+ createTextInstance: () => null,
+ appendChildToContainer,
+ appendChild: (parent, child) => {},
+ removeChild,
+ insertBefore: (parent, child, beforeChild) => {},
+ commitUpdate,
+ removeChildFromContainer: (container, child) => {
+ if (container instanceof OlMap) {
+ (container as OlMap).removeLayer(child?.element as SupportedLayerType);
+ }
+ },
+ insertInContainerBefore: (container, child, beforeChild) => {},
+ prepareUpdate,
+ finalizeInitialChildren: () => {
+ return false;
+ },
+ getPublicInstance: (instance) => instance,
+ getChildHostContext: () => ({}),
+ getRootHostContext: () => ({}),
+ getCurrentEventPriority: () => DefaultEventPriority,
+ prepareForCommit: () => null,
+ resetAfterCommit: () => {},
+ clearContainer: () => null,
+ appendInitialChild: (container, child) => {},
+ shouldSetTextContent: () => false,
+ detachDeletedInstance: () => {},
+ supportsPersistence: false,
+ preparePortalMount: () => {},
+ scheduleTimeout: setTimeout,
+ cancelTimeout: clearTimeout,
+ noTimeout: -1,
+ isPrimaryRenderer: false,
+ warnsIfNotActing: true,
+ getInstanceFromNode: () => null,
+ beforeActiveInstanceBlur: () => {},
+ afterActiveInstanceBlur: () => {},
+ prepareScopeUpdate: () => {},
+ getInstanceFromScope: () => null,
+ supportsHydration: false,
+});
+
+export function render(element: React.ReactElement, container: OlMap) {
+ let root = roots.get(container);
+ if (!root) {
+ root = reconciler.createContainer(
+ container,
+ ConcurrentRoot,
+ null,
+ false,
+ null,
+ "",
+ () => {},
+ null
+ );
+ roots.set(container, root);
+ }
+
+ reconciler.updateContainer(element, root, null, () => {});
+}
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
new file mode 100644
index 0000000..66af882
--- /dev/null
+++ b/src/lib/types.d.ts
@@ -0,0 +1,15 @@
+import type { Map as OlMap, Overlay } from "ol";
+import type VectorLayer from "ol/layer/Vector";
+
+export type SupportedLayerType = VectorLayer;
+
+export interface OlInstance {
+ type: string;
+ element: OlMap | SupportedLayerType | Overlay;
+ props?: Record;
+}
+
+export interface PopupInstance extends OlInstance {
+ popupOverlay: Overlay;
+ popupFunc: (properties: any) => React.ReactNode;
+}
diff --git a/src/lib/utils/config.ts b/src/lib/utils/config.ts
new file mode 100644
index 0000000..76a7fc0
--- /dev/null
+++ b/src/lib/utils/config.ts
@@ -0,0 +1,2 @@
+export const DATA_SOURCE = "data-source";
+export const POPUP = "popup";
diff --git a/src/lib/utils/utils.ts b/src/lib/utils/utils.ts
new file mode 100644
index 0000000..6f6a844
--- /dev/null
+++ b/src/lib/utils/utils.ts
@@ -0,0 +1,23 @@
+export function observeCSSVariables(
+ targetElement: HTMLElement,
+ callback: () => void
+): MutationObserver {
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ if (
+ mutation.type === "attributes" &&
+ (mutation.attributeName === "style" ||
+ mutation.attributeName === "class")
+ ) {
+ callback();
+ }
+ }
+ });
+
+ observer.observe(targetElement, {
+ attributes: true,
+ attributeFilter: ["style", "class"],
+ });
+
+ return observer;
+}
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 0000000..cbcc1fb
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+ "status": "passed",
+ "failedTests": []
+}
\ No newline at end of file
diff --git a/tests/snapshot.spec.ts b/tests/snapshot.spec.ts
new file mode 100644
index 0000000..72cf5fb
--- /dev/null
+++ b/tests/snapshot.spec.ts
@@ -0,0 +1,17 @@
+import { Page, expect, test } from "@playwright/test";
+
+test(
+ "renders map correctly",
+ async ({ page }: { page: Page }) => {
+ await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 5 seconds
+
+ await page.goto("http://localhost:4321/test");
+
+ await page.waitForSelector(".ol-viewport", { timeout: 30000 });
+
+ await page.waitForTimeout(1000);
+
+ expect(await page.screenshot()).toMatchSnapshot("map.png");
+ },
+ { timeout: 90000 },
+);
\ No newline at end of file
diff --git a/tests/snapshot.spec.ts-snapshots/map-darwin.png b/tests/snapshot.spec.ts-snapshots/map-darwin.png
new file mode 100644
index 0000000..400ba3d
Binary files /dev/null and b/tests/snapshot.spec.ts-snapshots/map-darwin.png differ
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..3edec40
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+
+ /* Bundler mode */
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": true,
+ "allowSyntheticDefaultImports": true,
+
+ "outDir": "dist",
+ "declaration": true
+ },
+ "include": ["src/lib"]
+}
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
new file mode 100644
index 0000000..8dbaf89
--- /dev/null
+++ b/tsconfig.app.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/lib/index.d.ts","./src/lib/render.ts","./src/lib/types.d.ts","./src/lib/components/geodatasource.ts","./src/lib/components/geomap.ts","./src/lib/components/popup.ts","./src/lib/utils/config.ts","./src/lib/utils/utils.ts"],"version":"5.6.2"}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..3984362
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022"],
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+
+ /* Bundler mode */
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": true,
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo
new file mode 100644
index 0000000..98ef2f9
--- /dev/null
+++ b/tsconfig.node.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.2"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..46fcb23
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,25 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ build: {
+ lib: {
+ entry: "src/lib/index.js",
+ name: "react-geojson-map",
+ fileName: (format) => `react-geojson-map.${format}.js`,
+ },
+ rollupOptions: {
+ external: ["react", "react-dom", "ol", "react-reconciler"],
+ output: {
+ globals: {
+ react: "React",
+ "react-dom": "ReactDOM",
+ ol: "ol",
+ "react-reconciler": "ReactReconciler",
+ },
+ },
+ },
+ },
+});