From d72ae8d6d3dea9e66ddcdedc33dc26fa7f8d05f1 Mon Sep 17 00:00:00 2001 From: Hayata Suenaga Date: Wed, 16 Aug 2023 11:57:50 -0700 Subject: [PATCH 1/2] feat: add directionStyle prop --- src/MapView/Direction.tsx | 7 ++++--- src/MapView/Direction.web.tsx | 5 +++-- src/MapView/MapView.tsx | 9 +++++++-- src/MapView/MapViewTypes.ts | 14 ++++++++++++++ 4 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/MapView/Direction.tsx b/src/MapView/Direction.tsx index 5ba9e63..f6f6795 100644 --- a/src/MapView/Direction.tsx +++ b/src/MapView/Direction.tsx @@ -1,6 +1,7 @@ import Mapbox from '@rnmapbox/maps'; +import {DirectionProps} from './MapViewTypes'; -function Direction({coordinates}: {coordinates: Array<[number, number]>}) { +function Direction({coordinates, directionStyle}: DirectionProps) { if (coordinates.length < 1) { return null; } @@ -20,8 +21,8 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) { diff --git a/src/MapView/Direction.web.tsx b/src/MapView/Direction.web.tsx index ac43c6a..cf5fb21 100644 --- a/src/MapView/Direction.web.tsx +++ b/src/MapView/Direction.web.tsx @@ -1,7 +1,8 @@ import {Layer, Source} from 'react-map-gl'; import {View} from 'react-native'; +import {DirectionProps} from './MapViewTypes'; -function Direction({coordinates}: {coordinates: Array<[number, number]>}) { +function Direction({coordinates, directionStyle}: DirectionProps) { if (coordinates.length < 1) { return null; } @@ -25,7 +26,7 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) { type="line" source="route" layout={{'line-join': 'round', 'line-cap': 'round'}} - paint={{'line-color': '#888', 'line-width': 4}} + paint={{'line-color': directionStyle?.color ?? '#000000', 'line-width': directionStyle?.width ?? 1}} /> )} diff --git a/src/MapView/MapView.tsx b/src/MapView/MapView.tsx index 6405a06..602c1ff 100644 --- a/src/MapView/MapView.tsx +++ b/src/MapView/MapView.tsx @@ -6,7 +6,7 @@ import Direction from './Direction'; import Utils from './utils'; const MapView = forwardRef(function MapView( - {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates}, + {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates, directionStyle}, ref, ) { const cameraRef = useRef(null); @@ -72,7 +72,12 @@ const MapView = forwardRef(function MapView( ))} - {directionCoordinates && } + {directionCoordinates && ( + + )} ); diff --git a/src/MapView/MapViewTypes.ts b/src/MapView/MapViewTypes.ts index 23b363f..21c6b9d 100644 --- a/src/MapView/MapViewTypes.ts +++ b/src/MapView/MapViewTypes.ts @@ -23,6 +23,20 @@ export type MapViewProps = { markerComponent?: ComponentType; // List of coordinates which together forms a direction. directionCoordinates?: Array<[number, number]>; + // Style used for the line that displays direction + directionStyle?: DirectionStyle; +}; + +export type DirectionProps = { + // Coordinates of points that constitute the direction + coordinates: Array<[number, number]>; + // Style used for the line that displays direction + directionStyle?: DirectionStyle; +}; + +type DirectionStyle = { + width?: number; + color?: string; }; export type MapViewHandle = { From fd545d6a3980b9da13acec4e7652f607a65d3a09 Mon Sep 17 00:00:00 2001 From: Hayata Suenaga Date: Wed, 16 Aug 2023 12:38:14 -0700 Subject: [PATCH 2/2] feat: allow different component for waypoints --- src/MapView/MapView.tsx | 17 ++++++++--------- src/MapView/MapView.web.tsx | 20 ++++++++------------ src/MapView/MapViewTypes.ts | 23 ++++++++++++++++------- 3 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/MapView/MapView.tsx b/src/MapView/MapView.tsx index 602c1ff..e4bfefa 100644 --- a/src/MapView/MapView.tsx +++ b/src/MapView/MapView.tsx @@ -6,7 +6,7 @@ import Direction from './Direction'; import Utils from './utils'; const MapView = forwardRef(function MapView( - {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates, directionStyle}, + {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle}, ref, ) { const cameraRef = useRef(null); @@ -17,12 +17,12 @@ const MapView = forwardRef(function MapView( } if (waypoints.length === 1) { - cameraRef.current?.flyTo(waypoints[0]); + cameraRef.current?.flyTo(waypoints[0].coordinate); cameraRef.current?.zoomTo(15); return undefined; } - const {southWest, northEast} = Utils.getBounds(waypoints); + const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate)); return { ne: northEast, sw: southWest, @@ -61,13 +61,12 @@ const MapView = forwardRef(function MapView( }} bounds={bounds} /> - {MarkerComponent && - waypoints && - waypoints.map((waypoint) => ( + {waypoints && + waypoints.map(({coordinate, markerComponent: MarkerComponent}) => ( diff --git a/src/MapView/MapView.web.tsx b/src/MapView/MapView.web.tsx index 92632d3..83053fe 100644 --- a/src/MapView/MapView.web.tsx +++ b/src/MapView/MapView.web.tsx @@ -17,10 +17,7 @@ const getMapDimension = (mapRef: RefObject): {width: number; height: num return {width: clientWidth, height: clientHeight}; }; -const MapView = forwardRef(function MapView( - {accessToken, waypoints, style, mapPadding, markerComponent: MarkerComponent, directionCoordinates, initialState = DEFAULT_INITIAL_STATE}, - ref, -) { +const MapView = forwardRef(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, initialState = DEFAULT_INITIAL_STATE}, ref) { const mapRef = useRef(null); const [bounds, setBounds] = useState<{ longitude: number; @@ -35,13 +32,13 @@ const MapView = forwardRef(function MapView( if (waypoints.length === 1) { mapRef.current?.flyTo({ - center: waypoints[0], + center: waypoints[0].coordinate, zoom: 15, }); return; } - const {northEast, southWest} = Utils.getBounds(waypoints); + const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate)); const {width, height} = getMapDimension(mapRef) || { width: 0, height: 0, @@ -80,13 +77,12 @@ const MapView = forwardRef(function MapView( mapStyle="mapbox://styles/mapbox/streets-v9" {...bounds} > - {MarkerComponent && - waypoints && - waypoints.map((waypoint) => ( + {waypoints && + waypoints.map(({coordinate, markerComponent: MarkerComponent}) => ( diff --git a/src/MapView/MapViewTypes.ts b/src/MapView/MapViewTypes.ts index 21c6b9d..8111c9a 100644 --- a/src/MapView/MapViewTypes.ts +++ b/src/MapView/MapViewTypes.ts @@ -13,14 +13,9 @@ export type MapViewProps = { // Padding to apply when the map is adjusted to fit waypoints and directions mapPadding?: number; // Initial coordinate and zoom level - initialState?: { - location: [number, number]; - zoom: number; - }; + initialState?: InitialState; // Locations on which to put markers - waypoints?: Array<[number, number]>; - // React component to use for the marker. If not provided, markers are not displayed for waypoints. - markerComponent?: ComponentType; + waypoints?: WayPoint[]; // List of coordinates which together forms a direction. directionCoordinates?: Array<[number, number]>; // Style used for the line that displays direction @@ -34,6 +29,20 @@ export type DirectionProps = { directionStyle?: DirectionStyle; }; +// Initial state of the map +type InitialState = { + // Coordinate on which to center the map + location: [number, number]; + zoom: number; +}; + +// Waypoint to be displayed on the map +type WayPoint = { + coordinate: [number, number]; + markerComponent: ComponentType; +}; + +// Style used for the line that displays direction type DirectionStyle = { width?: number; color?: string;