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

Now with layers

Browse source
This commit is contained in:
uwap 2017-11-01 05:54:03 +01:00
parent 30ad70a237
commit 2d79cc68aa
3 changed files with 38 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

13
config/rzl.js
View file

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

44
src/map.js
View file

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

3
types/types.js
View file

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