64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { CircleMarker, Popup } from 'react-leaflet';
|
|
import theme from '../style/theme';
|
|
import { spacedataElementStruct } from '../redux/modules/spacedata';
|
|
|
|
|
|
const markerColor = (spacedata) => {
|
|
switch (spacedata.state?.open) {
|
|
case true:
|
|
return theme.palette.secondary.light;
|
|
case false:
|
|
return theme.palette.error.light;
|
|
default:
|
|
return theme.palette.primary.main;
|
|
}
|
|
};
|
|
const Marker = (props) => {
|
|
// change color based on space status
|
|
const color = markerColor(props.spacedata);
|
|
// const color = props.highlight ? theme.palette.secondary.light :
|
|
|
|
const style = {
|
|
container: {
|
|
display: 'flex',
|
|
},
|
|
logo: {
|
|
width: '50px',
|
|
marginRight: '5px',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<CircleMarker
|
|
fillColor={color}
|
|
color={color}
|
|
radius={5}
|
|
center={[props.spacedata.location.lat, props.spacedata.location.lon]}
|
|
>
|
|
<Popup
|
|
onOpen={() => props.toggleFilterSpacedata(props.spacedata.space)}
|
|
onClose={() => props.toggleFilterSpacedata(props.spacedata.space)}
|
|
>
|
|
<div style={style.container}>
|
|
<div>
|
|
{props.spacedata.space}
|
|
<br />
|
|
<a href={props.spacedata.url}>
|
|
{props.spacedata.url}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
</CircleMarker>
|
|
);
|
|
};
|
|
|
|
Marker.propTypes = {
|
|
spacedata: spacedataElementStruct.isRequired,
|
|
highlight: PropTypes.bool.isRequired,
|
|
toggleFilterSpacedata: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default Marker;
|