Skip to content

Commit 5723b28

Browse files
dev-chiefdev-chief
committed
edit api maps
1 parent 1f8f838 commit 5723b28

File tree

13 files changed

+258
-149
lines changed

13 files changed

+258
-149
lines changed

‎example/src/App.tsx‎

Lines changed: 160 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React, { useState, useCallback, useRef } from 'react';
2-
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
2+
import {
3+
StyleSheet,
4+
View,
5+
TouchableOpacity,
6+
Text,
7+
Image,
8+
Platform,
9+
} from 'react-native';
310
import MapView, { ILocationProps } from '../../src';
411
import { MarkerLocation } from './assets';
5-
import { Marker, Overlay, Polygon } from 'react-native-maps';
6-
12+
import { Marker, Polygon } from 'react-native-maps';
13+
import { TouchPoint } from '../../src/types';
714

815
export default function App() {
916
const mapRef = useRef<MapView>(null);
@@ -17,6 +24,8 @@ export default function App() {
1724

1825
const [isActiveDraw, setDrawMode] = useState<boolean>(false);
1926
const [isReady, setIsReady] = useState<boolean>(false);
27+
const [points, setPoints] = useState<TouchPoint[]>([]);
28+
2029
const [polygon, setPolygon] = useState<{
2130
polygons: ILocationProps[];
2231
lastLatLng: ILocationProps;
@@ -29,51 +38,54 @@ export default function App() {
2938
[]
3039
);
3140

41+
const handleRemovePolygon = useCallback(() => {
42+
setPolygon(initialPolygon.current);
43+
}, []);
44+
45+
const handleClear = useCallback(() => {
46+
setPolygon(initialPolygon.current);
47+
setPoints([]);
48+
}, []);
49+
3250
const handleIsDraw = useCallback(() => {
3351
if (!mapRef.current) return;
52+
if (!isActiveDraw) {
53+
zoomOut().then(handleClear);
54+
}
3455
setDrawMode((prevMode) => !prevMode);
35-
}, [mapRef]);
36-
37-
const handleCanvasDraw = useCallback(
38-
(locations) => {
39-
setPolygon(locations);
40-
handleIsDraw();
41-
},
42-
[handleIsDraw]
43-
);
44-
const handleRemovePolygon = useCallback(
45-
() => setPolygon(initialPolygon.current),
46-
[]
47-
);
48-
// const getCameraMap = () => Promise.resolve(mapRef.current.getCamera());
49-
50-
// const zoomCenterPolygon = (center: ILocationProps): boolean => {
51-
// if (!mapRef.current) return false;
52-
// getCameraMap().then((camera) => {
53-
// if (Platform.OS === 'ios') {
54-
// mapRef.current.animateCamera({
55-
// center: center,
56-
// altitude: camera.altitude / 2,
57-
// });
58-
// }
59-
// if (Platform.OS === 'android') {
60-
// mapRef.current.animateCamera({ center, zoom: camera.zoom + 1 });
61-
// }
62-
// });
63-
// return true;
64-
// };
65-
66-
// const zoomOut = async () => {
67-
// if (!ref.current) {
68-
// return;
69-
// }
70-
// const camera = await ref.current.getCamera();
71-
// if (Platform.OS === 'ios') {
72-
// ref.current.animateCamera({altitude: camera.altitude * 2});
73-
// } else {
74-
// ref.current.animateCamera({zoom: camera.zoom - 1});
75-
// }
76-
// };
56+
}, [handleClear, isActiveDraw]);
57+
58+
const handleCanvasDraw = useCallback((locations) => {
59+
zoomCenterPolygon(locations.centerLatLng).then(() => setPolygon(locations));
60+
setDrawMode((prevMode) => !prevMode);
61+
}, []);
62+
63+
const zoomCenterPolygon = async (center: ILocationProps) => {
64+
if (!mapRef.current) return;
65+
const camera = await mapRef.current.getCamera();
66+
if (Platform.OS === 'ios') {
67+
mapRef.current.animateCamera({
68+
center: center,
69+
altitude: camera.altitude / 1.3,
70+
});
71+
}
72+
if (Platform.OS === 'android') {
73+
mapRef.current.animateCamera({ center, zoom: camera.zoom + 1 });
74+
}
75+
};
76+
77+
const zoomOut = async () => {
78+
if (!mapRef.current) return false;
79+
80+
const camera = await mapRef.current.getCamera();
81+
if (Platform.OS === 'ios') {
82+
mapRef.current.animateCamera({ altitude: camera.altitude * 2 });
83+
}
84+
85+
if (Platform.OS === 'android') {
86+
mapRef.current.animateCamera({ zoom: camera.zoom - 1 });
87+
}
88+
};
7789

7890
const hasMarkerClose = polygon.centerLatLng && (
7991
<Marker onPress={handleRemovePolygon} coordinate={polygon.centerLatLng}>
@@ -88,23 +100,74 @@ export default function App() {
88100
coordinates={polygon.polygons}
89101
fillColor="rgba(0, 0, 0, 0.00)"
90102
strokeColor="rgba(0, 0, 0, 0.00)"
91-
strokeWidth={1}
103+
strokeWidth={0}
92104
/>
93105
),
94106
[polygon.polygons]
95107
);
96108

109+
const handleBlockText = useCallback(() => {
110+
return (
111+
<>
112+
<View style={styles.header}>
113+
<Text style={styles.title}>Draw mode preview</Text>
114+
</View>
115+
116+
<View style={styles.content}>
117+
<Text style={styles.title}>What is Lorem Ipsum?</Text>
118+
<Text style={styles.description} adjustsFontSizeToFit={true}>
119+
Lorem Ipsum has been the industry's standard dummy text ever since
120+
the 1500s, when an unknown printer took a galley of type and
121+
scrambled it to make a type specimen book.
122+
</Text>
123+
<View style={[styles.row, { justifyContent: 'space-between' }]}>
124+
<View style={styles.row}>
125+
<Image
126+
source={require('../src/assets/pencil.png')}
127+
resizeMode={'contain'}
128+
style={{ tintColor: 'white' }}
129+
/>
130+
<Text style={styles.name}>28 miles</Text>
131+
</View>
132+
133+
<View style={styles.row}>
134+
<Image
135+
source={require('../src/assets/pencil.png')}
136+
resizeMode={'contain'}
137+
style={{ tintColor: 'white' }}
138+
/>
139+
<Text style={styles.name}>4.5 h</Text>
140+
</View>
141+
142+
<View style={styles.row}>
143+
<Image
144+
source={require('../src/assets/pencil.png')}
145+
resizeMode={'contain'}
146+
style={{ tintColor: 'white' }}
147+
/>
148+
<Text style={styles.name}>hard</Text>
149+
</View>
150+
</View>
151+
</View>
152+
</>
153+
);
154+
}, []);
155+
97156
return (
98157
<View style={styles.container}>
99158
<MapView
100159
ref={mapRef}
101160
style={{ flex: 1 }}
102-
onStartDraw={handleRemovePolygon}
161+
points={points}
162+
colorLine={'tomato'}
103163
onEndDraw={handleCanvasDraw}
104164
isDrawMode={isActiveDraw}
105165
onMapReady={handleMapReady}
106-
colorWidthOverlayLine={'red'}
107-
renderContentGesture={() => <Text>test</Text>}
166+
onStartDraw={handleClear}
167+
onChangePoints={setPoints}
168+
widthLine={3}
169+
backgroundCanvas={'rgba(25, 0, 64, 0.62)'}
170+
renderContentGesture={handleBlockText}
108171
>
109172
{isReady && polygon.polygons && polygon.polygons.length > 0 && (
110173
<>
@@ -114,11 +177,21 @@ export default function App() {
114177
)}
115178
</MapView>
116179

117-
{!isActiveDraw ? (
118-
<TouchableOpacity style={styles.button} onPress={handleIsDraw}>
119-
<Text>{'start'}</Text>
120-
</TouchableOpacity>
121-
) : null}
180+
<TouchableOpacity style={styles.button} onPress={handleIsDraw}>
181+
{isActiveDraw ? (
182+
<Image
183+
source={require('../src/assets/close.png')}
184+
resizeMode={'contain'}
185+
style={{ tintColor: 'white' }}
186+
/>
187+
) : (
188+
<Image
189+
source={require('../src/assets/pencil.png')}
190+
resizeMode={'contain'}
191+
style={{ tintColor: 'white' }}
192+
/>
193+
)}
194+
</TouchableOpacity>
122195
</View>
123196
);
124197
}
@@ -128,12 +201,42 @@ const styles = StyleSheet.create({
128201
flex: 1,
129202
},
130203
button: {
131-
bottom: '10%',
204+
top: '10%',
132205
right: '10%',
133206
position: 'absolute',
134207
padding: 16,
135208
zIndex: 4,
136-
backgroundColor: 'yellow',
137-
borderRadius: 24
209+
borderRadius: 18,
210+
},
211+
content: {
212+
paddingHorizontal: 18,
213+
position: 'absolute',
214+
bottom: 70,
215+
},
216+
header: {
217+
paddingHorizontal: 18,
218+
position: 'absolute',
219+
top: 70,
220+
width: '100%',
221+
alignItems: 'center',
222+
},
223+
title: {
224+
color: '#FFFFFF',
225+
fontSize: 20,
226+
marginBottom: 14,
227+
},
228+
description: {
229+
color: '#DDDDDD',
230+
fontSize: 14,
231+
marginBottom: 28,
232+
},
233+
name: {
234+
color: '#DDDDDD',
235+
fontSize: 14,
236+
},
237+
row: {
238+
flexDirection: 'row',
239+
justifyContent: 'space-between',
240+
alignItems: 'center',
138241
},
139242
});

