demarches-normaliennes/app/javascript/components/shared/mapbox/SwitchMapStyle.js

82 lines
1.6 KiB
JavaScript
Raw Normal View History

2020-07-29 15:27:08 +02:00
import React from 'react';
import PropTypes from 'prop-types';
2020-10-15 17:22:08 +02:00
import ortho from './styles/images/preview-ortho.png';
import vector from './styles/images/preview-vector.png';
2020-07-29 15:27:08 +02:00
const STYLES = {
ortho: {
title: 'Satellite',
preview: ortho,
color: '#fff'
},
vector: {
title: 'Vectoriel',
preview: vector,
color: '#000'
2020-07-30 17:10:26 +02:00
}
};
const IGN_STYLES = {
...STYLES,
2020-07-29 15:27:08 +02:00
ign: {
title: 'Carte IGN',
preview: vector,
color: '#000'
}
};
2020-07-30 17:10:26 +02:00
function getNextStyle(style, ign) {
const styles = Object.keys(ign ? IGN_STYLES : STYLES);
2020-07-29 15:27:08 +02:00
let index = styles.indexOf(style) + 1;
if (index === styles.length) {
return styles[0];
}
return styles[index];
}
2020-10-15 17:22:08 +02:00
function SwitchMapStyle({ style, setStyle, ign }) {
2020-07-30 17:10:26 +02:00
const nextStyle = getNextStyle(style, ign);
const { title, preview, color } = (ign ? IGN_STYLES : STYLES)[nextStyle];
2020-07-29 15:27:08 +02:00
const imgStyle = {
width: '100%',
height: '100%',
cursor: 'pointer'
};
const textStyle = {
position: 'relative',
bottom: '26px',
left: '4px',
color
};
return (
<div
className="style-switch"
style={{
position: 'absolute',
bottom: 0,
left: 0
}}
onClick={() => setStyle(nextStyle)}
>
<div className="switch-style mapboxgl-ctrl-swith-map-style">
<img alt={title} style={imgStyle} src={preview} />
<div className="text" style={textStyle}>
{title}
</div>
</div>
</div>
);
2020-10-15 17:22:08 +02:00
}
2020-07-29 15:27:08 +02:00
SwitchMapStyle.propTypes = {
style: PropTypes.string,
2020-07-30 17:10:26 +02:00
setStyle: PropTypes.func,
ign: PropTypes.bool
2020-07-29 15:27:08 +02:00
};
2020-10-15 17:22:08 +02:00
export default SwitchMapStyle;