react-feather#MapPin JavaScript Examples

function LocationAndVehicles({ launchPad }) {
  return (
    <SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
      <Stat>
        <StatLabel display="flex">
          <Box as={MapPin} width="1em" />{" "}
          <Box ml="2" as="span">
            Location
          </Box>
        </StatLabel>
        <StatNumber fontSize="xl">{launchPad.location.name}</StatNumber>
        <StatHelpText>{launchPad.location.region}</StatHelpText>
      </Stat>
      <Stat>
        <StatLabel display="flex">
          <Box as={Navigation} width="1em" />{" "}
          <Box ml="2" as="span">
            Vehicles
          </Box>
        </StatLabel>
        <StatNumber fontSize="xl">
          {launchPad.vehicles_launched.join(", ")}
        </StatNumber>
      </Stat>
    </SimpleGrid>
  );
}

function TimeAndLocation({ launch }) {
  return (
    <SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
      <Stat>
        <StatLabel display="flex">
          <Box as={Watch} width="1em" />{" "}
          <Box ml="2" as="span">
            Launch Date
          </Box>
        </StatLabel>
        <StatNumber fontSize={["md", "xl"]}>
          {formatDateTime(launch.launch_date_local)}
        </StatNumber>
        <StatHelpText>{timeAgo(launch.launch_date_utc)}</StatHelpText>
      </Stat>
      <Stat>
        <StatLabel display="flex">
          <Box as={MapPin} width="1em" />{" "}
          <Box ml="2" as="span">
            Launch Site
          </Box>
        </StatLabel>
        <StatNumber fontSize={["md", "xl"]}>
          <Link
            as={RouterLink}
            to={`/launch-pads/${launch.launch_site.site_id}`}
          >
            {launch.launch_site.site_name_long}
          </Link>
        </StatNumber>
        <StatHelpText>{launch.launch_site.site_name}</StatHelpText>
      </Stat>
    </SimpleGrid>
  );
}

CommunityProfile = ({ profile, size = "small" }) => {
  let cx = 300
  if (size === "medium") {
    cx = 220
  } else if (size === "small") {
    cx = 150
  }

  return (
    <div className={classNames("community-profile", size)} data-contributions={profile.contributions}>
      <a href={`https://github.com/${profile.githubId}`} target="_blank" rel="noopener noreferrer">
        <img data-srcset={
          (`${profile.avatar_url}&s=${cx} 2x,` || `https://github.com/${profile.githubId}.png?size=${cx} 2x,`) +
          (`${profile.avatar_url}&s=${cx / 2}` || `https://github.com/${profile.githubId}.png?size=${cx / 2}`)
        } alt={profile.name || profile.githubId} title={size === "small" ? (profile.name || profile.githubId) : undefined}
        className="lazyload" />
      </a>
      {profile.name && <div className="community-profile-name">{profile.name}</div>}
      {profile.role && <div className="community-profile-role">{profile.role}</div>}
      {profile.location && <div className="community-profile-location">
        <MapPin className="community-profile-map-pin" /> {profile.location}
      </div>}
      {size !== "small" && (
        <div className="community-profile-social">
          <a href={`https://github.com/${profile.githubId}`} target="_blank" rel="noopener noreferrer"><SimpleIcon icon={siGithub} /></a>
          {profile.blog && <a href={profile.blog} target="_blank" rel="noopener noreferrer"><Home /></a>}
          {profile.twitter && <a href={`https://twitter.com/${profile.twitter}`} target="_blank" rel="noopener noreferrer"><SimpleIcon icon={siTwitter} /></a>}
        </div>
      )}
      <style jsx>{styles}</style>
    </div>
  )
}

Marker = () => {
  return (
    <div style={{ color: 'blue' }}>
      <MapPin />
    </div>
  )
}

