import React from 'react';
import MapsComponent from 'bio-bind-ui/components/Maps';
 
const PreviewMaps = () => {
  return (
    <div style={{ width: 800, height: 640 }}>
      <MapsComponent />
    </div>
  )
}
 
export default PreviewMaps

import React from 'react';
import MapsComponent from 'bio-bind-ui/components/Maps';
 
const PreviewMaps = () => {
 
  return (
    <div style={{ width: 800, height: 640 }}>
      <MapsComponent
      dataPinMarkers={[
        {
          id: 1,
          popupContent: 'POPUP TEXT 1',
          position: [
            -6.89867667275876,
            107.6008299923685
          ]
        },
        {
          iconColor: {
            dark: '#FF8B33',
            light: '#E86400'
          },
          id: 2,
          position: [
            -6.900711040011266,
            107.59871641176574
          ]
        },
        {
          id: 3,
          popupContent: 'POPUP TEXT 3',
          popupProps: {
            closeButton: false
          },
          position: [
            -6.9020956828796995,
            107.60037938127552
          ]
        },
        {
          iconColor: {
            dark: '#ffc733',
            light: '#e8a800'
          },
          id: 4,
          position: [
            -6.9022661001835734,
            107.60237494468726
          ]
        },
        {
          iconColor: {
            dark: '#FF8B33',
            light: '#E86400'
          },
          id: 5,
          popupContent: 'NOT MY LOCATION',
          position: [
            -7.667615615846061,
            110.38693932816129
          ]
        }
      ]}
      />
    </div>
  )
}
 
export default PreviewMaps

import React from 'react';
import MapsComponent from 'bio-bind-ui/components/Maps';
 
const PreviewMaps = () => {
 
  return (
    <div style={{ width: 800, height: 640 }}>
      <MapsComponent
        mode='dark'
      />
    </div>
  )
}
 
export default PreviewMaps