@rousen/react-naver-maps 0.0.14 → 0.1.0

package/dist/index.esm.js

@@ -160,7 +160,7 @@ const useScriptLoader = ({ ncpKeyId, submodules, disableGL, }) => {
     return { isScriptLoaded };
 };
 
-const EVENT_TO_PROP$2 = {
+const EVENT_TO_PROP$7 = {
     init: "onInit",
     zoomstart: "onZoomStart",
     zoomend: "onZoomEnd",
@@ -206,6 +206,9 @@ const Map = forwardRef(({ id, mapTypeId = "normal", ncpKeyId, children, mapOptio
     useEffect(() => {
         if (!isScriptLoaded || !containerRef.current)
             return;
+        if (id === "current") {
+            throw new Error("id cannot be 'current' use other id");
+        }
         const newInstance = new naver.maps.Map(containerRef.current, {
             ...mapOptions,
             gl: !disableGL,
@@ -224,8 +227,8 @@ const Map = forwardRef(({ id, mapTypeId = "normal", ncpKeyId, children, mapOptio
     const handlersRef = useRef({});
     useEffect(() => {
         const next = {};
-        Object.keys(EVENT_TO_PROP$2).forEach((eventKey) => {
-            const propKey = EVENT_TO_PROP$2[eventKey];
+        Object.keys(EVENT_TO_PROP$7).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$7[eventKey];
             const fn = eventProps[propKey];
             if (typeof fn === "function")
                 next[eventKey] = fn;
@@ -241,7 +244,7 @@ const Map = forwardRef(({ id, mapTypeId = "normal", ncpKeyId, children, mapOptio
         if (!mapInstance)
             return;
         const disposers = [];
-        Object.keys(EVENT_TO_PROP$2).forEach((eventKey) => {
+        Object.keys(EVENT_TO_PROP$7).forEach((eventKey) => {
             const listener = naver.maps.Event.addListener(mapInstance, eventKey, (...args) => {
                 handlersRef.current[eventKey]?.(...args);
             });
@@ -263,7 +266,7 @@ const Map = forwardRef(({ id, mapTypeId = "normal", ncpKeyId, children, mapOptio
 Map.displayName = "Map";
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const EVENT_TO_PROP$1 = {
+const EVENT_TO_PROP$6 = {
     click: "onClick",
     position_changed: "onPositionChanged",
     rightclick: "onRightclick",
@@ -289,7 +292,7 @@ const Marker = forwardRef((props, ref) => {
     const options = {};
     Object.keys(props).forEach((key) => {
         const propKey = key;
-        if (Object.values(EVENT_TO_PROP$1).includes(propKey)) {
+        if (Object.values(EVENT_TO_PROP$6).includes(propKey)) {
             const value = props[propKey];
             if (value !== undefined) {
                 eventProps[propKey] = value;
@@ -387,8 +390,8 @@ const Marker = forwardRef((props, ref) => {
     const handlersRef = useRef({});
     useEffect(() => {
         const next = {};
-        Object.keys(EVENT_TO_PROP$1).forEach((eventKey) => {
-            const propKey = EVENT_TO_PROP$1[eventKey];
+        Object.keys(EVENT_TO_PROP$6).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$6[eventKey];
             const fn = eventProps[propKey];
             if (typeof fn === "function")
                 next[eventKey] = fn;
@@ -399,7 +402,7 @@ const Marker = forwardRef((props, ref) => {
         if (!instance)
             return;
         const disposers = [];
-        Object.keys(EVENT_TO_PROP$1).forEach((eventKey) => {
+        Object.keys(EVENT_TO_PROP$6).forEach((eventKey) => {
             const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
                 handlersRef.current[eventKey]?.(...args);
             });
@@ -509,47 +512,310 @@ const Overlay = ({ children, ...options }) => {
 };
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const Polygon = ({ onClick = () => { }, onMouseEnter = () => { }, ...options }) => {
+const EVENT_TO_PROP$5 = {
+    click: "onClick",
+    dblclick: "onDblclick",
+    rightclick: "onRightclick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+    mouseover: "onMouseOver",
+    mouseout: "onMouseOut",
+    mouseenter: "onMouseEnter",
+    mouseleave: "onMouseLeave",
+};
+const Polygon = forwardRef((props, ref) => {
     const { current: map } = useMap();
-    const [instance, setInstance] = useState(null);
-    const callbacksRef = useRef({});
+    const [instance, setInstance] = useState();
+    const eventProps = {};
+    const options = {};
+    Object.keys(props).forEach((key) => {
+        const propKey = key;
+        if (Object.values(EVENT_TO_PROP$5).includes(propKey)) {
+            const value = props[propKey];
+            if (value !== undefined) {
+                eventProps[propKey] = value;
+            }
+        }
+        else {
+            const value = props[key];
+            if (value !== undefined) {
+                options[key] = value;
+            }
+        }
+    });
     useEffect(() => {
-        callbacksRef.current = {
-            click: onClick,
-            mouseenter: onMouseEnter,
+        if (!map)
+            return undefined;
+        const newInstance = new naver.maps.Polygon(options);
+        setInstance(newInstance);
+        newInstance.setMap(map);
+        return () => {
+            if (!map)
+                return;
+            newInstance.setMap(null);
         };
-    }, [onClick]);
+    }, [map]);
     useEffect(() => {
         if (!instance)
             return;
-        const handlers = [];
-        Object.entries(callbacksRef.current).forEach(([key, value]) => {
-            if (!value)
-                return;
-            handlers.push(instance.addListener(key, value));
+        instance.setOptions(options);
+    }, [instance, options]);
+    const handlersRef = useRef({});
+    useEffect(() => {
+        const next = {};
+        Object.keys(EVENT_TO_PROP$5).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$5[eventKey];
+            const fn = eventProps[propKey];
+            if (typeof fn === "function")
+                next[eventKey] = fn;
         });
+        handlersRef.current = next;
+    }, [eventProps]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const disposers = [];
+        Object.keys(EVENT_TO_PROP$5).forEach((eventKey) => {
+            const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
+                handlersRef.current[eventKey]?.(...args);
+            });
+            disposers.push(() => naver.maps.Event.removeListener(listener));
+        });
+        return () => disposers.forEach((d) => d());
+    }, [instance]);
+    useImperativeHandle(ref, () => instance, [instance]);
+    return null;
+});
+Polygon.displayName = "Polygon";
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const EVENT_TO_PROP$4 = {
+    click: "onClick",
+    dblclick: "onDblclick",
+    rightclick: "onRightclick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+    mouseover: "onMouseOver",
+    mouseout: "onMouseOut",
+    mouseenter: "onMouseEnter",
+    mouseleave: "onMouseLeave",
+};
+const Polyline = forwardRef((props, ref) => {
+    const { current: map } = useMap();
+    const [instance, setInstance] = useState();
+    const eventProps = {};
+    const options = {};
+    Object.keys(props).forEach((key) => {
+        const propKey = key;
+        if (Object.values(EVENT_TO_PROP$4).includes(propKey)) {
+            const value = props[propKey];
+            if (value !== undefined) {
+                eventProps[propKey] = value;
+            }
+        }
+        else {
+            const value = props[key];
+            if (value !== undefined) {
+                options[key] = value;
+            }
+        }
+    });
+    useEffect(() => {
+        if (!map)
+            return undefined;
+        const newInstance = new naver.maps.Polyline(options);
+        setInstance(newInstance);
+        newInstance.setMap(map);
         return () => {
-            handlers.forEach((handler) => instance.removeListener(handler));
+            if (!map)
+                return;
+            newInstance.setMap(null);
         };
+    }, [map]);
+    const handlersRef = useRef({});
+    useEffect(() => {
+        const next = {};
+        Object.keys(EVENT_TO_PROP$4).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$4[eventKey];
+            const fn = eventProps[propKey];
+            if (typeof fn === "function")
+                next[eventKey] = fn;
+        });
+        handlersRef.current = next;
+    }, [eventProps]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const disposers = [];
+        Object.keys(EVENT_TO_PROP$4).forEach((eventKey) => {
+            const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
+                handlersRef.current[eventKey]?.(...args);
+            });
+            disposers.push(() => naver.maps.Event.removeListener(listener));
+        });
+        return () => disposers.forEach((d) => d());
     }, [instance]);
+    useImperativeHandle(ref, () => instance, [instance]);
+    return null;
+});
+Polyline.displayName = "Polyline";
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const EVENT_TO_PROP$3 = {
+    click: "onClick",
+    dblclick: "onDblclick",
+    rightclick: "onRightclick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+    mouseover: "onMouseOver",
+    mouseout: "onMouseOut",
+    mouseenter: "onMouseEnter",
+    mouseleave: "onMouseLeave",
+};
+const Rectangle = forwardRef((props, ref) => {
+    const { current: map } = useMap();
+    const [instance, setInstance] = useState();
+    const eventProps = {};
+    const options = {};
+    Object.keys(props).forEach((key) => {
+        const propKey = key;
+        if (Object.values(EVENT_TO_PROP$3).includes(propKey)) {
+            const value = props[propKey];
+            if (value !== undefined) {
+                eventProps[propKey] = value;
+            }
+        }
+        else {
+            const value = props[key];
+            if (value !== undefined) {
+                options[key] = value;
+            }
+        }
+    });
     useEffect(() => {
         if (!map)
-            return;
-        const newInstance = new naver.maps.Polygon(options);
-        newInstance.setMap(map);
+            return undefined;
+        const newInstance = new naver.maps.Rectangle(options);
         setInstance(newInstance);
+        newInstance.setMap(map);
         return () => {
+            if (!map)
+                return;
             newInstance.setMap(null);
         };
     }, [map]);
     useEffect(() => {
-        instance?.addListener("click", onClick);
-    }, []);
+        if (!instance)
+            return;
+        instance.setOptions(options);
+    }, [instance, options]);
+    const handlersRef = useRef({});
+    useEffect(() => {
+        const next = {};
+        Object.keys(EVENT_TO_PROP$3).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$3[eventKey];
+            const fn = eventProps[propKey];
+            if (typeof fn === "function")
+                next[eventKey] = fn;
+        });
+        handlersRef.current = next;
+    }, [eventProps]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const disposers = [];
+        Object.keys(EVENT_TO_PROP$3).forEach((eventKey) => {
+            const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
+                handlersRef.current[eventKey]?.(...args);
+            });
+            disposers.push(() => naver.maps.Event.removeListener(listener));
+        });
+        return () => disposers.forEach((d) => d());
+    }, [instance]);
+    useImperativeHandle(ref, () => instance, [instance]);
     return null;
+});
+Rectangle.displayName = "Rectangle";
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const EVENT_TO_PROP$2 = {
+    click: "onClick",
+    dblclick: "onDblclick",
+    rightclick: "onRightclick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+    mouseover: "onMouseOver",
+    mouseout: "onMouseOut",
+    mouseenter: "onMouseEnter",
+    mouseleave: "onMouseLeave",
 };
+const Circle = forwardRef((props, ref) => {
+    const { current: map } = useMap();
+    const [instance, setInstance] = useState();
+    const eventProps = {};
+    const options = {};
+    Object.keys(props).forEach((key) => {
+        const propKey = key;
+        if (Object.values(EVENT_TO_PROP$2).includes(propKey)) {
+            const value = props[propKey];
+            if (value !== undefined) {
+                eventProps[propKey] = value;
+            }
+        }
+        else {
+            const value = props[key];
+            if (value !== undefined) {
+                options[key] = value;
+            }
+        }
+    });
+    useEffect(() => {
+        if (!map)
+            return undefined;
+        const newInstance = new naver.maps.Circle(options);
+        setInstance(newInstance);
+        newInstance.setMap(map);
+        return () => {
+            if (!map)
+                return;
+            newInstance.setMap(null);
+        };
+    }, [map]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        instance.setOptions(options);
+    }, [instance, options]);
+    const handlersRef = useRef({});
+    useEffect(() => {
+        const next = {};
+        Object.keys(EVENT_TO_PROP$2).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$2[eventKey];
+            const fn = eventProps[propKey];
+            if (typeof fn === "function")
+                next[eventKey] = fn;
+        });
+        handlersRef.current = next;
+    }, [eventProps]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const disposers = [];
+        Object.keys(EVENT_TO_PROP$2).forEach((eventKey) => {
+            const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
+                handlersRef.current[eventKey]?.(...args);
+            });
+            disposers.push(() => naver.maps.Event.removeListener(listener));
+        });
+        return () => disposers.forEach((d) => d());
+    }, [instance]);
+    useImperativeHandle(ref, () => instance, [instance]);
+    return null;
+});
+Circle.displayName = "Circle";
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const EVENT_TO_PROP = {
+const EVENT_TO_PROP$1 = {
     click: "onClick",
     dblclick: "onDblclick",
     rightclick: "onRightclick",
@@ -560,14 +826,14 @@ const EVENT_TO_PROP = {
     mouseenter: "onMouseEnter",
     mouseleave: "onMouseLeave",
 };
-const Polyline = forwardRef((props, ref) => {
+const Ellipse = forwardRef((props, ref) => {
     const { current: map } = useMap();
     const [instance, setInstance] = useState();
     const eventProps = {};
     const options = {};
     Object.keys(props).forEach((key) => {
         const propKey = key;
-        if (Object.values(EVENT_TO_PROP).includes(propKey)) {
+        if (Object.values(EVENT_TO_PROP$1).includes(propKey)) {
             const value = props[propKey];
             if (value !== undefined) {
                 eventProps[propKey] = value;
@@ -583,7 +849,7 @@ const Polyline = forwardRef((props, ref) => {
     useEffect(() => {
         if (!map)
             return undefined;
-        const newInstance = new naver.maps.Polyline(options);
+        const newInstance = new naver.maps.Ellipse(options);
         setInstance(newInstance);
         newInstance.setMap(map);
         return () => {
@@ -592,11 +858,16 @@ const Polyline = forwardRef((props, ref) => {
             newInstance.setMap(null);
         };
     }, [map]);
+    useEffect(() => {
+        if (!instance)
+            return;
+        instance.setOptions(options);
+    }, [instance, options]);
     const handlersRef = useRef({});
     useEffect(() => {
         const next = {};
-        Object.keys(EVENT_TO_PROP).forEach((eventKey) => {
-            const propKey = EVENT_TO_PROP[eventKey];
+        Object.keys(EVENT_TO_PROP$1).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP$1[eventKey];
             const fn = eventProps[propKey];
             if (typeof fn === "function")
                 next[eventKey] = fn;
@@ -607,7 +878,7 @@ const Polyline = forwardRef((props, ref) => {
         if (!instance)
             return;
         const disposers = [];
-        Object.keys(EVENT_TO_PROP).forEach((eventKey) => {
+        Object.keys(EVENT_TO_PROP$1).forEach((eventKey) => {
             const listener = naver.maps.Event.addListener(instance, eventKey, (...args) => {
                 handlersRef.current[eventKey]?.(...args);
             });
@@ -618,7 +889,114 @@ const Polyline = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => instance, [instance]);
     return null;
 });
-Polyline.displayName = "Polyline";
+Ellipse.displayName = "Ellipse";
+
+const EVENT_TO_PROP = {
+    addfeature: "onAddFeature",
+    removefeature: "onRemoveFeature",
+    setfeature: "onSetFeature",
+    setgeometry: "onSetGeometry",
+    setproperty: "onSetProperty",
+    removeproperty: "onRemoveProperty",
+    click: "onClick",
+    dblclick: "onDblclick",
+    rightclick: "onRightclick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+    mouseover: "onMouseOver",
+    mouseout: "onMouseOut",
+    mousemove: "onMouseMove",
+};
+const DataLayer = ({ type, url, autoStyle = true, style, onLoad, onError, ...eventProps }) => {
+    const { current: map } = useMap();
+    const [layer, setLayer] = useState();
+    const cleanUpFeatures = useMemo(() => {
+        return (target) => {
+            target.getAllFeature().forEach((feature) => {
+                target.removeFeature(feature);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        if (!map)
+            return;
+        const newLayer = new naver.maps.Data();
+        newLayer.setMap(map);
+        setLayer(newLayer);
+        return () => {
+            newLayer.setMap(null);
+            setLayer(undefined);
+        };
+    }, [map]);
+    useEffect(() => {
+        if (!layer)
+            return;
+        const controller = new AbortController();
+        const load = async () => {
+            try {
+                cleanUpFeatures(layer);
+                const response = await fetch(url, { signal: controller.signal });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch data layer: ${response.status}`);
+                }
+                if (type === "geojson") {
+                    const geojson = (await response.json());
+                    if (!controller.signal.aborted) {
+                        layer.addGeoJson(geojson, autoStyle);
+                        onLoad?.(layer);
+                    }
+                    return;
+                }
+                const text = await response.text();
+                if (controller.signal.aborted)
+                    return;
+                const xml = new DOMParser().parseFromString(text, "text/xml");
+                if (type === "gpx")
+                    layer.addGpx(xml, autoStyle);
+                if (type === "kml")
+                    layer.addKml(xml, autoStyle);
+                onLoad?.(layer);
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                onError?.(error);
+            }
+        };
+        load();
+        return () => controller.abort();
+    }, [layer, type, url, autoStyle, cleanUpFeatures, onLoad, onError]);
+    useEffect(() => {
+        if (!layer || style === undefined)
+            return;
+        layer.setStyle(style);
+    }, [layer, style]);
+    const handlersRef = useRef({});
+    useEffect(() => {
+        const next = {};
+        Object.keys(EVENT_TO_PROP).forEach((eventKey) => {
+            const propKey = EVENT_TO_PROP[eventKey];
+            const fn = eventProps[propKey];
+            if (typeof fn === "function") {
+                next[eventKey] = fn;
+            }
+        });
+        handlersRef.current = next;
+    }, [eventProps]);
+    useEffect(() => {
+        if (!layer)
+            return;
+        const disposers = [];
+        Object.keys(EVENT_TO_PROP).forEach((eventKey) => {
+            const listener = naver.maps.Event.addListener(layer, eventKey, (...args) => {
+                handlersRef.current[eventKey]?.(...args);
+            });
+            disposers.push(() => naver.maps.Event.removeListener(listener));
+        });
+        return () => disposers.forEach((d) => d());
+    }, [layer]);
+    return null;
+};
 
-export { Map, MapProvider, Marker, Overlay, Polygon, Polyline, useMap };
+export { Circle, DataLayer, Ellipse, Map, MapProvider, Marker, Overlay, Polygon, Polyline, Rectangle, useMap };
 //# sourceMappingURL=index.esm.js.map