@lugg/maps 0.2.0-alpha.9 → 1.0.0-beta.0

package/src/components/GeoJson.tsx

@@ -0,0 +1,221 @@
+import React, { useMemo, type ReactElement } from 'react';
+import type {
+  Feature,
+  FeatureCollection,
+  GeoJSON,
+  Geometry,
+  Position,
+} from './GeoJson.types';
+import type { Coordinate } from '../types';
+import type { GeoJsonProps } from './GeoJson.types';
+import { Marker } from './Marker';
+import type { MarkerProps } from './Marker.types';
+import { Polygon } from './Polygon';
+import type { PolygonProps } from './Polygon.types';
+import { Polyline } from './Polyline';
+import type { PolylineProps } from './Polyline.types';
+
+export type { GeoJsonProps } from './GeoJson.types';
+
+const toCoordinate = (position: Position): Coordinate => ({
+  latitude: position[1],
+  longitude: position[0],
+});
+
+const toCoordinates = (positions: Position[]): Coordinate[] =>
+  positions.map(toCoordinate);
+
+const normalizeFeatures = (geojson: GeoJSON): Feature[] => {
+  switch (geojson.type) {
+    case 'FeatureCollection':
+      return (geojson as FeatureCollection).features;
+    case 'Feature':
+      return [geojson as Feature];
+    default:
+      return [
+        { type: 'Feature', geometry: geojson as Geometry, properties: null },
+      ];
+  }
+};
+
+const renderGeometry = (
+  geometry: Geometry,
+  feature: Feature,
+  props: GeoJsonProps,
+  keyPrefix: string
+): ReactElement[] => {
+  const elements: ReactElement[] = [];
+
+  switch (geometry.type) {
+    case 'Point': {
+      const markerProps: MarkerProps = {
+        coordinate: toCoordinate(geometry.coordinates),
+        title: feature.properties?.title,
+        description: feature.properties?.description,
+        zIndex: props.zIndex,
+      };
+      elements.push(
+        props.renderMarker ? (
+          props.renderMarker(markerProps, feature) ?? (
+            <React.Fragment key={keyPrefix} />
+          )
+        ) : (
+          <Marker key={keyPrefix} {...markerProps} />
+        )
+      );
+      break;
+    }
+    case 'MultiPoint': {
+      for (let i = 0; i < geometry.coordinates.length; i++) {
+        const markerProps: MarkerProps = {
+          coordinate: toCoordinate(geometry.coordinates[i]!),
+          title: feature.properties?.title,
+          description: feature.properties?.description,
+          zIndex: props.zIndex,
+        };
+        const key = `${keyPrefix}-${i}`;
+        elements.push(
+          props.renderMarker ? (
+            props.renderMarker(markerProps, feature) ?? (
+              <React.Fragment key={key} />
+            )
+          ) : (
+            <Marker key={key} {...markerProps} />
+          )
+        );
+      }
+      break;
+    }
+    case 'LineString': {
+      const p = feature.properties;
+      const polylineProps: PolylineProps = {
+        coordinates: toCoordinates(geometry.coordinates),
+        strokeColors: p?.stroke ? [p.stroke] : undefined,
+        strokeWidth: p?.['stroke-width'],
+        zIndex: props.zIndex,
+      };
+      elements.push(
+        props.renderPolyline ? (
+          props.renderPolyline(polylineProps, feature) ?? (
+            <React.Fragment key={keyPrefix} />
+          )
+        ) : (
+          <Polyline key={keyPrefix} {...polylineProps} />
+        )
+      );
+      break;
+    }
+    case 'MultiLineString': {
+      const p = feature.properties;
+      for (let i = 0; i < geometry.coordinates.length; i++) {
+        const polylineProps: PolylineProps = {
+          coordinates: toCoordinates(geometry.coordinates[i]!),
+          strokeColors: p?.stroke ? [p.stroke] : undefined,
+          strokeWidth: p?.['stroke-width'],
+          zIndex: props.zIndex,
+        };
+        const key = `${keyPrefix}-${i}`;
+        elements.push(
+          props.renderPolyline ? (
+            props.renderPolyline(polylineProps, feature) ?? (
+              <React.Fragment key={key} />
+            )
+          ) : (
+            <Polyline key={key} {...polylineProps} />
+          )
+        );
+      }
+      break;
+    }
+    case 'Polygon': {
+      const outer = toCoordinates(geometry.coordinates[0]!);
+      const holes =
+        geometry.coordinates.length > 1
+          ? geometry.coordinates.slice(1).map(toCoordinates)
+          : undefined;
+      const p = feature.properties;
+      const polygonProps: PolygonProps = {
+        coordinates: outer,
+        holes,
+        fillColor: p?.fill,
+        strokeColor: p?.stroke,
+        strokeWidth: p?.['stroke-width'],
+        zIndex: props.zIndex,
+      };
+      elements.push(
+        props.renderPolygon ? (
+          props.renderPolygon(polygonProps, feature) ?? (
+            <React.Fragment key={keyPrefix} />
+          )
+        ) : (
+          <Polygon key={keyPrefix} {...polygonProps} />
+        )
+      );
+      break;
+    }
+    case 'MultiPolygon': {
+      const p = feature.properties;
+      for (let i = 0; i < geometry.coordinates.length; i++) {
+        const rings = geometry.coordinates[i]!;
+        const outer = toCoordinates(rings[0]!);
+        const holes =
+          rings.length > 1 ? rings.slice(1).map(toCoordinates) : undefined;
+        const polygonProps: PolygonProps = {
+          coordinates: outer,
+          holes,
+          fillColor: p?.fill,
+          strokeColor: p?.stroke,
+          strokeWidth: p?.['stroke-width'],
+          zIndex: props.zIndex,
+        };
+        const key = `${keyPrefix}-${i}`;
+        elements.push(
+          props.renderPolygon ? (
+            props.renderPolygon(polygonProps, feature) ?? (
+              <React.Fragment key={key} />
+            )
+          ) : (
+            <Polygon key={key} {...polygonProps} />
+          )
+        );
+      }
+      break;
+    }
+    case 'GeometryCollection': {
+      for (let i = 0; i < geometry.geometries.length; i++) {
+        elements.push(
+          ...renderGeometry(
+            geometry.geometries[i]!,
+            feature,
+            props,
+            `${keyPrefix}-${i}`
+          )
+        );
+      }
+      break;
+    }
+  }
+
+  return elements;
+};
+
+export const GeoJson = (props: GeoJsonProps) => {
+  const { geojson } = props;
+
+  const elements = useMemo(() => {
+    const features = normalizeFeatures(geojson);
+    const result: ReactElement[] = [];
+
+    for (let i = 0; i < features.length; i++) {
+      const feature = features[i]!;
+      if (!feature.geometry) continue;
+
+      const key = feature.id != null ? String(feature.id) : String(i);
+      result.push(...renderGeometry(feature.geometry, feature, props, key));
+    }
+
+    return result;
+  }, [geojson, props]);
+
+  return <>{elements}</>;
+};

