react-icons/fi#FiMap JavaScript Examples

FloatingMapButton = ({ onOpenMap }) => {
  return (
    <StFloatingMapButton
      btnType="oval"
      color="black"
      hover={css`
        transform: scale(1.05);
        box-shadow: 0 3px 5px ${({ theme }) => theme.color.lightGray};
      `}
      transition
      onClick={onOpenMap}
    >
      <FiMap /> <span>지도</span>
    </StFloatingMapButton>
  );
}

MapButton = ({ mapState, onShowMap, ...rest }) => {
  return mapState ? null : (
    <StMapButton border="none" fontSize="1.4rem" onClick={onShowMap} {...rest}>
      <FiMap /> <StSpan>지도 표시하기</StSpan>
    </StMapButton>
  );
}

render() {
        const { lang, metric, currentMap, fullPlot, fullTree, plotType } = this.props

        return (
            <div className={`map-nav-bar-wrap ${fullPlot && !plotTypes[plotType].metricChange ? 'grey-out' : ''}`}>
                <ul className="map-nav-bar">
                    {[ 'confirmedCount', 'deadCount', 'curedCount' ].map((count) => (
                        <li key={`map-nav-${count}`} className={count === metric ? 'current' : ''}>
                            <div value={count} onClick={this.metricToggle}>
                                {metricText[count][lang]}
                            </div>
                        </li>
                    ))}
                </ul>

                {!fullPlot &&
                !fullTree && (
                    <UncontrolledDropdown className="map-toggle">
                        <DropdownToggle
                            className="map-toggle-button"
                            tag="span"
                            data-toggle="dropdown"
                            aria-expanded={this.state.dropdownOpen}
                        >
                            <FiMap size={14} style={{ marginRight: 10 }} />
                            <span>{mapText[currentMap].title[lang]}</span>
                        </DropdownToggle>
                        <DropdownMenu
                            modifiers={{
                                setMaxHeight: {
                                    enabled: true,
                                    order: 890,
                                    fn: (data) => {
                                        return {
                                            ...data,
                                            styles: {
                                                ...data.styles,
                                                overflowY: 'auto',
                                                maxHeight: this.state.height * 0.5
                                            }
                                        }
                                    }
                                }
                            }}
                        >
                            {[
                                'Global',
                                'Asia',
                                'Europe',
                                'North America',
                                'South America',
                                'Oceania',
                                'Africa',
                                null
                            ].map((continent) =>
                                Object.keys(mapText)
                                    .filter(
                                        (map) =>
                                            mapText[map].continent === continent ||
                                            (mapText[map].continent && mapText[map].continent['en'] === continent)
                                    )
                                    .map((map, idx) => {
                                        return (
                                            <Fragment key={`map-${idx}`}>
                                                {map === str.TRANSMISSION ? <DropdownItem divider /> : <div />}
                                                {idx === 0 && continent != null && continent !== 'Global' ? (
                                                    <Fragment>
                                                        <DropdownItem divider />
                                                        <DropdownItem header>
                                                            {mapText[map].continent[lang]}
                                                        </DropdownItem>
                                                    </Fragment>
                                                ) : (
                                                    <div />
                                                )}
                                                <DropdownItem
                                                    className={currentMap === map ? 'current' : ''}
                                                    onClick={() => this.mapToggle(map)}
                                                >
                                                    {map !== str.TRANSMISSION && (
                                                        <span
                                                            className={`flag-icon ${mapText[map].flagCode
                                                                ? 'flag-icon-' + mapText[map].flagCode
                                                                : ''}`}
                                                        />
                                                    )}
                                                    {mapText[map].title[lang]}
                                                </DropdownItem>
                                            </Fragment>
                                        )
                                    })
                            )}
                        </DropdownMenu>
                    </UncontrolledDropdown>
                )}
            </div>
        )
    }