dropgo-maps

A React component library for displaying hotel maps with routing.

Installation

npm install dropgo-maps

Data Structure

To use your own data, pass an array of objects to the hotels prop. Each object should have the following structure:

[
  {
    "id": 1,
    "name": "Hotel Sunshine",
    "address": "123 Main St, Chennai",
    "lat": 13.0827,
    "lng": 80.2707,
    "price": 120,
    "rating": 4.5,
    "image": "https://picsum.photos/200/150?random=1"
  }
]

Logistics Map (v2.0+)

For Pickup and Delivery workflows:

import { LogisticsMap, logisticsLocations, categories, validateLocation } from 'dropgo-maps';

// ... inside your component
<LogisticsMap 
  pickupLocation={pickup} 
  deliveryLocation={delivery}
/>

Props:

• pickupLocation: Object { lat, lng, name, address, ... }
• deliveryLocation: Object { lat, lng, name, address, ... }

Utilities:

• validateLocation(lat, lng): Returns { isValid: boolean, message: string }
• categories: Array of available categories (Yamato, Hotel, etc.)

Shipment Workflow (v3.0+)

The ShipmentWorkflow component provides a complete UI for managing the pickup and delivery selection process.

import { ShipmentWorkflow } from 'dropgo-maps';

// Inside your component
<ShipmentWorkflow onUpdate={(data) => console.log('Current Selections:', data)} />

Advanced Search (v3.0+)

• Address Search: When the "All" category is selected, the SearchBox uses the Nominatim API for real-world address auto-suggestion (debounced).
• Geolocation: Click the 📍 icon in the search box to use your current location.

Props (LogisticsMap)

import { HotelMap, hotelsData } from 'hotel-maps-poc';
import { useState } from 'react';

function App() {
  const [selectedHotel, setSelectedHotel] = useState(null);

  return (
    <HotelMap 
      hotels={hotelsData} 
      selectedHotel={selectedHotel} 
    />
  );
}

Features

• Interactive Map (Leaflet)
• Routing (Leaflet Routing Machine)
• Sample Hotel Data