package/src/components/GeoJson.types.ts

@@ -0,0 +1,107 @@
+import type { ReactElement } from 'react';
+import type { MarkerProps } from './Marker.types';
+import type { PolygonProps } from './Polygon.types';
+import type { PolylineProps } from './Polyline.types';
+
+/**
+ * GeoJSON types per RFC 7946
+ * Note: GeoJSON positions use [longitude, latitude] order
+ */
+
+export type Position =
+  | [longitude: number, latitude: number]
+  | [longitude: number, latitude: number, altitude: number];
+
+export interface Point {
+  type: 'Point';
+  coordinates: Position;
+}
+
+export interface MultiPoint {
+  type: 'MultiPoint';
+  coordinates: Position[];
+}
+
+export interface LineString {
+  type: 'LineString';
+  coordinates: Position[];
+}
+
+export interface MultiLineString {
+  type: 'MultiLineString';
+  coordinates: Position[][];
+}
+
+export interface Polygon {
+  type: 'Polygon';
+  coordinates: Position[][];
+}
+
+export interface MultiPolygon {
+  type: 'MultiPolygon';
+  coordinates: Position[][][];
+}
+
+export interface GeometryCollection {
+  type: 'GeometryCollection';
+  geometries: Geometry[];
+}
+
+export type Geometry =
+  | Point
+  | MultiPoint
+  | LineString
+  | MultiLineString
+  | Polygon
+  | MultiPolygon
+  | GeometryCollection;
+
+export interface Feature<G extends Geometry = Geometry> {
+  type: 'Feature';
+  id?: string | number;
+  geometry: G;
+  properties: Record<string, any> | null;
+}
+
+export interface FeatureCollection<G extends Geometry = Geometry> {
+  type: 'FeatureCollection';
+  features: Feature<G>[];
+}
+
+export type GeoJSON = Geometry | Feature | FeatureCollection;
+
+export interface GeoJsonProps {
+  /**
+   * GeoJSON data to render.
+   * Accepts a `FeatureCollection`, `Feature`, or bare `Geometry`.
+   */
+  geojson: GeoJSON;
+  /**
+   * Z-index for all rendered features.
+   */
+  zIndex?: number;
+  /**
+   * Custom render function for `Point`/`MultiPoint` features.
+   * @param props - Default `MarkerProps` derived from the geometry.
+   * @param feature - The source GeoJSON `Feature`.
+   */
+  renderMarker?: (props: MarkerProps, feature: Feature) => ReactElement | null;
+  /**
+   * Custom render function for `LineString`/`MultiLineString` features.
+   * @param props - Default `PolylineProps` derived from the geometry.
+   * @param feature - The source GeoJSON `Feature`.
+   */
+  renderPolyline?: (
+    props: PolylineProps,
+    feature: Feature
+  ) => ReactElement | null;
+  /**
+   * Custom render function for `Polygon`/`MultiPolygon` features.
+   * @param props - Default `PolygonProps` derived from the geometry.
+   * @param feature - The source GeoJSON `Feature`.
+   */
+  renderPolygon?: (
+    props: PolygonProps,
+    feature: Feature
+  ) => ReactElement | null;
+}

