add icon colors

src/components/App.js

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import _ from "lodash";
 
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import createMuiTheme from "material-ui/styles/createMuiTheme";
@@ -16,7 +17,8 @@ export type AppProps = {
 
 export type AppState = {
   selectedControl: ?Control,
-  drawerOpened: boolean
+  drawerOpened: boolean,
+  mqttState: State
 };
 
 class App extends React.Component<AppProps & Classes, AppState> {
@@ -24,7 +26,8 @@ class App extends React.Component<AppProps & Classes, AppState> {
     super(props);
     this.state = {
       selectedControl: null,
-      drawerOpened: false
+      drawerOpened: false,
+      mqttState: _.map(props.topics, ({defaultValue}) => defaultValue)
     };
   }
 
@@ -68,6 +71,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
           layers={this.props.config.layers}
           controls={this.props.config.controls}
           onChangeControl={this.changeControl.bind(this)}
+          state={this.state.mqttState}
         />
       </div>
     );

src/components/ControlMap.js

@@ -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>