‎example/src/assets/close.png‎

282 Bytes
Loading

‎example/src/assets/gps-marker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ C294.521,137.087,269.469,112.035,238.556,112z M238.556,208c-22.091,0-40-17.909-4
2121
C278.53,190.08,260.636,207.974,238.556,208z'/>
2222
</svg>`;
2323

24-
return <SvgXml xml={svgMarkup} width={100} height={100} />;
24+
return <SvgXml xml={svgMarkup} width={24} height={24} />;
2525
};
2626

2727
export default GpsLocation;

‎example/src/assets/pencil.png‎

576 Bytes
Loading

‎src/canvas/canvas.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { ICanvasProps } from './types';
44
import React, { FC } from 'react';
55

66
const Canvas: FC<ICanvasProps> = ({
7-
points,
7+
path,
88
colorLine,
99
fillColorCanvas,
1010
widthLine,
@@ -15,7 +15,7 @@ const Canvas: FC<ICanvasProps> = ({
1515
<Polyline
1616
fill={fillColorCanvas}
1717
stroke={colorLine}
18-
points={points}
18+
points={path}
1919
strokeWidth={widthLine}
2020
/>
2121
</Svg>

‎src/canvas/types.d.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export interface ICanvasProps {
2-
points: string;
1+
import { IPathProps } from '../types';
2+
3+
export interface ICanvasProps extends IPathProps {
34
colorLine?: string;
45
widthLine?: number;
56
fillColorCanvas?: string;

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export { default } from './maps';
33
export type { ILocationProps, IMapProps, IGestureCoordinates } from './maps';
44
export type { IGestureProps } from './gesture';
55
export type { ICanvasProps } from './canvas';
6+
export type { IPolygonProps } from './polygon';

0 commit comments

Comments
 (0)