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

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,118 @@
+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 FeatureProperties {
+  'title'?: string;
+  'description'?: string;
+  'fill'?: string;
+  'fill-opacity'?: number;
+  'stroke'?: string;
+  'stroke-width'?: number;
+  'stroke-opacity'?: number;
+  [key: string]: unknown;
+}
+
+export interface Feature<G extends Geometry = Geometry> {
+  type: 'Feature';
+  id?: string | number;
+  geometry: G;
+  properties: FeatureProperties | 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,55 +1,85 @@
-import React from 'react';
-import type { ReactNode } from 'react';
+import React, { isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
 import LuggMarkerViewNativeComponent from '../fabric/LuggMarkerViewNativeComponent';
-import type { Coordinate, Point } from '../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;
-}
+import LuggCalloutViewNativeComponent from '../fabric/LuggCalloutViewNativeComponent';
+import type { MarkerProps } from './Marker.types';
+
+export type {
+  CalloutOptions,
+  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,
+      callout,
+      calloutOptions,
+      children,
+    } = this.props;
+
+    const calloutContent = callout
+      ? isValidElement(callout)
+        ? callout
+        : React.createElement(callout)
+      : null;
+    const calloutBubbled = calloutOptions?.bubbled ?? true;
+    const calloutAnchor = calloutOptions?.anchor;
 
     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}
+        {calloutContent && (
+          <LuggCalloutViewNativeComponent
+            style={calloutStyles.callout}
+            bubbled={calloutBubbled}
+            anchor={calloutAnchor}
+          >
+            {calloutContent}
+          </LuggCalloutViewNativeComponent>
+        )}
       </LuggMarkerViewNativeComponent>
     );
   }
@@ -61,3 +91,10 @@ const styles = StyleSheet.create({
     pointerEvents: 'box-none',
   },
 });
+
+const calloutStyles = StyleSheet.create({
+  callout: {
+    position: 'absolute',
+    pointerEvents: 'box-none',
+  },
+});

package/src/components/Marker.types.ts

@@ -0,0 +1,102 @@
+import type { ComponentType, ReactElement, 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 CalloutOptions {
+  /**
+   * Whether to wrap the callout in the native platform bubble.
+   * Set to `false` to render custom content directly without the native callout chrome.
+   *
+   * @default true
+   */
+  bubbled?: boolean;
+  /**
+   * Anchor point for the callout relative to the marker position.
+   * `{x: 0.5, y: 1}` places the bottom-center of the callout at the marker.
+   *
+   * @note Not supported on web.
+   * @default {x: 0.5, y: 1}
+   */
+  anchor?: Point;
+}
+
+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;
+  /**
+   * Callout content displayed when marker is tapped.
+   * Pass a `ReactElement` for inline content or a `ComponentType` to be instantiated.
+   */
+  callout?: ComponentType<unknown> | ReactElement;
+  /**
+   * Callout configuration options.
+   */
+  calloutOptions?: CalloutOptions;
+  /**
+   * Custom marker view
+   */
+  children?: ReactNode;
+}