react-map-gl#Popup JavaScript Examples
The following examples show how to use
react-map-gl#Popup.
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 circles-website with GNU Affero General Public License v3.0 | 6 votes |
|
_renderPopup() {
const { popupInfo } = this.state;
return (
popupInfo && (
<Popup
tipSize={5}
anchor="top"
longitude={popupInfo.longitude}
latitude={popupInfo.latitude}
closeOnClick={false}
onClose={() => this.setState({ popupInfo: null })}
>
<CityInfo info={popupInfo} />
</Popup>
)
);
}
Example #2
| Source File: MapPopup.jsx From covince with MIT License | 6 votes |
|
MapPopup = ({ value, format, precision = {}, lat, long, onClick, label }) => {
const formatValue = React.useMemo(() => format === 'percentage' ? formatPct : formatNumber, [format])
return (
<Popup
closeButton={false}
captureDrag={false}
latitude={lat}
longitude={long}
className='text-center text-current leading-none font-sans'
tipSize={8}
>
<div className='p-2' onClick={onClick}>
{ value.mean !== null &&
<p className='font-bold text-gray-700 dark:text-gray-200'>
{formatValue(value.mean, precision.mean)}
</p> }
<p className='text-sm dark:text-white'>
{label}
</p>
{ value && value.upper !== null && value.lower !== null &&
<p className='text-xs tracking-wide text-gray-700 dark:text-gray-200'>
{formatValue(value.lower, precision.range)} – {formatValue(value.upper, precision.range)}
</p> }
</div>
</Popup>
)
}
Example #3
| Source File: modal.js From shopping-cart-fe with MIT License | 4 votes |
|
Modal = ({ show, user, place }) => {
const [local, setLocal] = useState(
JSON.parse(localStorage.getItem("response")) || [50, 50]
)
const [selected, setSelected] = useState(false)
const [viewPort, setViewPort] = useState({
latitude: local.lat,
longitude: local.lng,
width: "30vw",
height: "20vh",
zoom: 12,
})
return (
<div
className="modal-wrapper"
style={{
transform: show ? "translateY(0vh)" : "translateY(-100vh)",
opacity: show ? "1" : "0",
}}
>
{place && (
<div className="modal-header">
<h3>
{user.businessName} | {user.address}, {user.city}{" "}
{user.state}, {user.zipcode}
</h3>
<p>Phone Number: {user.phone}</p>
<p>Working Hours: {user.hours}</p>
<p>Curb Hours: {user.curbHours}</p>
<a
href={`https://www.google.com/maps/search/?api=1&query=${place.geometry.location.lat},${place.geometry.location.lng}&query_place_id=${place.place_id}`}
>
Get Direction
</a>
</div>
)}
<div className="modal-body">
{place ? (
<div className="mapContainer">
<ReactMapGL
{...viewPort}
mapboxApiAccessToken={mapboxApiToken}
// mapStyle = "mapbox://styles/ariuka11/ckcgwlimk0ldc1iob71hc4s2h"
mapStyle="mapbox://styles/ariuka11/ckcgwq30x0a8k1ip68ajqruoo"
// mapStyle = "mapbox://styles/ariuka11/ckcb5g7ne3rbq1inu8kc7dqye"
onViewportChange={(viewPort) => {
setViewPort(viewPort)
}}
>
<Marker
latitude={place.geometry.location.lat}
longitude={place.geometry.location.lng}
offsetLeft={-20}
className="marker"
>
<button
onClick={(e) => {
e.preventDefault()
setSelected(true)
}}
>
<img src={location} alt="marker" />
</button>
</Marker>
{selected && (
<Popup
latitude={place.geometry.location.lat}
longitude={place.geometry.location.lng}
onClose={() => {
setSelected(false)
}}
>
<h3>{user.address},</h3>
<p style={{ fontSize: "1.5rem" }}>
{user.city} {user.state}, {user.zipcode}
</p>
</Popup>
)}
<div style={{ position: "absolute", right: 0 }}>
<NavigationControl />
</div>
<div style={{ position: "absolute", left: 0 }}>
<GeolocateControl
positionOptions={{ enableHighAccuracy: true }}
trackUserLocation={true}
/>
</div>
</ReactMapGL>
</div>
) : (
<div>No Map</div>
)}
</div>
</div>
)
}
Example #4
| Source File: Popup.js From covid-trials-dashboard with MIT License | 4 votes |
|
PopUpDisplay = ({ popupInfo, onClose }) => {
const [learnMoreOpen, setLearnMoreOpen] = useState(false)
const theme = useTheme()
const isPopupAndClicked = popupInfo && popupInfo.clickedLocation.lng
const handleClick = () => {
ReactGA.event({
category: 'volunteer',
action: 'How to volunteer clicked',
label: 'Popup button, how to volunteer',
})
setLearnMoreOpen(!learnMoreOpen)
}
useEffect(() => {
setLearnMoreOpen(false)
}, [isPopupAndClicked])
const { t } = useTranslation('mapPopup')
if (popupInfo) {
const {
clickedLocation,
phase,
preferredName,
registryLink,
acceptsHealthySubjects,
contact = [{}],
sponsors,
} = popupInfo
const participation = contact[0]
const sponsorNames = sponsors.map(sponsor => sponsor.sponsorName).join(', ')
const sponsorPlural =
sponsors.length > 1 ? t('sponsorPlural') : t('sponsorPlural')
const firstSponsor = sponsors[0] && sponsors[0].sponsorName
const StyledPopup = styled(Popup)`
.mapboxgl-popup-content {
padding: 0px;
user-select: text;
cursor: text;
}
.mapboxgl-popup-close-button {
color: ${theme.palette.text.primary};
font-size: ${theme.typography.fontSize};
}
.MuiPaper-root {
min-width: 10rem !important;
}
@media only screen and (max-width: 601px) {
.MuiPaper-root {
max-width: 15rem !important;
}
}
.MuiCardContent-root:last-child {
padding-bottom: 2px;
}
`
return (
<StyledPopup
tipSize={5}
anchor='top'
longitude={clickedLocation.lng}
latitude={clickedLocation.lat}
closeOnClick={false}
onClose={onClose}
>
<Card style={{ maxWidth: '26rem', minWidth: '20rem' }}>
{learnMoreOpen ? (
<>
<CardContent>
{participation.name && (
<DisplayField
alwaysShow
label={t('name')}
content={participation.name}
/>
)}
{participation.website && (
<DisplayField
label={t('website')}
alwaysShow
content={
<Link
onClick={() =>
ReactGA.event({
category: 'volunteer website',
action: 'Volunteer website link clicked',
label: `${participation.website} clicked`,
})
}
href={participation.website}
target='_blank'
rel='noopener noreferrer'
style={{
color: theme.palette.primary.main,
textDecoration: 'underline',
}}
>
{participation.website}
</Link>
}
/>
)}
{participation.email && (
<DisplayField
alwaysShow
label={t('email')}
content={
<DontBreakOutLink
onClick={() =>
ReactGA.event({
category: 'email link',
action: 'Volunteer email link clicked',
label: `${participation.email} clicked`,
})
}
href={`mailto:${participation.email}?subject=I am interested in volunteering for your clinical trial&body=Hello,%0d%0dI found your study on www.coviddash.org and I am interested in participating in your clinical trial for a COVID-19 vaccine. I am a healthy subject who has not had COVID-19 and is not experiencing COVID-19 symptoms. I am located in ((ENTER CITY)) and can be reached at this email. Please let me know the next steps for potentially being screened and enrolled in this study.`}
target='_blank'
rel='noopener noreferrer'
style={{
color: theme.palette.primary.main,
textDecoration: 'underline',
}}
>
{participation.email}
</DontBreakOutLink>
}
/>
)}
<DisplayField
label={t('phoneNumber')}
alwaysShow
content={participation.phone}
/>
{participation.notes && (
<DisplayField
label={t('notes')}
content={participation.notes}
alwaysShow
/>
)}
</CardContent>
<CardActions>
<Button onClick={handleClick} variant='contained'>
{t('backToDetails')}
</Button>
</CardActions>
</>
) : (
<CardContent>
<DisplayField
// alwaysShow
label={t('acceptsHealthyVolunteers')}
content={
acceptsHealthySubjects === 'Yes' ? (
<Box
color='success.main'
style={{ display: 'flex', alignItems: 'center' }}
>
<CheckCircleIcon style={{ paddingRight: '2px' }} />
{t('yes')}
</Box>
) : (
t('no')
)
}
/>
<DisplayField label={`${sponsorPlural}`} content={sponsorNames} />
<DisplayField
onlyMobile
label={t('trialSponsor')}
content={firstSponsor}
/>
<DisplayField label={t('product')} content={preferredName} />
<DividerWithMargin />
<DisplayField label={t('phase')} content={phase} alwaysShow />
{registryLink && (
<DisplayField
label={t('trialRegistryLinks')}
alwaysShow
content={
Array.isArray(registryLink) ? (
registryLink.map((link, index) => (
<Link
key={`${link}${index}`}
onClick={() =>
ReactGA.event({
category: 'Trial Registry Link',
action: 'Trial Registry link clicked',
label: `Trial Registry ${link} clicked`,
})
}
href={link}
target='_blank'
rel='noopener noreferrer'
style={{
color: theme.palette.primary.main,
textDecoration: 'underline',
marginRight: '5px',
}}
>
{index > 0 ? `Link ${index + 1}` : 'Link'}
</Link>
))
) : (
<Link
onClick={() =>
ReactGA.event({
category: 'Trial Registry Link',
action: 'Trial Registry link clicked',
label: `Trial Registry ${registryLink} clicked`,
})
}
href={registryLink}
target='_blank'
rel='noopener noreferrer'
style={{
color: theme.palette.primary.main,
textDecoration: 'underline',
}}
>
{t('clickHere')}
</Link>
)
}
/>
)}
<CardActions>
<Button
onClick={handleClick}
variant='contained'
color='secondary'
>
{t('howToVolunteer')}
</Button>
</CardActions>
</CardContent>
)}
</Card>
</StyledPopup>
)
}
return null
}
Example #5
| Source File: index.js From covid19-dashboard with MIT License | 4 votes |
|
MapContext = ({code, map, hidePopup, hideAttribution, disableClick, disableFitbound, isDROM}) => {
const {setSelectedLocation, isMobileDevice} = useContext(AppContext)
const MapType = map.type
const [hovered, setHovered] = useState(null)
const onHover = event => {
event.stopPropagation()
const feature = event.features && event.features[0]
const [longitude, latitude] = event.lngLat
let hoverInfo
if (feature) {
hoverInfo = {
longitude,
latitude,
feature
}
}
setHovered(hoverInfo)
}
const onClick = useCallback(event => {
event.stopPropagation()
const feature = event.features && event.features[0]
let selectedLocation = 'FRA'
if (feature) {
selectedLocation = map.onSelect ? map.onSelect(feature) : feature.properties.code
}
setSelectedLocation(selectedLocation)
setHovered(null)
}, [map, setSelectedLocation])
return (
<div className='map-container'>
<Map
code={disableFitbound ? 'FRA' : code}
interactiveLayerIds={map.interactiveLayersIds}
hideAttribution={hideAttribution}
onHover={isMobileDevice ? null : onHover}
onClick={disableClick ? null : onClick}
>
<MapType code={code} map={map} hovered={hovered} isDROM={isDROM} />
{hovered && !hidePopup && (
<Popup
longitude={hovered.longitude}
latitude={hovered.latitude}
closeButton={false}
closeOnClick={false}
onClose={() => setHovered(null)}
anchor='bottom-left'
>
<SumUp nom={hovered.feature.properties.nom}>
{map.hovered && map.hovered(hovered.feature)}
</SumUp>
</Popup>
)}
</Map>
<style jsx>{`
.map-container {
display: flex;
position: relative;
width: 100%;
height: 100%;
}
.control {
background-color: #000000aa;
color: #fff;
border-radius: 4px;
margin: 0;
}
`}</style>
</div>
)
}
