Now with layers

config/rzl.js

@@ -348,18 +348,19 @@ const config : Config = {
   layers: [
     {
       image: "img/layers/rzl/rooms.png",
-      forceVisibility: "on",
-      name: "RaumZeitLabor"
+      baseLayer: true,
+      name: "RaumZeitLabor",
+      defaultVisibility: "visible"
     },
     {
       image: "img/layers/rzl/details.png",
-      forceVisibility: "on",
-      name: "Details"
+      name: "Details",
+      defaultVisibility: "visible"
     },
     {
       image: "img/layers/rzl/labels.png",
-      forceVisibility: "on",
-      name: "Labels"
+      name: "Labels",
+      defaultVisibility: "visible"
     }
   ]
 };

src/map.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { Map, ImageOverlay, Marker, Popup } from "react-leaflet";
+import { Map, ImageOverlay, Marker, Popup, LayersControl } from "react-leaflet";
 import Leaflet from "leaflet";
 import R from "ramda";
 import Config from "./config";
@@ -37,21 +37,35 @@ const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
   </Marker>
 ), R.propOr({}, "controls", Config)));
 
-const Layer = (layer: Layer, bounds: Array<Array<number>>) => (
-  <ImageOverlay url={layer.image} bounds={bounds} />
-);
+class SpaceMap extends React.Component<{state: State, width: number, height: number,
+    zoom: number, image: string}> {
 
-const visibleLayers = (state: State) => R.filter(
-  x => (x.forceVisibility == null && R.contains(state.visibleLayers, x.image))
-      || x.forceVisibility == "on", Config.layers)
+  constructor(props) {
+    super(props);
+  }
 
-const SpaceMap = (props: { state: State, width: number, height: number,
-    zoom: number, image: string}) => (
-  <Map center={c([props.width / 2, props.height / 2])} zoom={props.zoom}
-      crs={Leaflet.CRS.Simple}>
-    {R.map(x => Layer(x, [c([0,0]), c([props.width, props.height])]), visibleLayers(props.state))}
-    {Markers(props)}
-  </Map>
-);
+  render() {
+    const props = this.props;
+    return (
+      <Map center={c([props.width / 2, props.height / 2])} zoom={props.zoom}
+          crs={Leaflet.CRS.Simple}> 
+        {Markers(props)}
+        <LayersControl position='topright'>
+          {Config.layers.map(x => this.renderLayer(x, [c([0,0]), c([props.width, props.height])]))}
+        </LayersControl>
+      </Map>
+    );
+  }
+
+  renderLayer(layer, bounds) {
+    const LayersControlType = layer.baseLayer ? LayersControl.BaseLayer : LayersControl.Overlay;
+    return (
+      <LayersControlType name={layer.name}
+            checked={layer.defaultVisibility == "visible"}>
+        <ImageOverlay url={layer.image} bounds={bounds} />
+      </LayersControlType>
+    );
+  }
+}
 
 export default SpaceMap;

types/types.js

@@ -63,7 +63,8 @@ declare type State = {
 declare type Layer = {
   image: string,
   name: string,
-  forceVisibility?: "on"|"off"
+  baseLayer: boolean,
+  defaultVisibility: "visible" | "hidden",
 };
 
 declare type StateAction = {