react-icons/fa#FaShip JavaScript Examples
The following examples show how to use
react-icons/fa#FaShip.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Map.js From covid19 with MIT License | 4 votes |
|
render() {
if (this.props.currentMap === str.TRANSMISSION) return <div />
const currentMap = maps[this.props.currentMap]
const { data, metric, date, lang, currentRegion, mapZoom, darkMode } = this.props
const lang_map = lang !== 'zh'? 'en' : 'zh'
const isUsState =
this.props.currentMap === str.US_MAP2 && this.state.usState != null && this.state.usState in us_map
const center = isUsState
? us_map[this.state.usState].center.split(',').map((d) => parseFloat(d))
: currentMap.center.split(',').map((d) => parseFloat(d))
const scale = isUsState ? us_map[this.state.usState].scale : currentMap.scale
const projection = isUsState ? 'geoMercator' : currentMap.projection
const { colorScale } = this.getColorScale(isUsState)
const cruiseData = getDataFromRegion(data, [ str.INTL_CONVEYANCE_ZH, str.DIAMOND_PRINCESS_ZH ])
const cruiseCounts = cruiseData[metric][date] ? cruiseData[metric][date] : 0
const cruiseStrokeColor = this.getStrokeColor(cruiseCounts, isUsState)
const greyStrokeColor = darkMode ? 'var(--primary-color-10)' : 'var(--grey)'
return (
<Fragment>
{this.props.currentMap === str.WORLD_MAP && (
<div className="map-transmission-toggle-wrap">
<Toggle
className="map-transmission-toggle"
defaultChecked={this.state.showTransmissions}
onChange={() => this.setState({ showTransmissions: !this.state.showTransmissions })}
icons={false}
/>
<span>{i18n.TRANSMISSIONS[this.props.lang]}</span>
</div>
)}
<ComposableMap
projection={projection}
projectionConfig={{
scale: scale,
rotate: currentMap.rotate
? currentMap.rotate.split(',').map((x) => parseInt(x, 10))
: [ 0, 0, 0 ],
parallels: currentMap.parallels
? currentMap.parallels.split(',').map((x) => parseInt(x, 10))
: [ 0, 0 ]
}}
>
<PatternLines
id="lines"
height={6}
width={6}
stroke={greyStrokeColor}
strokeWidth={1}
background={darkMode ? 'var(--darker-grey)' : '#fff'}
orientation={[ 'diagonal' ]}
/>
<PatternLines
id="background-lines"
height={6}
width={6}
stroke={darkMode ? '#333' : '#ddd'}
strokeWidth={1}
background={darkMode ? 'var(--darker-grey)' : '#fff'}
orientation={[ 'diagonal' ]}
/>
<ZoomableGroup
zoom={mapZoom}
onZoomEnd={this.onZoomEnd}
onMoveStart={(e, m) => this.setState({ cursor: [ m.x, m.y ], clicked: false })}
onMoveEnd={(e, m) => {
// click on desktop
if (Math.abs(m.x - this.state.cursor[0]) < 1 && Math.abs(m.y - this.state.cursor[1]) < 1)
this.setState({ clicked: true })
}}
onTouchStart={
// click on touch screens
isMobile || isIPad13 ? () => this.setState({ clicked: true }) : null
}
center={center}
minZoom={0.2}
maxZoom={5}
disableZooming={isMobile || isIPad13}
disablePanning={isMobile || isIPad13}
>
{![ str.WORLD_MAP, str.US_MAP ].includes(this.props.currentMap) && (
<Geographies
geography={`maps/${this.props.currentMap === str.US_MAP2
? 'USA'
: this.props.currentMap === str.HONGKONG_MAP ? 'CHN_1' : 'WORLD'}.json`}
onMouseEnter={() => {
if (!this.state.loaded) {
this.setState({ loaded: true })
this.props.tooltipRebuild()
}
}}
>
{({ geographies }) =>
geographies.map((geo) => {
let counts = 0
if (geo.properties.REGION != null) {
const region = getDataFromRegion(data, geo.properties.REGION.split('.'))
if (region && region[metric] && region[metric][date])
counts = region[metric][date]
}
const backgroundMap =
this.props.currentMap === str.US_MAP2
? str.US_MAP
: this.props.currentMap === str.HONGKONG_MAP
? str.CHINA_MAP1
: str.WORLD_MAP
const name = geo.properties[maps[backgroundMap].name_key[lang_map]]
const isCurrentCountryOrState =
backgroundMap === str.WORLD_MAP
? geo.properties.CHINESE_NAME === currentRegion[0]
: geo.properties.CHINESE_NAME === currentRegion[1]
if (isCurrentCountryOrState) return <div />
if (backgroundMap === str.US_MAP && currentRegion.length === 1) return <div />
return (
<Geography
className="map-geography"
key={geo.rsmKey}
geography={geo}
data-tip={`${name} <span class="plot-tooltip-bold">${counts}</span>`}
style={{
default: {
fill: darkMode ? 'var(--darker-grey)' : '#fff',
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2
},
hover: {
fill: `url("#background-lines") ${darkMode ? '#333' : '#ddd'}`,
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2,
cursor: counts > 0 ? 'pointer' : 'default'
},
pressed: {
fill: `url("#background-lines") ${darkMode ? '#333' : '#ddd'}`,
stroke: darkMode ? '#333' : '#ddd',
strokeWidth: 2,
cursor: counts > 0 ? 'pointer' : 'default'
}
}}
onClick={this.handleGeographyClick(geo.properties.REGION)}
/>
)
})}
</Geographies>
)}
<Geographies
geography={`maps/${currentMap.filename}`}
onMouseEnter={() => {
if (!this.state.loaded) {
this.setState({ loaded: true })
this.props.tooltipRebuild()
}
}}
>
{({ geographies }) =>
geographies.map((geo, i) => {
let counts = 0
if (geo.properties.REGION != null) {
const region = getDataFromRegion(data, geo.properties.REGION.split('.'))
if (region && region[metric] && region[metric][date])
counts = region[metric][date]
}
const name = geo.properties[currentMap.name_key[lang_map]]
let isCurrentRegion =
geo.properties[currentMap.name_key.zh] ===
currentRegion[currentRegion.length - 1]
if (currentMap.parent_key)
isCurrentRegion =
isCurrentRegion &&
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 2]
// highlight all cities in the province
let isParentRegion = false
if (currentMap.parent_key) {
isParentRegion =
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 1]
if (currentRegion.length >= 3)
isParentRegion =
isParentRegion ||
geo.properties[currentMap.parent_key] ===
currentRegion[currentRegion.length - 2]
if (
currentRegion.length === 1 ||
currentRegion[currentRegion.length - 1] === str.MAINLAND_CHINA_ZH
)
isParentRegion = true
isParentRegion = isParentRegion || isCurrentRegion
} else {
isParentRegion = true
}
const strokeColor =
counts === 0 ? greyStrokeColor : this.getStrokeColor(counts, isUsState)
// US map
if (this.props.currentMap === str.US_MAP2 && !isParentRegion) return <div />
return (
<Fragment key={`fragment-${geo.rsmKey}`}>
<Geography
key={geo.rsmKey}
className="map-geography"
geography={geo}
data-tip={`${name} <span class="plot-tooltip-bold">${counts}</span>`}
style={{
default: {
fill: isCurrentRegion
? `url("#highlightLines-${i}") ${greyStrokeColor}`
: counts > 0 ? colorScale(counts) : 'url("#lines")',
stroke: strokeColor,
strokeWidth: isCurrentRegion ? 1 : 0,
opacity: isParentRegion ? 1 : 0.2
},
hover: {
fill: `url("#highlightLines-${i}") ${greyStrokeColor}`,
strokeWidth: 1,
stroke: strokeColor,
cursor: counts > 0 ? 'pointer' : 'default'
},
pressed: {
fill: `url("#highlightLines-${i}") ${greyStrokeColor}`,
strokeWidth: 1,
stroke: strokeColor,
cursor: counts > 0 ? 'pointer' : 'default'
}
}}
onClick={this.handleGeographyClick(geo.properties.REGION)}
/>
<PatternLines
id={`highlightLines-${i}`}
height={6}
width={6}
stroke={strokeColor}
strokeWidth={1}
background={
counts !== 0 ? (
colorScale(counts)
) : darkMode ? (
'var(--darker-grey)'
) : (
'#fff'
)
}
orientation={[ 'diagonal' ]}
/>
</Fragment>
)
})}
</Geographies>
{this.props.currentMap === str.WORLD_MAP &&
this.state.showTransmissions &&
transmissions
.filter((trans) => parseDate(trans.date) <= parseDate(date))
.map((trans, i) => {
return (
<Line
keys={`transmission-${i}`}
from={coord[trans.from].split(',').map((c) => parseFloat(c))}
to={coord[trans.to].split(',').map((c) => parseFloat(c))}
stroke={darkMode ? 'rgba(222,73,104,0.9)' : 'rgba(222, 73, 104, 0.5)'}
strokeWidth={1}
strokeLinecap="round"
style={{
pointerEvents: 'none'
}}
/>
)
})}
{[ str.WORLD_MAP, str.CHINA_MAP1, str.CHINA_MAP2 ].includes(this.props.currentMap) && (
<Marker key={'wuhan'} coordinates={[ 114.2, 30.3 ]}>
<g
fill="none"
stroke="var(--primary-color-4)"
strokeWidth="2"
pointerEvents="none"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="3" />
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
</g>
</Marker>
)}
{(this.props.currentMap === str.WORLD_MAP || this.props.currentMap === str.JAPAN_MAP) && (
<Marker key={'diamond-princess'} coordinates={[ 139.6, 35.4 ]}>
<FaShip
size={this.props.currentMap === str.WORLD_MAP ? 18 : 36}
color={colorScale(cruiseCounts)}
className="map-ship"
data-tip={`${lang === 'zh'
? str.DIAMOND_PRINCESS_ZH
: cruiseData.ENGLISH} <span class="plot-tooltip-bold">${cruiseCounts}</span>`}
style={{
stroke: cruiseStrokeColor,
visibility: cruiseCounts > 0 ? 'visible' : 'hidden',
strokeWidth:
currentRegion[currentRegion.length - 1] === str.DIAMOND_PRINCESS_ZH ? 30 : 0
}}
onClick={() =>
this.props.regionToggle([ str.INTL_CONVEYANCE_ZH, str.DIAMOND_PRINCESS_ZH ])}
/>
</Marker>
)}
</ZoomableGroup>
</ComposableMap>
</Fragment>
)
}
