Add PropertyMap and PriceMarker components with property search functionality
This commit is contained in:
@@ -50,5 +50,47 @@ Available methods:
|
||||
|
||||
---
|
||||
|
||||
## 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).
|
||||
|
||||
Reference in New Issue
Block a user