1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import * as React from 'react';
import { Component, Types, View } from 'reactxp';
import SvgMap from './SvgMap';
export enum ZoomLevel {
high,
medium,
low,
}
export enum MarkerStyle {
secure,
unsecure,
}
interface IProps {
center: [number, number]; // longitude, latitude
offset: [number, number]; // offset [x, y] from the center of the map
zoomLevel: ZoomLevel;
showMarker: boolean;
markerStyle: MarkerStyle;
style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
}
interface IState {
bounds: {
width: number;
height: number;
};
}
export default class Map extends Component<IProps, IState> {
public state: IState = {
bounds: {
width: 0,
height: 0,
},
};
public render() {
const { width, height } = this.state.bounds;
const readyToRenderTheMap = width > 0 && height > 0;
return (
<View style={this.props.style} onLayout={this.onLayout}>
{readyToRenderTheMap && (
<SvgMap
width={width}
height={height}
center={this.props.center}
offset={this.props.offset}
zoomLevel={this.zoomLevel(this.props.zoomLevel)}
showMarker={this.props.showMarker}
markerImagePath={this.markerImage(this.props.markerStyle)}
/>
)}
</View>
);
}
public shouldComponentUpdate(nextProps: IProps, nextState: IState) {
const oldProps = this.props;
const oldState = this.state;
return (
oldProps.center[0] !== nextProps.center[0] ||
oldProps.center[1] !== nextProps.center[1] ||
oldProps.offset[0] !== nextProps.offset[0] ||
oldProps.offset[1] !== nextProps.offset[1] ||
oldProps.zoomLevel !== nextProps.zoomLevel ||
oldProps.showMarker !== nextProps.showMarker ||
oldProps.markerStyle !== nextProps.markerStyle ||
oldState.bounds.width !== nextState.bounds.width ||
oldState.bounds.height !== nextState.bounds.height
);
}
private onLayout = (layoutInfo: Types.ViewOnLayoutEvent) => {
this.setState({
bounds: {
width: layoutInfo.width,
height: layoutInfo.height,
},
});
};
// TODO: Remove zoom level in favor of center + coordinate span
private zoomLevel(variant: ZoomLevel) {
switch (variant) {
case ZoomLevel.high:
return 1;
case ZoomLevel.medium:
return 20;
case ZoomLevel.low:
return 40;
}
}
private markerImage(style: MarkerStyle): string {
switch (style) {
case MarkerStyle.secure:
return '../../assets/images/location-marker-secure.svg';
case MarkerStyle.unsecure:
return '../../assets/images/location-marker-unsecure.svg';
}
}
}
|
