@vinctus/react-maplibre 1.1.0 → 1.2.0

package/dist/Marker.d.ts

@@ -11,5 +11,11 @@ export type MarkerProps = {
     popupClassName?: string;
     closeOnClick?: boolean;
     closeButton?: boolean;
+    /**
+     * Lets the marker sit between whole pixels. MapLibre rounds a marker's position every time
+     * `setLngLat` is called, which keeps static markers crisp but makes a marker that is being
+     * animated move a whole pixel at a time.
+     */
+    subpixelPositioning?: boolean;
 };
 export declare const Marker: FC<MarkerProps>;

package/dist/Marker.js

@@ -3,7 +3,7 @@ import maplibre from 'maplibre-gl';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import { MapContext } from './Map';
-export const Marker = ({ children, longitude, latitude, className, anchor, color, popup, popupClassName, closeOnClick = false, closeButton = false, }) => {
+export const Marker = ({ children, longitude, latitude, className, anchor, color, popup, popupClassName, closeOnClick = false, closeButton = false, subpixelPositioning = false, }) => {
     const { map, mapLoaded } = useContext(MapContext);
     const [marker, setMarker] = useState(null);
     // The DOM element the `children` are rendered into. It is created once and reused for the
@@ -17,7 +17,13 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
         if (!map || !mapLoaded) {
             return;
         }
-        const newMarker = new maplibre.Marker({ anchor, className, color, element })
+        const newMarker = new maplibre.Marker({
+            anchor,
+            className,
+            color,
+            element,
+            subpixelPositioning,
+        })
             .setLngLat(coordinates.current)
             .addTo(map);
         setMarker(newMarker);
@@ -30,7 +36,7 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
             }
             setMarker(null);
         };
-    }, [anchor, className, color, element, map, mapLoaded]);
+    }, [anchor, className, color, element, map, mapLoaded, subpixelPositioning]);
     useEffect(() => {
         if (marker) {
             marker.setLngLat([longitude, latitude]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinctus/react-maplibre",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "type": "module",
   "types": "dist/index.d.ts",