khulke-map-plugin
v2.4.2
Published
The Map component is designed to display a map with location-specific data using Latlong Map and integrate with Khulke Search API.
Downloads
13
Readme
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.