react-icons/fa#FaMapMarkerAlt JavaScript Examples
The following examples show how to use
react-icons/fa#FaMapMarkerAlt.
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: SearchLocationPopup.js From airdnd-frontend with MIT License | 6 votes |
|
SearchLocationPopup = forwardRef(
({ type, changeType, searchData, locationResult, changeSearchData }, ref) => {
const { location } = searchData;
return (
<StSearchLocationPopupWrapper>
<StSearchLocationPopup
popupState={location && locationResult.length && type === 'location'}
>
<StSearchLocationList ref={ref}>
{locationResult.map((item, index) => {
return (
<StSearchLocationItem
key={index}
onClick={() => {
changeSearchData('location', item);
changeType('checkIn');
}}
>
<StSearchLocationIconWrapper>
<FaMapMarkerAlt></FaMapMarkerAlt>
</StSearchLocationIconWrapper>
<StItemText>{item}</StItemText>
</StSearchLocationItem>
);
})}
</StSearchLocationList>
</StSearchLocationPopup>
</StSearchLocationPopupWrapper>
);
},
)
Example #2
| Source File: location.js From gatsby-theme-intro with MIT License | 6 votes |
|
Location = ({ location, relocation }) => (
<>
<div className="inline-flex items-center bg-front mt-6 w-auto">
<span className="text-lead border-r-2 border-back px-3">
<FaMapMarkerAlt className="h-4 w-4" />
</span>
<span className="text-back font-header font-bold py-1 px-3 text-lg">
{location}
</span>
</div>
{relocation && (
<div className="text-xs uppercase mt-2 font-semibold text-front font-header">
Available for relocation
</div>
)}
</>
)
Example #3
| Source File: MapButton.js From airdnd-frontend with MIT License | 5 votes |
|
MapMarkerButton = () => {
return (
<StButton boxShadow margin="1rem 0 0">
<FaMapMarkerAlt />
</StButton>
);
}
Example #4
| Source File: ViewContact.js From ReactJS-Projects with MIT License | 5 votes |
|
ViewContact = () => {
const { state } = useContext(ContactContext);
const { contact } = state;
return (
<Container>
<Row className="mt-5 mb-5">
<Col md="5" className="offset-md-3">
<Card className="pt-3 pb-5">
<CardBody className="text-center ">
<img
height="150"
width="150"
className="cardImg profile border-danger"
src={contact?.picture}
/>
<CardTitle className="text-primary mt-3">
<h1>{contact?.name}</h1>
</CardTitle>
<CardSubtitle>
<h3>
<FaPhone className="mr-2" />
{contact?.phoneNumber}
</h3>
</CardSubtitle>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`mailto:{contact?.email}`}
>
<FaEnvelope className="icon mr-2" />
{contact?.email}
</a>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`https://maps.google.com/?=${contact?.address}`}
>
<FaMapMarkerAlt className="icon mr-2" />
{contact?.address}
</a>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
Example #5
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
MapAndAttachments = ({ form, data }) => {
const { attachments } = data.technology;
const imgsRef = useRef(null);
const pdfRef = useRef(null);
const [whereIsAlreadyImplemented, setWhereIsAlreadyImplemented] = useState([]);
const [whereIsAlreadyImplementedInput, setWhereIsAlreadyImplementedInput] = useState('');
const [whoDevelop, setWhoDevelop] = useState([]);
const [whoDevelopInput, setWhoDevelopInput] = useState('');
const [previewedImgFiles, setPreviewedImgFiles] = useState(attachments.images);
const [previewedPdfFiles, setPreviewedPdfFiles] = useState(attachments.documents);
const [uploadError, setUploadError] = useState(false);
const [videos, setVideos] = useState(data.technology.videos || []);
const { control } = form;
useEffect(() => {
const whereIsAlreadyImplementedParsed = parseLocationsFromApi(
technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
data.technology?.locations,
);
setWhereIsAlreadyImplemented(whereIsAlreadyImplementedParsed);
const whoDevelopParsed = parseLocationsFromApi(
technologyLocationsEnum.WHO_DEVELOP,
data.technology?.locations,
);
setWhoDevelop(whoDevelopParsed);
}, []);
useEffect(() => {
whoDevelop.forEach((element, index) => {
form.setValue(`locations.who_develop.${index}`, element.id);
});
}, [whoDevelop]);
useEffect(() => {
whereIsAlreadyImplemented.forEach((element, index) => {
form.setValue(`locations.where_is_already_implemented.${index}`, element.id);
});
}, [whereIsAlreadyImplemented]);
useEffect(() => {
form.setValue('videos', JSON.stringify(videos));
}, [videos]);
const onAddVideos = (link) => {
if (!link || link === '') {
form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
return;
}
const videoId = getYoutubeVideoId(link);
if (videoId) {
form.clearErrors('link_video');
const alreadyExists = videos.some((video) => video?.videoId === videoId);
if (!alreadyExists) {
setVideos((prevState) => [
{
thumbnail: `http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg`,
link,
videoId,
provider: 'Youtube',
},
...prevState,
]);
form.setValue('link_video', '');
} else {
form.setError('link_video', {
type: 'manual',
message: 'O vídeo já foi adicionado',
});
}
} else {
form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
}
};
const onRemoveVideos = (index) => setVideos(videos.filter((video, idx) => idx !== index));
// eslint-disable-next-line consistent-return
const onDropAttachments = async (acceptedFiles, type) => {
if (!acceptedFiles) return null;
const formData = new FormData();
for (let index = 0; index < acceptedFiles.length; index += 1) {
formData.append(`files[${index}]`, acceptedFiles[index], acceptedFiles[index].name);
}
formData.append(
'meta',
JSON.stringify({
object: 'technologies',
object_id: form.getValues('id'),
}),
);
try {
const response = await upload(formData);
if (response.status === 200) {
if (type === 'img') {
const newValue = [...previewedImgFiles, ...response.data];
setPreviewedImgFiles(newValue);
}
if (type === 'pdf') {
const newValue = [...previewedPdfFiles, ...response.data];
setPreviewedPdfFiles(newValue);
}
} else {
setUploadError(response.data.error.message[0].message);
}
} catch (error) {
setUploadError(
'Ocorreu um error ao fazer o upload, verifique se você seguiu as instruções corretamente, checando o tipo de arquivo e o tamanho dele',
);
}
};
const deleteAttachment = async ({ index, element, type }) => {
await deleteUpload(element.id);
if (type === 'img') {
setPreviewedImgFiles(
previewedImgFiles.filter((media, innerIndex) => index !== innerIndex),
);
}
if (type === 'pdf') {
setPreviewedPdfFiles(
previewedPdfFiles.filter((pdf, innerIndex) => index !== innerIndex),
);
}
};
const deleteFromCollection = async (index, collection) => {
if (collection === 'whoDevelop') {
setWhoDevelop((prevState) => prevState.filter((_, innerIndex) => index !== innerIndex));
return;
}
if (collection === 'whereIsAlreadyImplemented') {
setWhereIsAlreadyImplemented((prevState) =>
prevState.filter((_, innerIndex) => index !== innerIndex),
);
}
};
const onSelect = async ({ properties, locationType }) => {
const state =
locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED
? whereIsAlreadyImplemented
: whoDevelop;
const toBePushed = properties;
if (state.some((element) => element.placeId === toBePushed.placeId)) {
return;
}
const response = await geocodeByPlaceId(toBePushed.placeId);
if (response) {
toBePushed.location = {
lat: response[0].geometry.location.lat(),
lng: response[0].geometry.location.lng(),
};
}
const createResponse = await createLocation({
place_id: toBePushed.placeId,
address: toBePushed.description,
lat: toBePushed.location?.lat?.toString(),
lng: toBePushed.location?.lng?.toString(),
});
if (createResponse.error) {
toast.error(
createResponse.messages?.[0]?.message ||
'Ocorreu um erro para salvar sua localização, tente novamente em instantes.',
);
return;
}
const newState = [
...state,
{ ...toBePushed, locationType, id: createResponse.location.id },
];
if (locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED) {
setWhereIsAlreadyImplemented(newState);
setWhereIsAlreadyImplementedInput('');
} else {
setWhoDevelop(newState);
setWhoDevelopInput('');
}
};
return (
<Wrapper>
<HelpModal show={!!uploadError} onHide={() => setUploadError(false)}>
{uploadError}
</HelpModal>
<Row>
<Column>
<Row>
<Column>
<Title>Onde a Tecnologia é desenvolvida?</Title>
</Column>
</Row>
<Row>
<Column>
<PlacesAutocomplete
id="who_develop"
name="who_develop"
value={whoDevelopInput}
onChange={(value) => setWhoDevelopInput(value)}
onSelect={(_, __, properties) =>
onSelect({
properties,
locationType: technologyLocationsEnum.WHO_DEVELOP,
})
}
>
{({
getInputProps,
suggestions,
getSuggestionItemProps,
loading,
}) => (
<div>
<InputField
{...getInputProps({
placeholder: 'Procurar instituições e empresas...',
className: 'location-search-input',
})}
form={{ register: () => {} }}
/>
<div className="autocomplete-dropdown-container">
{loading && (
<GoogleAddressSugestions>
Carregando...
</GoogleAddressSugestions>
)}
<GoogleAddressSugestions>
{suggestions.map((suggestion) => {
const style = suggestion.active
? {
backgroundColor: '#fafafa',
}
: {
backgroundColor: '#fff',
};
return (
<div
key={suggestion.placeId}
{...getSuggestionItemProps(suggestion, {
style,
})}
>
<Suggestion>
{suggestion.description}
</Suggestion>
</div>
);
})}
</GoogleAddressSugestions>
</div>
</div>
)}
</PlacesAutocomplete>
</Column>
</Row>
<Row>
<Column>
{whoDevelop.map((element, index) => {
return (
<IconRow row>
<IconLink>
<FaMapMarkerAlt size="2rem" /> {element.description}
</IconLink>
<CircularButton
variant="remove"
height="2"
width="2"
onClick={() =>
deleteFromCollection(index, 'whoDevelop')
}
>
<FaTrash size="1em" />
</CircularButton>
<InputHiddenField
form={form}
type="hidden"
name={`locations.who_develop.${index}`}
/>
</IconRow>
);
})}
</Column>
</Row>
<Row>
<Column>
<Title>Onde a Tecnologia pode ser aplicada?</Title>
</Column>
</Row>
<Row>
<Column>
<SelectField
form={form}
id="where_can_be_applied"
label="Região"
name="terms.where_can_be_applied"
placeholder="Escolha uma região"
validation={{ required: true }}
options={[
{
value: 'semiarido',
label: 'Semiárido',
},
]}
/>
</Column>
</Row>
<Row>
<Column>
<Title>Onde a Tecnologia já está implantada?</Title>
</Column>
</Row>
<Row>
<Column>
<PlacesAutocomplete
id="where_is_already_implemented"
name="where_is_already_implemented"
value={whereIsAlreadyImplementedInput}
onChange={(value) => setWhereIsAlreadyImplementedInput(value)}
onSelect={(_, __, properties) =>
onSelect({
properties,
locationType:
technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
})
}
>
{({
getInputProps,
suggestions,
getSuggestionItemProps,
loading,
}) => (
<div>
<InputField
{...getInputProps({
placeholder: 'Procurar localidades...',
className: 'location-search-input',
})}
form={{ register: () => {} }}
/>
<div className="autocomplete-dropdown-container">
{loading && (
<GoogleAddressSugestions>
Carregando...
</GoogleAddressSugestions>
)}
<GoogleAddressSugestions>
{suggestions.map((suggestion) => {
const style = suggestion.active
? {
backgroundColor: '#fafafa',
}
: {
backgroundColor: '#fff',
};
return (
<div
{...getSuggestionItemProps(suggestion, {
style,
})}
key={suggestion.placeId}
>
<Suggestion>
{suggestion.description}
</Suggestion>
</div>
);
})}
</GoogleAddressSugestions>
</div>
</div>
)}
</PlacesAutocomplete>
</Column>
</Row>
<Row>
<Column>
{whereIsAlreadyImplemented.map((element, index) => {
return (
<IconRow row>
<IconLink>
<FaMapMarkerAlt size="2rem" /> {element.description}
</IconLink>
<CircularButton
variant="remove"
height="2"
width="2"
onClick={() =>
deleteFromCollection(
index,
'whereIsAlreadyImplemented',
)
}
>
<FaTrash size="1em" />
</CircularButton>
<InputHiddenField
form={form}
type="hidden"
name={`locations.where_is_already_implemented.${index}`}
/>
</IconRow>
);
})}
</Column>
</Row>
</Column>
<Column>
<Title>Fotos da tecnologia</Title>
<Dropzone
accept="image/*"
onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'img')}
ref={imgsRef}
>
{({ getRootProps, getInputProps }) => (
<UploadBox {...getRootProps()}>
<input {...getInputProps()} />
<SvgBox>
<IconBox>
<FaFileUpload size="5rem" />
<IconTextBox>
<Div>Upload</Div>
<Div>1280px x 720px</Div>
</IconTextBox>
</IconBox>
</SvgBox>
</UploadBox>
)}
</Dropzone>
<UploadedImages data-cy="uploaded-images">
<Controller
render={({ field }) => (
<ImagesPreview
{...field}
previewedImgFiles={previewedImgFiles}
deleteAttachment={deleteAttachment}
/>
)}
name="thumbnail_id"
control={control}
/>
</UploadedImages>
<Title>Videos da tecnologia</Title>
<VideoContainer>
<InputVideoWrapper>
<InputField
form={form}
type="url"
name="link_video"
placeholder="Link do Youtube"
/>
<InputHiddenField form={form} type="hidden" name="videos" />
<ButtonVideoAdd
type="button"
variant="secondary"
onClick={() => onAddVideos(form.getValues('link_video'))}
>
Adicionar
</ButtonVideoAdd>
</InputVideoWrapper>
{videos?.length ? (
<VideosWrapper>
{videos.map((video, idx) => (
<VideoItem key={`video_${video.videoId}`}>
<a
href={`//www.youtube.com/watch?v=${video.videoId}`}
target="_blank"
rel="noreferrer"
>
<img
src={video.thumbnail}
alt={`Youtube vídeo ${video.videoId}`}
/>
</a>
<RemoveVideoButton
type="button"
onClick={() => onRemoveVideos(idx)}
>
Remover
</RemoveVideoButton>
</VideoItem>
))}
</VideosWrapper>
) : (
<EmptyVideos>
<p>Nenhum vídeo adicionado</p>
</EmptyVideos>
)}
</VideoContainer>
<Title>Documentos</Title>
<Dropzone
accept=".pdf"
onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'pdf')}
ref={pdfRef}
>
{({ getRootProps, getInputProps }) => (
<UploadBox {...getRootProps()}>
<input {...getInputProps()} />
<SvgBox>
<IconBox>
<FaFileUpload size="5rem" />
<IconTextBox>
<Div>Upload</Div>
<Div>.PDF</Div>
</IconTextBox>
</IconBox>
</SvgBox>
</UploadBox>
)}
</Dropzone>
<UploadedDocuments>
{previewedPdfFiles?.map((element, index) => {
return (
<IconRow row>
<IconLink href={element.url}>
<FaFilePdf size="2rem" /> {element.filename}
</IconLink>
<CircularButton
variant="remove"
height="2"
width="2"
onClick={() =>
deleteAttachment({
index,
element,
type: 'pdf',
})
}
>
<FaTrash size="1em" />
</CircularButton>
</IconRow>
);
})}
</UploadedDocuments>
</Column>
</Row>
</Wrapper>
);
}