package/src/components/Marker.tsx

@@ -1,53 +1,62 @@
 import React from 'react';
-import type { ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 import LuggMarkerViewNativeComponent from '../fabric/LuggMarkerViewNativeComponent';
-import type { Coordinate, Point } from '../types';
+import type { MarkerProps } from './Marker.types';
 
-export interface MarkerProps {
-  /**
-   * Name used for debugging purposes
-   */
-  name?: string;
-  /**
-   * Marker position
-   */
-  coordinate: Coordinate;
-  /**
-   * Callout title
-   */
-  title?: string;
-  /**
-   * Callout description
-   */
-  description?: string;
-  /**
-   * Anchor point for custom marker views
-   */
-  anchor?: Point;
-  /**
-   * Z-index for marker ordering. Higher values render on top.
-   */
-  zIndex?: number;
-  /**
-   * Custom marker view
-   */
-  children?: ReactNode;
-}
+export type {
+  MarkerProps,
+  MarkerPressEvent,
+  MarkerDragEvent,
+} from './Marker.types';
+
+export class Marker extends React.PureComponent<MarkerProps> {
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.marker;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.marker];
+    }
+    return this._cachedStyle!;
+  }
+
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
 
-export class Marker extends React.Component<MarkerProps> {
   render() {
-    const { name, coordinate, title, description, anchor, zIndex, children } =
-      this.props;
+    const {
+      name,
+      coordinate,
+      title,
+      description,
+      anchor,
+      zIndex,
+      rotate = 0,
+      scale = 1,
+      rasterize = true,
+      draggable = false,
+      onPress,
+      onDragStart,
+      onDragChange,
+      onDragEnd,
+      children,
+    } = this.props;
 
     return (
       <LuggMarkerViewNativeComponent
-        style={[{ zIndex }, styles.marker]}
+        style={this.getStyle(zIndex)}
         name={name}
         coordinate={coordinate}
         title={title}
         description={description}
         anchor={anchor}
+        rotate={rotate}
+        scale={scale}
+        rasterize={rasterize}
+        draggable={draggable}
+        onMarkerPress={onPress}
+        onMarkerDragStart={onDragStart}
+        onMarkerDragChange={onDragChange}
+        onMarkerDragEnd={onDragEnd}
       >
         {children}
       </LuggMarkerViewNativeComponent>

package/src/components/Marker.types.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { Coordinate, Point, PressEventPayload } from '../types';
+
+export type MarkerPressEvent = NativeSyntheticEvent<PressEventPayload>;
+export type MarkerDragEvent = NativeSyntheticEvent<PressEventPayload>;
+
+export interface MarkerProps {
+  /**
+   * Name used for debugging purposes
+   */
+  name?: string;
+  /**
+   * Marker position
+   */
+  coordinate: Coordinate;
+  /**
+   * Callout title
+   */
+  title?: string;
+  /**
+   * Callout description
+   */
+  description?: string;
+  /**
+   * Anchor point for custom marker views
+   */
+  anchor?: Point;
+  /**
+   * Z-index for marker ordering. Higher values render on top.
+   */
+  zIndex?: number;
+  /**
+   * Rotation angle in degrees clockwise from north.
+   * @default 0
+   */
+  rotate?: number;
+  /**
+   * Scale factor for the marker.
+   * @default 1
+   */
+  scale?: number;
+  /**
+   * Rasterize custom marker view to bitmap for better performance.
+   * Set to false if you need live view updates (e.g., animations).
+   * @platform ios, android
+   * @default true
+   */
+  rasterize?: boolean;
+  /**
+   * Whether the marker can be dragged by the user.
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * Called when the marker is pressed
+   */
+  onPress?: (event: MarkerPressEvent) => void;
+  /**
+   * Called when marker drag starts
+   */
+  onDragStart?: (event: MarkerDragEvent) => void;
+  /**
+   * Called continuously as the marker is dragged
+   */
+  onDragChange?: (event: MarkerDragEvent) => void;
+  /**
+   * Called when marker drag ends
+   */
+  onDragEnd?: (event: MarkerDragEvent) => void;
+  /**
+   * Custom marker view
+   */
+  children?: ReactNode;
+}

package/src/components/Marker.web.tsx

@@ -1,32 +1,120 @@
-import React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { AdvancedMarker } from '@vis.gl/react-google-maps';
-import type { MarkerProps } from './Marker';
+import { useMapContext } from '../MapProvider.web';
+import type { MarkerProps } from './Marker.types';
 
-/**
- * Converts point to % anchor for web.
- * e.g. `0.5` to `-50%`
- */
 const toWebAnchor = (value: number) => `-${value * 100}%`;
 
-export class Marker extends React.Component<MarkerProps> {
-  render() {
-    const { coordinate, title, anchor, zIndex, children } = this.props;
-
-    const position = {
-      lat: coordinate.latitude,
-      lng: coordinate.longitude,
-    };
-
-    return (
-      <AdvancedMarker
-        position={position}
-        title={title}
-        zIndex={zIndex}
-        anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
-        anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
-      >
-        {children}
-      </AdvancedMarker>
-    );
-  }
-}
+const createEvent = (
+  e: google.maps.MapMouseEvent,
+  coordinate: MarkerProps['coordinate']
+) =>
+  ({
+    nativeEvent: {
+      coordinate: {
+        latitude: e.latLng?.lat() ?? coordinate.latitude,
+        longitude: e.latLng?.lng() ?? coordinate.longitude,
+      },
+      point: {
+        x: (e.domEvent as MouseEvent)?.clientX ?? 0,
+        y: (e.domEvent as MouseEvent)?.clientY ?? 0,
+      },
+    },
+  } as any);
+
+export const Marker = ({
+  coordinate,
+  title,
+  anchor,
+  zIndex,
+  rotate,
+  scale,
+  draggable,
+  onPress,
+  onDragStart,
+  onDragChange,
+  onDragEnd,
+  children,
+}: MarkerProps) => {
+  const { moveCamera } = useMapContext();
+  const dragPositionRef = useRef<google.maps.LatLngLiteral | null>(null);
+
+  const transforms: string[] = [];
+  if (rotate) transforms.push(`rotate(${rotate}deg)`);
+  if (scale && scale !== 1) transforms.push(`scale(${scale})`);
+
+  const handleClick = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const pos = dragPositionRef.current;
+      const coord = pos
+        ? { latitude: pos.lat, longitude: pos.lng }
+        : coordinate;
+      moveCamera(coord);
+      onPress?.(createEvent(e, coordinate));
+    },
+    [moveCamera, onPress, coordinate]
+  );
+
+  const handleDragStart = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragStart?.(createEvent(e, coordinate));
+    },
+    [onDragStart, coordinate]
+  );
+
+  const handleDrag = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragChange?.(createEvent(e, coordinate));
+    },
+    [onDragChange, coordinate]
+  );
+
+  const handleDragEnd = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng;
+      if (latLng) {
+        dragPositionRef.current = { lat: latLng.lat(), lng: latLng.lng() };
+      }
+      onDragEnd?.(createEvent(e, coordinate));
+    },
+    [onDragEnd, coordinate]
+  );
+
+  useEffect(() => {
+    dragPositionRef.current = null;
+  }, [coordinate.latitude, coordinate.longitude]);
+
+  const position = dragPositionRef.current ?? {
+    lat: coordinate.latitude,
+    lng: coordinate.longitude,
+  };
+
+  return (
+    <AdvancedMarker
+      position={position}
+      title={title}
+      zIndex={zIndex}
+      anchorLeft={anchor ? toWebAnchor(anchor.x) : undefined}
+      anchorTop={anchor ? toWebAnchor(anchor.y) : undefined}
+      clickable
+      draggable={draggable}
+      onClick={handleClick}
+      onDragStart={handleDragStart}
+      onDrag={handleDrag}
+      onDragEnd={handleDragEnd}
+      style={
+        transforms.length > 0 ? { transform: transforms.join(' ') } : undefined
+      }
+    >
+      {children}
+    </AdvancedMarker>
+  );
+};

package/src/components/Polygon.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LuggPolygonViewNativeComponent from '../fabric/LuggPolygonViewNativeComponent';
+import type { PolygonProps } from './Polygon.types';
+
+export type { PolygonProps } from './Polygon.types';
+
+export class Polygon extends React.PureComponent<PolygonProps> {
+  private _cachedZIndex: number | undefined;
+  private _cachedStyle: any;
+
+  private getStyle(zIndex: number | undefined) {
+    if (zIndex == null) return styles.polygon;
+    if (zIndex !== this._cachedZIndex) {
+      this._cachedZIndex = zIndex;
+      this._cachedStyle = [{ zIndex }, styles.polygon];
+    }
+    return this._cachedStyle!;
+  }
+
+  render() {
+    const {
+      coordinates,
+      holes,
+      strokeColor,
+      strokeWidth,
+      fillColor,
+      zIndex,
+      onPress,
+    } = this.props;
+
+    return (
+      <LuggPolygonViewNativeComponent
+        style={this.getStyle(zIndex)}
+        coordinates={coordinates}
+        holes={holes}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        fillColor={fillColor}
+        tappable={!!onPress}
+        onPolygonPress={onPress}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  polygon: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});