uwap/mqtt-control-map
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add icon colors

Browse source
This commit is contained in:
uwap 2017-11-07 20:33:07 +01:00
parent b84cc6d4a2
commit 82081e7c83
5 changed files with 46 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/ControlMap.js
View file

@ -15,7 +15,8 @@ export type ControlMapProps = {
zoom: number,
layers: Array<Layer>,
controls: Controls,
onChangeControl: (control: Control) => void
onChangeControl: (control: Control) => void,
state: State
};
export default class ControlMap extends React.Component<ControlMapProps> {
@ -45,19 +46,28 @@ export default class ControlMap extends React.Component<ControlMapProps> {
return _.map(this.props.controls, this.renderMarker.bind(this));
}
createLeafletIcon(icon: string) {
createLeafletIcon(control: Control) {
const iconClass = parseIconName(`${control.icon} 36px`);
return Leaflet.divIcon({
className: parseIconName(`${icon} 36px`),
iconSize: Leaflet.point(36, 36),
iconAnchor: Leaflet.point(18, 18)
iconAnchor: Leaflet.point(18, 18),
html: `<i class="${iconClass}"
style="line-height: 1; color: ${this.iconColor(control)}"></i>`
});
}
iconColor(control: Control) {
if (control.iconColor == null) {
return "#000";
}
return control.iconColor(this.props.state);
}
renderMarker(control: Control, key: string) {
return (
<Marker position={convertPoint(control.position)}
key={key}
icon={this.createLeafletIcon(control.icon)}
icon={this.createLeafletIcon(control)}
onClick={() => this.props.onChangeControl(control)}
>
</Marker>