@licuido/ui_map

Map

Map - which is related to googlemap ,we can customize the routes, direction and places but google api key is must !

Author

• @author Arunachalam R [e-mail]

Link

Story Book Link Map

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido/ui_map

Import component

import { Map } from '@licuido/ui_map';

Usage

You can pass the location (Latitude and Longitude) for finding the places

<Map
  googleMapApiKey=''
  location={[
    {
      name: 'Adayar',
      location: {
        lat: 13.003387,
        lng: 80.255043,
      },
      address: 'Adyar is a large neighbourhood in south Chennai, Tamil Nadu, India',
      image: './assets/adayar.jpg',
      pinnedIcon: './assets/pinned.svg',
    },
  ]}
  locations={locations}
  center={{
    lat: 12.956786921292327,
    lng: 80.25718652012615,
  }}
 
/>

Image

Map width Route

googleMapApiKey - googleMapApiKey is must for Routes!

You can pass the origin (start) and destination (end) to find the Route Direction

<Map
   start={ lat: 13.003387, lng: 80.255043 }
   end= { lat: 12.95790649960084, lng: 80.26010930368109 }/>

Samplecode

<Map
   googleMapApiKey=''
  location={[
    {
      name: 'Adayar',
      location: {
        lat: 13.003387,
        lng: 80.255043,
      },
      address: 'Adyar is a large neighbourhood in sout Chennai, Tamil Nadu, India',
      image: './assets/adayar.jpg',
      pinnedIcon: './assets/pinned.svg',
    },
  ]}
  locations={locations}
  center={{
    lat: 12.956786921292327,
    lng: 80.25718652012615,
  }}
  start= { lat: 13.003387, lng: 80.255043 }
  end= { lat: 12.95790649960084, lng: 80.26010930368109 }
  mapStyles= {
      height: '100%',
      width: '100%',
    }
  RadiusStyle={{}}
  markerLabelStyle= {{}}
  calculatebtnStyle={{}}
  mapRadiusIcon=''
  radiusDistance={1200000000}
  zoom={13}
  isSearchRequired={false}
  setDefaultRoute={false}
  fullscreenControl
  mapTypeControl={false}
  onMarkerClick={()=>onMarkerClick()}
  onMarkerMouseOver={()=>onMarkerMouseOver()}
  onClearRoute={()=>onClearRoute()}
  onCalculateRoutes={()=>onCalculateRoutes()}
  onMarkerClustererClick={()=>onMarkerClustererClick()}
  onMarkerMouseOut= {()=>onMarkerMouseOut()}
/>

Props

Name	Description	Default	Control
mapStyles	object	{ height: '100%', width: '100%' }	mapStyles : {height : "100%"width : "100%"}
RadiusStyle	object	{ }	RadiusStyle : {}
markerLabelStyle	object	{ }	markerLabelStyle : {}
calculatebtnStyle	SxProps<{}>	-	calculatebtnStyle : {}
googleMapApiKey	string	""
zoom	number	13
mapRadiusIcon	string	"./assets/mapCircle.png"	./assets/mapCircle.png
radiusDistance	number	1200000000
isSearchRequired	boolean	true	FalseTrue
deatilsCardCustomize	ReactNode	-	"Customize Card"
locations	locationsData[]	[]	locations : [0 : {...} 5 keys]
center	any	-	center : {lat : ""lng : ""}
origin	latLAng	{ lat: 0, lng: 0 }	origin : {lat : 13.003387lng : 80.255043}
destination	latLAng	{ lat: 0, lng: 0 }	destination : {lat : 12.95790649960084lng : 80.26010930368109}
setDefaultRoute	boolean	true	FalseTrue
fullscreenControl	boolean	true	FalseTrue
searchBoxRootsx	SxProps<{}>	-	searchBoxRootsx : {}
zoomControl	boolean	true	FalseTrue
streetViewControl	boolean	true	FalseTrue
mapTypeControl	boolean	true	FalseTrue
onClearRoute	() => void	() => false	()=>onClearRoute()
onCalculateRoutes	(data: any) => void	() => false	()=>onCalculateRoutes()
onMarkerMouseOver	(marker: any) => void	() => false	()=>onMarkerMouseOver()
onMarkerClustererClick	(e: unknown) => void	() => false	()=>onMarkerClustererClick()
onMarkerClick	(data: any) => void	() => false	()=>onMarkerClick()
onMarkerMouseOut	() => void	() => false	()=>onMarkerMouseOut()
className	string	-	Set string
sx	SxProps<Theme>	-	Set object
responsiveDetailsCustomize	ReactNode	-	Set object
deatilsCardCustomizes	boolean	-	Set boolean
customCardLocation	any	-	Set object