Add PropertyMap and PriceMarker components with property search functionality

This commit is contained in:
2026-01-31 23:22:12 +05:30
parent 5b04cc9a58
commit b9cae949d4
6 changed files with 380 additions and 20 deletions

View File

@@ -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).