97 lines
2.8 KiB
Markdown
97 lines
2.8 KiB
Markdown
# @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:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```bash
|
|
npm install react-native-map-clustering @react-native-community/geolocation
|
|
# and make sure react-native-maps is installed and configured
|
|
```
|
|
|
|
Basic usage:
|
|
|
|
```tsx
|
|
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).
|