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 [email protected]

Link

Story Book Link Map

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_map

Import component

import { Map } from '@licuido-ui/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 |