52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import { observer } from 'mobx-react'
|
|
|
|
import state from '../state.js'
|
|
import './TileLayerControl.css'
|
|
|
|
const RadioButton = ({ option, selected, fullName }) => {
|
|
return (
|
|
<label className={option === selected ? 'selected' : ''}>
|
|
<input
|
|
type="radio"
|
|
name="tileLayer"
|
|
value={option}
|
|
checked={option === selected}
|
|
onChange={() => {}}
|
|
/>
|
|
{fullName ? fullName : option}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
@observer
|
|
export class TileLayerControl extends React.Component {
|
|
render() {
|
|
return (
|
|
<>
|
|
<h3>Background Layer</h3>
|
|
<fieldset
|
|
className="radio-grp"
|
|
onChange={e => (state.tileLayer = e.target.value)}
|
|
>
|
|
<RadioButton
|
|
option="none"
|
|
selected={state.tileLayer}
|
|
fullName="None"
|
|
/>
|
|
<RadioButton
|
|
option="osmDE"
|
|
selected={state.tileLayer}
|
|
fullName="OpenStreetMap DE"
|
|
/>
|
|
<RadioButton
|
|
option="osmMapnik"
|
|
selected={state.tileLayer}
|
|
fullName="OpenStreetMap Mapnik"
|
|
/>
|
|
</fieldset>
|
|
</>
|
|
)
|
|
}
|
|
}
|