Mapsdk/packages/map-sdk/README.md

@lynkedup/map-sdk

A small TypeScript wrapper around react-native-maps to provide a consistent API and typed components.

Usage

Install peer deps in your app:

npm install react-native react-native-maps
# and add this package via workspace or npm/yarn

Basic usage:

import React from 'react';
import { MapView, Marker } from '@lynkedup/map-sdk';

export default function App() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
    >
      <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
    </MapView>
  );
}

Camera Controls 🔧

This package exposes a small imperative MapHandle API via ref on MapView. Use it to animate the camera or fit bounds.

Example:

const mapRef = useRef<MapHandle | null>(null);
mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 });
mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 });

Available methods:

• animateToRegion(region, duration?) — animate to a region.
• animateCamera(camera, options?) — animate using camera properties.
• flyTo(coordinate, duration?) — quick helper that animates to a small region around coordinate.
• fitBounds(northEast, southWest, options?) — fit the two coordinates with optional edgePadding.

---

PropertyMap (high-level SDK component) ✅

PropertyMap is a ready-made map screen for property searches — it includes a search bar, clustering support, polygon rendering and a bottom property card. It's ideal to embed in apps that want a turn-key property map.

Install the extra peer deps in your app:

npm install react-native-map-clustering @react-native-community/geolocation
# and make sure react-native-maps is installed and configured

Basic usage:

import React from 'react';
import { PropertyMap } from '@lynkedup/map-sdk';

export default function PropertiesScreen() {
  return (
    <PropertyMap
      apiUrl="https://your-api/property-search"
      initialRegion={{ latitude: 25.48, longitude: 81.85, latitudeDelta: 0.02, longitudeDelta: 0.02 }}
      showSearch
      radius={500}
      onSelectProperty={(item) => console.log('selected', item)}
    />
  );
}

Props summary:

• apiUrl?: string — POST endpoint used for property searches (defaults to the demo host).
• initialRegion?: Region — starting region.
• radius?: number — search radius in meters (default: 500).
• showSearch?: boolean — render search bar (default: true).
• onSelectProperty?: (item) => void — callback for property selection.

---

---

Notes

• This package delegates to react-native-maps for platform implementations. Follow react-native-maps docs for iOS/Android setup (Google Maps API key, pods, manifest permissions).