ContactPageTemplate = ({
  body,
  title,
  subtitle,
  featuredImage,
  address,
  phone,
  email,
  locations
}) => (
  <main className="Contact">
    <PageHeader
      title={title}
      subtitle={subtitle}
      backgroundImage={featuredImage}
    />
    <section className="section Contact--Section1">
      <div className="container Contact--Section1--Container">
        <div>
          <Content source={body} />
          <div className="Contact--Details">
            {address && (
              <a
                className="Contact--Details--Item"
                href={`https://www.google.com/maps/search/${encodeURI(
                  address
                )}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <MapPin /> {address}
              </a>
            )}
            {phone && (
              <a className="Contact--Details--Item" href={`tel:${phone}`}>
                <Smartphone /> {phone}
              </a>
            )}
            {email && (
              <a className="Contact--Details--Item" href={`mailto:${email}`}>
                <Mail /> {email}
              </a>
            )}
          </div>
        </div>

        <div>
          <FormSimpleAjax name="contact_form" />
        </div>
      </div>
    </section>

    <GoogleMap locations={locations} />
  </main>
)

Timeline = ({ data, timestamp, jump }) => {
  const timelineRef = useRef()
  const timeline = useRef()
  const {
    cyWrapper: { cy, viewApi },
  } = useContext(GlobalContext)
  const [modal, setModal] = useState(false)
  const [target, setTarget] = useState('timeline')
  const [node, setNode] = useState(<Spinner />)
  const [showJump, setShowJump] = useState('d-block')
  const [showFind, setShowFind] = useState('d-none')
  const [items, setItems] = useState([])

  const toggle = () => setModal(!modal)
  const jumpTo = async (lctime) => {
    if (lctime !== timestamp) {
      jump(lctime)
    }

    setModal(false)
  }
  const locate = (item) => {
    if (item && item.event !== 'deleted') {
      const node = cy.$id(item.nid)

      viewApi.zoomToSelected(node)
      viewApi.removeHighlights(cy.elements())
      viewApi.highlight(node)
    }

    setModal(false)
  }

  useEffect(() => {
    if (get(data, 'ok')) {
      setItems(
        data.data.map((event, idx) => ({
          id: idx,
          className: event.lctime === timestamp ? 'pinned' : '',
          title: event.event,
          content: '',
          start: event.lctime * 1000,
          style: `background-color: ${bgColors[event.event]};`,
          lctime: event.lctime,
          nid: event.nids[0] || event.mid,
          event: event.event,
        }))
      )
    }
  }, [data, timestamp])

  useEffect(() => {
    if (items.length) {
      if (timeline.current) {
        timeline.current.setItems(items)
      } else {
        const container = timelineRef.current
        if (container.firstChild) {
          container.removeChild(container.firstChild)
        }

        const margin = (items[items.length - 1].start - items[0].start) * 0.05
        const options = {
          width: '100%',
          height: '120px',
          type: 'box',
          stack: false,
          horizontalScroll: false,
          verticalScroll: false,
          cluster: {
            titleTemplate: '{count}',
            maxItems: 1,
            showStipes: true,
            fitOnDoubleClick: true,
          },
          max: items[items.length - 1].start + margin,
          min: items[0].start - margin,
          selectable: false,
          dataAttributes: ['id'],
          zoomMin: 60000,
        }

        timeline.current = new VisTimeline(container, items, options)
      }

      timeline.current.on('click', (properties) => {
        const { what, isCluster, item } = properties

        if (what === 'item' && !isCluster) {
          setNode(<Spinner />)
          setTarget(item)
          setModal(true)

          if (items[item].className === 'pinned') {
            setShowJump('d-none')

            if (items[item].event !== 'deleted') {
              setShowFind('d-block')
            }
          } else {
            setShowJump('d-block')
            setShowFind('d-none')
          }
        } else {
          setModal(false)
          setTarget('timeline')
        }
      })
      timeline.current.on('doubleClick', (properties) => {
        const { what, item, isCluster } = properties

        switch (what) {
          case 'background':
            timeline.current.fit()

            break
          case 'item':
            if (!isCluster) {
              timeline.current.focus(item)
            }

            break
        }
      })

      defer(() => { // To ensure focus/fit on first load.
        if (timestamp) {
          const idx = findIndex(items, { lctime: timestamp })
          timeline.current.focus(idx)
        } else {
          timeline.current.fit()
        }
      })
    }
  }, [items, timestamp])

  useEffect(
    () => () => {
      timeline.current.destroy()
      timeline.current = null
    },
    []
  )

  return (
    <div className={'border border-secondary rounded'}>
      <div id={'timeline'} ref={timelineRef} className={'m-1'} >
        <Spinner/>
      </div>
      <Modal
        isOpen={modal}
        toggle={toggle}
        fade={false}
        centered={true}
        size={'lg'}
        scrollable={true}
      >
        <ModalHeader toggle={toggle}>
          <b>{node}</b> | {get(items, [target, 'event'], 'NA')}{' '}
          {new Date(get(items, [target, 'start'], Date.now())).toLocaleString()}
        </ModalHeader>
        <ModalBody>
          {data && data.data[target] ? (
            <EventDetail event={data.data[target]} setNode={setNode} />
          ) : null}
        </ModalBody>
        <ModalFooter>
          <Button
            className={`ml-1 ${showJump}`}
            outline
            color="secondary"
            id="jump"
            onClick={() => jumpTo(items[target].lctime)}
          >
            <MapPin size={16} /> Jump
          </Button>
          &nbsp;
          <Button
            className={`ml-1 ${showFind}`}
            outline
            color="secondary"
            id="find"
            onClick={() => locate(items[target])}
          >
            <Search size={16} /> Find
          </Button>
          &nbsp;
          <ToolTippedButton
            className="ml-1"
            outline
            color="secondary"
            id="tag"
            disabled={true}
            tooltip={'Coming Soon'}
          >
            <Tag size={16} /> Tag
          </ToolTippedButton>
        </ModalFooter>
      </Modal>
    </div>
  )
}

TimelineCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-11 Hivemind.png"
            alt="Event Detail"
          />
          <CardBody>
            <CardTitle tag="h5">Event Detail</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Shows the delta associated with an event (update, in this
              instance).
            </CardSubtitle>
            <CardText>
              Accessed by clicking on an event on the timeline. Fields that were
              changed are marked in colour. The event time is displayed. If the
              title was changed, both the old and new title are shown in the
              header section of the detail popup. Clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button makes the mind map jump to a point in time just after this
              event had occured. This updates the canvas and also focuses the
              timeline on this event.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Event Detail',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-12 Hivemind.png"
            alt="Timeline Jump"
          />
          <CardBody>
            <CardTitle tag="h5">Timeline Jump</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button from the event detail popup.
            </CardSubtitle>
            <CardText>
              The mind map has jumped to the point in time at which this event
              had occured. The state of the canvas reflects the mind map was in
              just after this event had occurred. The affected node is
              higlighted with a blue border. The timeline focusses on the event
              in question.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Timeline Jump',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-13 Hivemind.png"
            alt="Event Detail"
          />
          <CardBody>
            <CardTitle tag="h5">Event Detail (Focussed)</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Shows the delta associated with an event (update, in this
              instance).
            </CardSubtitle>
            <CardText>
              Accessed by clicking on an (focussed) event on the timeline. The{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button is now replaced with a{' '}
              <Button outline color="secondary" size={'sm'}>
                <Search /> Find
              </Button>{' '}
              button. This can be used to zoom in on the affected node on the
              canvas.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Focussing on an Event Detail',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-14 Hivemind.png"
            alt="Find Node"
          />
          <CardBody>
            <CardTitle tag="h5">Find Node</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <Search /> Find
              </Button>{' '}
              button from the event detail popup.
            </CardSubtitle>
            <CardText>
              The canvas zooms in on the node affected by the event.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Find Node',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
        interval={false}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}