Sari Application

Sari is a map-based application designed to display real estate transactions and points of interest (POIs) on the map of Al Madinah Al Munawaroh. It provides features to interact with the map, fetch transaction data, show transaction details, and display location information.

Features

• Map View: Displays a map of Al Madinah Al Munawaroh.
• Zoom Control: Initiates the map at the top of Al Haram with a default zoom level of 10.
• Token Authorization: Allows access only to apps with a predefined token.
• POI Display: Shows POIs on the map by their names passed from the hosting app.
• Fetch Transactions: Fetches real estate transactions when the user navigates the map at zoom level 14+.
• Visual Representation of Transactions: Visualizes fetched transactions on the map with deal details.
• Consolidated View: Shows an average price when the user zooms out.
• Location Click Handling: Returns address details when a location on the map is clicked.

Usage

Props

• zoom?: number: Initial zoom level for the map (default: 10).
• ref:
  • getTransactions Function to trigger fetching transactions based on bounds and period.
  • resetCenter Function to reset map center to default.
  • resetZoom Function to reset map zoom to default.
• disableTransactionFetch?: boolean: Flag to disable transaction fetching.
• searchTermPOIs?: string[]: Array of POIs by name to be displayed on the map.
• onTransactionsChange?: (status: TransactionStatus, data: Transaction[]) => void: Callback to handle transactions change, and return transactions fetching status.
• onLocationClick?: (data: string) => void: Callback to handle location click event.
• mapType?: google.maps.MapTypeId: Map type identifier, should be one of these: 'hybrid', 'roadmap', 'satellite', 'terrain'.
• onZoomChange?: (zoom: number) => void: Callback to handle zoom level change.
• onCenterChange?: (center: { lat: number; lng: number }) => void: Callback to handle center change.

Code Example

import SariMap from './SariMap'; // Example import, update based on actual path

// Example usage with props
const ExampleComponent = () => {

  return (
    <div>
      {/* Render SariMap component */}
      <SariMap
        zoom={10}
        getTransactions={getTransactions}
        disableTransactionFetch={false}
        searchTermPOIs={['POI1', 'POI2']}
        onTransactionsChange={(status, data) => console.log('Transactions changed', data)}
        onLocationClick={(data) => console.log('Location clicked', data)}
        mapType={google.maps.MapTypeId.TERRAIN}
        onZoomChange={(zoom) => console.log('Zoom level changed', zoom)}
        onCenterChange={(center) => console.log('Center changed', center)}
      />
    </div>
  );
};