Skip to content

Commit 1f8f838

Browse files
dev-chiefdev-chief
committed
add project draw maps
1 parent eeaba36 commit 1f8f838

26 files changed

+570
-191
lines changed

‎.editorconfig‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎.yarnrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2021 Aliaksei Petrusevich
3+
Copyright (c) 2020 Aliaksei Petrusevich
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3+
plugins: ['react-native-reanimated/plugin'],
34
};

‎example/babel.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ module.exports = function (api) {
55
api.cache(true);
66

77
return {
8-
presets: ['babel-preset-expo', '@babel/typescript'],
9-
8+
presets: ['babel-preset-expo'],
109
plugins: [
1110
[
1211
'module-resolver',

‎example/src/App.tsx‎

Lines changed: 124 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,124 @@
1-
import * as React from 'react';
1+
import React, { useState, useCallback, useRef } from 'react';
2+
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
3+
import MapView, { ILocationProps } from '../../src';
4+
import { MarkerLocation } from './assets';
5+
import { Marker, Overlay, Polygon } from 'react-native-maps';
26

3-
import { StyleSheet, View, Text } from 'react-native';
4-
import Map from 'react-native-maps-draw';
57

68
export default function App() {
9+
const mapRef = useRef<MapView>(null);
10+
11+
const initialPolygon = useRef({
12+
polygons: [],
13+
lastLatLng: undefined,
14+
initialLatLng: undefined,
15+
centerLatLng: undefined,
16+
});
17+
18+
const [isActiveDraw, setDrawMode] = useState<boolean>(false);
19+
const [isReady, setIsReady] = useState<boolean>(false);
20+
const [polygon, setPolygon] = useState<{
21+
polygons: ILocationProps[];
22+
lastLatLng: ILocationProps;
23+
initialLatLng: ILocationProps;
24+
centerLatLng: ILocationProps;
25+
}>(initialPolygon.current);
26+
27+
const handleMapReady = useCallback(
28+
() => mapRef.current && setIsReady(true),
29+
[]
30+
);
31+
32+
const handleIsDraw = useCallback(() => {
33+
if (!mapRef.current) return;
34+
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+
// };
77+
78+
const hasMarkerClose = polygon.centerLatLng && (
79+
<Marker onPress={handleRemovePolygon} coordinate={polygon.centerLatLng}>
80+
<MarkerLocation />
81+
</Marker>
82+
);
83+
84+
const handlePolygon = useCallback(
85+
(item, index) => (
86+
<Polygon
87+
key={index}
88+
coordinates={polygon.polygons}
89+
fillColor="rgba(0, 0, 0, 0.00)"
90+
strokeColor="rgba(0, 0, 0, 0.00)"
91+
strokeWidth={1}
92+
/>
93+
),
94+
[polygon.polygons]
95+
);
96+
797
return (
898
<View style={styles.container}>
9-
<Map style={{ flex: 1 }} />
10-
<Text>3</Text>
99+
<MapView
100+
ref={mapRef}
101+
style={{ flex: 1 }}
102+
onStartDraw={handleRemovePolygon}
103+
onEndDraw={handleCanvasDraw}
104+
isDrawMode={isActiveDraw}
105+
onMapReady={handleMapReady}
106+
colorWidthOverlayLine={'red'}
107+
renderContentGesture={() => <Text>test</Text>}
108+
>
109+
{isReady && polygon.polygons && polygon.polygons.length > 0 && (
110+
<>
111+
{hasMarkerClose}
112+
{polygon.polygons.map(handlePolygon)}
113+
</>
114+
)}
115+
</MapView>
116+
117+
{!isActiveDraw ? (
118+
<TouchableOpacity style={styles.button} onPress={handleIsDraw}>
119+
<Text>{'start'}</Text>
120+
</TouchableOpacity>
121+
) : null}
11122
</View>
12123
);
13124
}
@@ -16,9 +127,13 @@ const styles = StyleSheet.create({
16127
container: {
17128
flex: 1,
18129
},
19-
box: {
20-
width: 60,
21-
height: 60,
22-
marginVertical: 20,
130+
button: {
131+
bottom: '10%',
132+
right: '10%',
133+
position: 'absolute',
134+
padding: 16,
135+
zIndex: 4,
136+
backgroundColor: 'yellow',
137+
borderRadius: 24
23138
},
24139
});

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { SvgXml } from 'react-native-svg';
3+
4+
const GpsLocation = () => {
5+
const svgMarkup = `
6+
<svg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 477.112 477.112' style='enable-background:new 0 0 477.112 477.112;' xml:space='preserve'>
7+
<linearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-28.319' y1='557.986' x2='-28.319' y2='618.787' gradientTransform='matrix(8 0 0 -8 465.108 4941)'>
8+
<stop offset='0' style='stop-color:#006DF0'/>
9+
<stop offset='1' style='stop-color:#00E7F0'/>
10+
</linearGradient>
11+
<path style='fill:url(#SVGID_1_);' d='M238.556,0c-92.74,0.106-167.894,75.26-168,168c0,90.056,155.064,292.32,161.664,300.88
12+
l6.336,8.232l6.336-8.232c6.6-8.56,161.664-210.824,161.664-300.88C406.45,75.26,331.296,0.106,238.556,0z M238.556,450.728
13+
c-29.528-39.528-152-207.896-152-282.728c0-83.947,68.053-152,152-152s152,68.053,152,152
14+
C390.556,242.816,268.084,411.2,238.556,450.728z'/>
15+
<linearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-28.319' y1='558.035' x2='-28.319' y2='618.838' gradientTransform='matrix(8 0 0 -8 465.108 4941)'>
16+
<stop offset='0' style='stop-color:#006DF0'/>
17+
<stop offset='1' style='stop-color:#00E7F0'/>
18+
</linearGradient>
19+
<path style='fill:url(#SVGID_2_);' d='M238.556,112c-30.928,0-56,25.072-56,56s25.072,56,56,56s56-25.072,56-56
20+
C294.521,137.087,269.469,112.035,238.556,112z M238.556,208c-22.091,0-40-17.909-40-40s17.909-40,40-40s40,17.909,40,40
21+
C278.53,190.08,260.636,207.974,238.556,208z'/>
22+
</svg>`;
23+
24+
return <SvgXml xml={svgMarkup} width={100} height={100} />;
25+
};
26+
27+
export default GpsLocation;

‎example/src/assets/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as MarkerLocation } from './gps-marker';

‎example/tsconfig.json‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,4 @@
11
{
2-
"compilerOptions": {
3-
"allowJs": true,
4-
"allowSyntheticDefaultImports": true,
5-
"esModuleInterop": true,
6-
"isolatedModules": true,
7-
"jsx": "react",
8-
"lib": [
9-
"es6"
10-
],
11-
"moduleResolution": "node",
12-
"noEmit": true,
13-
"strict": true,
14-
"target": "esnext"
15-
},
16-
"exclude": [
17-
"node_modules",
18-
"babel.config.js",
19-
"metro.config.js",
20-
"jest.config.js"
21-
],
2+
"compilerOptions": {},
223
"extends": "expo/tsconfig.base"
234
}

‎package.json‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-maps-draw",
33
"version": "0.1.0",
4-
"description": "this maps draw package",
4+
"description": "this draw",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",
77
"types": "lib/typescript/index.d.ts",
@@ -25,8 +25,7 @@
2525
"test": "jest",
2626
"typescript": "tsc --noEmit",
2727
"lint": "eslint \"**/*.{js,ts,tsx}\"",
28-
"prepare": "bob build && yarn copy-dts",
29-
"copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript",
28+
"prepare": "bob build",
3029
"release": "release-it",
3130
"example": "yarn --cwd example",
3231
"pods": "cd example && pod-install --quiet",
@@ -51,11 +50,9 @@
5150
"@commitlint/config-conventional": "^11.0.0",
5251
"@react-native-community/eslint-config": "^2.0.0",
5352
"@release-it/conventional-changelog": "^2.0.0",
54-
"@types/jest": "^26.0.23",
55-
"@types/node": "^15.12.1",
56-
"@types/react": "^17.0.9",
57-
"@types/react-native": "^0.64.10",
58-
"@types/react-test-renderer": "^17.0.1",
53+
"@types/jest": "^26.0.0",
54+
"@types/react": "^16.9.19",
55+
"@types/react-native": "0.62.13",
5956
"commitlint": "^11.0.0",
6057
"eslint": "^7.2.0",
6158
"eslint-config-prettier": "^7.0.0",
@@ -66,8 +63,9 @@
6663
"prettier": "^2.0.5",
6764
"react": "16.13.1",
6865
"react-native": "0.63.4",
66+
"react-native-builder-bob": "^0.18.0",
6967
"release-it": "^14.2.2",
70-
"typescript": "^4.3.2"
68+
"typescript": "4.3.2"
7169
},
7270
"peerDependencies": {
7371
"react": "*",
@@ -138,20 +136,24 @@
138136
"trailingComma": "es5",
139137
"useTabs": false
140138
},
141-
"@react-native-community/bob": {
139+
"react-native-builder-bob": {
142140
"source": "src",
143141
"output": "lib",
144142
"targets": [
145143
"commonjs",
146144
"module",
147-
"typescript"
145+
[
146+
"typescript",
147+
{
148+
"project": "tsconfig.build.json"
149+
}
150+
]
148151
]
149152
},
150153
"dependencies": {
151-
"@react-native-community/bob": "^0.17.1",
152-
"react-native-gesture-handler": "^1.10.3",
154+
"geolib": "^3.3.1",
153155
"react-native-maps": "^0.28.0",
154-
"react-native-reanimated": "^2.2.0",
156+
"react-native-reanimated": "2.1.0",
155157
"react-native-svg": "^12.1.1"
156158
}
157159
}

0 commit comments

Comments
 (0)