khulke-map-plugin

Map Component

The Map component is designed to display a map with location-specific data using Latlong Map and integrate with Khulke Search API.

Installation

Install the khulke-map-plugin package and its styles:

npm install khulke-map-plugin

Usage

import React from 'react';
import { Map } from 'khulke-map-plugin';
import 'khulke-map-plugin/dist/style.css';

const MyMap = () => {
  const searchByLocation = false; //for all India Data

  return (
    <Map
      apiUrl={process.env.REACT_APP_KHULKE_API_URL}
      authToken="YOUR_AUTH_TOKEN"
      searchByLocation={searchByLocation}
      height={'93vh'}
      width={'100%'}
      isDark={true}
      latitude={12.75}
      longitude={75.989}
      radius={50}
      searchBarEnabled={true}
    />
  );
};

export default MyMap;

Props

• apiUrl: (string) The API URL to fetch map data.
• authToken: (string) Authorization token required for API authentication.
• searchByLocation: (boolean) A flag to indicate whether to perform location-based search.
• searchString: (string) The search string or location for the map.
• height: (string) The height of the map container (e.g., '93vh').
• width: (string) The width of the map container (e.g., '100%').
• isDark: (boolean) A flag to specify the map tiles.
• latitude: (number) The latitude for location-based search.
• longitude: (number) The longitude for location-based search.
• radius: (number) The radius for location-based search.
• searchBarEnabled: (boolean) If true, searchbar will be enabled inside map.