Skip to content

Commit f3489f1

Browse files
github-actions[bot]github-actions[bot]
committed
Update docs from maps rnmapbox/maps@24edfeb 
1 parent c0167b2 commit f3489f1

File tree

1 file changed

+166
-125
lines changed

1 file changed

+166
-125
lines changed

‎docs/examples/V10/CameraAnimation.md

Lines changed: 166 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@ Camera animation modes
1010

1111

1212
```jsx
13-
import { Divider, Text } from '@rneui/base';
13+
import { CheckBox, Divider, Slider, Text } from '@rneui/base';
1414
import {
1515
Camera,
1616
CameraAnimationMode,
1717
CameraBounds,
18-
CameraPadding,
1918
CircleLayer,
2019
Logger,
2120
MapView,
@@ -48,80 +47,48 @@ const initialCoordinate: Coordinate = {
4847
longitude: -73.984638,
4948
};
5049

51-
const zeroPadding: CameraPadding = {
52-
paddingTop: 0,
53-
paddingBottom: 0,
54-
paddingLeft: 0,
55-
paddingRight: 0,
56-
};
57-
const evenPadding: CameraPadding = {
58-
paddingTop: 40,
59-
paddingBottom: 40,
60-
paddingLeft: 40,
61-
paddingRight: 40,
62-
};
63-
const minZoomLevel = 8;
64-
const maxZoomLevel = 16;
65-
66-
const randPadding = (): CameraPadding => {
67-
const randNum = () => {
68-
const items = [0, 150, 300];
69-
return items[Math.floor(Math.random() * items.length)];
70-
};
71-
72-
return {
73-
paddingTop: randNum(),
74-
paddingBottom: randNum(),
75-
paddingLeft: randNum(),
76-
paddingRight: randNum(),
77-
};
78-
};
79-
8050
const toPosition = (coordinate: Coordinate): Position => {
8151
return [coordinate.longitude, coordinate.latitude];
8252
};
8353

54+
const rand = () => Math.random() * 0.008;
55+
8456
const CameraAnimation = () => {
85-
const [animationMode, setAnimationMode] =
86-
useState<CameraAnimationMode>('moveTo');
57+
const [easing, setEasing] = useState<CameraAnimationMode>('easeTo');
8758
const [coordinates, setCoordinates] = useState<Coordinate[]>([
8859
initialCoordinate,
8960
]);
90-
const [padding, setPadding] = useState<CameraPadding>(zeroPadding);
91-
92-
const paddingDisplay = useMemo(() => {
93-
return `L ${padding.paddingLeft} | R ${padding.paddingRight} | T ${padding.paddingTop} | B ${padding.paddingBottom}`;
94-
}, [padding]);
95-
96-
const move = useCallback(
97-
(_animationMode: CameraAnimationMode, shouldCreateMultiple: boolean) => {
98-
setAnimationMode(_animationMode);
99-
100-
if (shouldCreateMultiple) {
101-
const _centerCoordinate = {
102-
latitude: initialCoordinate.latitude + Math.random() * 0.2,
103-
longitude: initialCoordinate.longitude + Math.random() * 0.2,
104-
};
105-
const _coordinates = Array(10)
106-
.fill(0)
107-
.map((_) => {
108-
return {
109-
latitude: _centerCoordinate.latitude + Math.random() * 0.2,
110-
longitude: _centerCoordinate.longitude + Math.random() * 0.2,
111-
};
112-
});
113-
setCoordinates(_coordinates);
114-
} else {
115-
setCoordinates([
116-
{
117-
latitude: initialCoordinate.latitude + Math.random() * 0.2,
118-
longitude: initialCoordinate.longitude + Math.random() * 0.2,
119-
},
120-
]);
121-
}
122-
},
123-
[],
124-
);
61+
const [paddingLeft, setPaddingLeft] = useState(0);
62+
const [paddingRight, setPaddingRight] = useState(0);
63+
const [paddingTop, setPaddingTop] = useState(0);
64+
const [paddingBottom, setPaddingBottom] = useState(0);
65+
const [minZoom, setMinZoom] = useState<number | undefined>(undefined);
66+
const [maxZoom, setMaxZoom] = useState<number | undefined>(undefined);
67+
68+
const move = useCallback((kind: 'center' | 'bounds') => {
69+
if (kind === 'bounds') {
70+
const _centerCoordinate = {
71+
latitude: initialCoordinate.latitude + rand(),
72+
longitude: initialCoordinate.longitude + rand(),
73+
};
74+
const _coordinates = Array(10)
75+
.fill(0)
76+
.map((_) => {
77+
return {
78+
latitude: _centerCoordinate.latitude + rand(),
79+
longitude: _centerCoordinate.longitude + rand(),
80+
};
81+
});
82+
setCoordinates(_coordinates);
83+
} else if (kind === 'center') {
84+
setCoordinates([
85+
{
86+
latitude: initialCoordinate.latitude + rand(),
87+
longitude: initialCoordinate.longitude + rand(),
88+
},
89+
]);
90+
}
91+
}, []);
12592

12693
const features = useMemo((): Feature<Point>[] => {
12794
return coordinates.map((p) => {
@@ -164,31 +131,118 @@ const CameraAnimation = () => {
164131
}
165132
}, [coordinates]);
166133

167-
const locationDisplay = useMemo(() => {
168-
if (coordinates.length > 1) {
169-
const ne = centerOrBounds.bounds?.ne.map((n) => n.toFixed(3));
170-
const sw = centerOrBounds.bounds?.sw.map((n) => n.toFixed(3));
171-
return `ne ${ne} | sw ${sw}`;
172-
} else if (coordinates.length === 1) {
173-
const lon = coordinates[0].longitude.toFixed(4);
174-
const lat = coordinates[0].latitude.toFixed(4);
175-
return `lon ${lon} | lat ${lat}`;
176-
} else {
177-
throw new Error('invalid location passed');
178-
}
179-
}, [coordinates, centerOrBounds]);
134+
const easingCheckBox = useCallback(
135+
(value: CameraAnimationMode, label: string) => {
136+
const isChecked = value === easing;
137+
return (
138+
<View
139+
style={{
140+
flex: 0,
141+
flexDirection: 'row',
142+
alignItems: 'center',
143+
}}
144+
>
145+
<CheckBox
146+
checked={isChecked}
147+
center={true}
148+
onIconPress={() => setEasing(value)}
149+
containerStyle={{
150+
backgroundColor: 'transparent',
151+
marginRight: -4,
152+
}}
153+
/>
154+
<Text
155+
style={{
156+
flex: 0,
157+
color: isChecked ? colors.primary.blue : undefined,
158+
}}
159+
>
160+
{label}
161+
</Text>
162+
</View>
163+
);
164+
},
165+
[easing],
166+
);
167+
168+
const paddingCounter = useCallback(
169+
(value: number, setValue: (value: number) => void, label: string) => {
170+
return (
171+
<View style={{ flex: 1, paddingHorizontal: 10 }}>
172+
<View style={{ flex: 0, alignItems: 'center' }}>
173+
<Text>{label}</Text>
174+
<Text style={{ fontWeight: 'bold' }}>{`${Math.round(value)}`}</Text>
175+
</View>
176+
<Slider
177+
thumbStyle={{
178+
backgroundColor: 'black',
179+
width: 15,
180+
height: 15,
181+
}}
182+
value={value}
183+
minimumValue={0}
184+
maximumValue={500}
185+
onSlidingComplete={(_value) => setValue(_value)}
186+
/>
187+
</View>
188+
);
189+
},
190+
[],
191+
);
192+
193+
const zoomLimitCounter = useCallback(
194+
(
195+
value: number | undefined,
196+
setValue: (value?: number) => void,
197+
label: string,
198+
) => {
199+
return (
200+
<View style={{ flex: 1, paddingHorizontal: 10 }}>
201+
<View style={{ flex: 0, alignItems: 'center' }}>
202+
<Text>{label}</Text>
203+
<Text style={{ fontWeight: 'bold' }}>{`${
204+
value ?? 'Not set'
205+
}`}</Text>
206+
</View>
207+
<Slider
208+
thumbStyle={{
209+
backgroundColor: 'black',
210+
width: 15,
211+
height: 15,
212+
}}
213+
value={value}
214+
minimumValue={-1}
215+
maximumValue={20}
216+
onSlidingComplete={(_value) => {
217+
if (_value < 0) {
218+
setValue(undefined);
219+
} else {
220+
setValue(Math.round(_value));
221+
}
222+
}}
223+
/>
224+
</View>
225+
);
226+
},
227+
[],
228+
);
180229
181230
return (
182231
<>
183232
<MapView style={styles.map}>
184233
<Camera
185234
{...centerOrBounds}
186235
zoomLevel={12}
187-
minZoomLevel={minZoomLevel}
188-
maxZoomLevel={maxZoomLevel}
189-
padding={padding}
236+
minZoomLevel={minZoom}
237+
maxZoomLevel={maxZoom}
238+
padding={{
239+
paddingTop,
240+
paddingBottom,
241+
paddingLeft,
242+
paddingRight,
243+
}}
190244
animationDuration={800}
191-
animationMode={animationMode}
245+
animationMode={easing}
192246
/>
193247
194248
{features.map((feature) => {
@@ -204,53 +258,39 @@ const CameraAnimation = () => {
204258
<SafeAreaView>
205259
<View style={styles.sheet}>
206260
<View style={styles.content}>
207-
<Text style={styles.fadedText}>centerCoordinate</Text>
261+
<Text style={styles.sectionText}>Coordinate</Text>
208262
<View style={styles.buttonRow}>
209-
<Button title="Flight" onPress={() => move('flyTo', false)} />
210-
<Button title="Ease" onPress={() => move('easeTo', false)} />
211-
<Button title="Linear" onPress={() => move('linearTo', false)} />
212-
<Button title="Instant" onPress={() => move('moveTo', false)} />
263+
<Button title="Center" onPress={() => move('center')} />
264+
<Button title="Bounds" onPress={() => move('bounds')} />
213265
</View>
214266
215267
<Divider style={styles.divider} />
216268
217-
<Text style={styles.fadedText}>bounds</Text>
218-
<View style={styles.buttonRow}>
219-
<Button title="Flight" onPress={() => move('flyTo', true)} />
220-
<Button title="Ease" onPress={() => move('easeTo', true)} />
221-
<Button title="Linear" onPress={() => move('linearTo', true)} />
222-
<Button title="Instant" onPress={() => move('moveTo', true)} />
269+
<Text style={styles.sectionText}>Easing</Text>
270+
<View style={[styles.buttonRow, { marginBottom: -6 }]}>
271+
{easingCheckBox('easeTo', 'Ease')}
272+
{easingCheckBox('linearTo', 'Linear')}
273+
{easingCheckBox('flyTo', 'Fly')}
274+
{easingCheckBox('moveTo', 'Move')}
223275
</View>
224276
225277
<Divider style={styles.divider} />
226278
227-
<Text style={styles.fadedText}>padding</Text>
228-
<View style={styles.buttonRow}>
229-
<Button
230-
title="Zero"
231-
onPress={() => {
232-
setPadding(zeroPadding);
233-
}}
234-
/>
235-
<Button
236-
title="Even"
237-
onPress={() => {
238-
setPadding(evenPadding);
239-
}}
240-
/>
241-
<Button
242-
title="Random"
243-
onPress={() => {
244-
setPadding(randPadding());
245-
}}
246-
/>
279+
<Text style={styles.sectionText}>Padding</Text>
280+
<View style={[styles.buttonRow, { marginTop: 6 }]}>
281+
{paddingCounter(paddingTop, setPaddingTop, 'Top')}
282+
{paddingCounter(paddingBottom, setPaddingBottom, 'Bottom')}
283+
{paddingCounter(paddingLeft, setPaddingLeft, 'Left')}
284+
{paddingCounter(paddingRight, setPaddingRight, 'Right')}
247285
</View>
248286
249287
<Divider style={styles.divider} />
250288
251-
<Text style={styles.fadedText}>info</Text>
252-
<Text>position: {locationDisplay}</Text>
253-
<Text>padding: {paddingDisplay}</Text>
289+
<Text style={styles.sectionText}>Zoom limits</Text>
290+
<View style={[styles.buttonRow, { marginTop: 6 }]}>
291+
{zoomLimitCounter(minZoom, setMinZoom, 'Min')}
292+
{zoomLimitCounter(maxZoom, setMaxZoom, 'Max')}
293+
</View>
254294
</View>
255295
</View>
256296
</SafeAreaView>
@@ -263,22 +303,23 @@ const styles = StyleSheet.create({
263303
flex: 1,
264304
},
265305
sheet: {
266-
paddingTop: 10,
267306
paddingHorizontal: 10,
307+
marginBottom: -10,
268308
},
269309
content: {
270310
padding: 10,
271311
},
312+
sectionText: {
313+
fontSize: 10,
314+
color: 'gray',
315+
},
272316
buttonRow: {
273317
flex: 0,
274318
flexDirection: 'row',
275-
justifyContent: 'space-around',
319+
justifyContent: 'space-evenly',
276320
},
277321
divider: {
278-
marginVertical: 10,
279-
},
280-
fadedText: {
281-
color: 'gray',
322+
marginVertical: 8,
282323
},
283324
});
284325

0 commit comments

Comments
 (0)