diff --git a/packages/examples/package.json b/packages/examples/package.json index 40caa82ed..c640b6320 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -16,6 +16,8 @@ "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/native": "^6.1.8", "@react-navigation/stack": "^6.3.25", + "@rneui/base": "^4.0.0-rc.8", + "@rneui/themed": "^4.0.0-rc.8", "@turf/along": "^6.5.0", "@turf/bbox-polygon": "^6.5.0", "@turf/distance": "^6.5.0", @@ -26,10 +28,8 @@ "debounce": "^2.0.0", "fbjs": "^3.0.5", "moment": "^2.30.1", - "prop-types": "^15.7.2", "react": "18.2.0", "react-native": "0.74.5", - "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", diff --git a/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx b/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx new file mode 100755 index 000000000..113aadf37 --- /dev/null +++ b/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx @@ -0,0 +1,112 @@ +import MapLibreGL, { LineLayerStyle } from "@maplibre/maplibre-react-native"; +import { Feature, LineString, Point } from "geojson"; +import React, { useEffect, useState } from "react"; + +import sheet from "../../styles/sheet"; +import RouteSimulator from "../../utils/RouteSimulator"; +import Page from "../common/Page"; +import PulseCircleLayer from "../common/PulseCircleLayer"; + +const ROUTE_FEATURE: Feature = { + type: "Feature", + geometry: { + type: "LineString", + coordinates: [ + [8.070566386917108, 53.295365558646694], + [13.37432488261203, 52.50503393836857], + [7.218077210609579, 50.98270036522064], + [13.652081261390094, 49.583747114745165], + [8.1694637345079, 47.9516814815924], + ], + }, + properties: {}, +}; + +const layerStyles: { + route: LineLayerStyle; + progress: LineLayerStyle; +} = { + route: { + lineColor: "white", + lineCap: "round", + lineWidth: 3, + lineOpacity: 0.84, + }, + progress: { + lineColor: "#314ccd", + lineWidth: 3, + }, +}; + +export default function AnimateCircleAlongLine() { + const [currentPoint, setCurrentPoint] = + useState>(); + + useEffect(() => { + const routeSimulator = new RouteSimulator(ROUTE_FEATURE); + + routeSimulator.addListener( + (point: Feature) => { + setCurrentPoint(point); + }, + ); + + routeSimulator.start(); + + return () => { + routeSimulator.stop(); + }; + }, []); + + const renderProgressLine = () => { + if (!currentPoint) { + return null; + } + + const { nearestIndex } = currentPoint.properties; + const coords = ROUTE_FEATURE.geometry.coordinates.filter( + (c, i) => i <= nearestIndex, + ); + coords.push(currentPoint.geometry.coordinates); + + if (coords.length < 2) { + return null; + } + + const lineString: LineString = { type: "LineString", coordinates: coords }; + + return ( + + {/* @ts-ignore */} + + + ); + }; + + return ( + + + + + + + + + {currentPoint && } + + {renderProgressLine()} + + + ); +} diff --git a/packages/examples/src/examples/Animations/DriveTheLine.js b/packages/examples/src/examples/Animations/DriveTheLine.js deleted file mode 100755 index f8486cb42..000000000 --- a/packages/examples/src/examples/Animations/DriveTheLine.js +++ /dev/null @@ -1,221 +0,0 @@ -import React from 'react'; -import MapLibreGL from '@maplibre/maplibre-react-native'; -import {View, StyleSheet} from 'react-native'; -import {Button} from 'react-native-elements'; -import {lineString as makeLineString} from '@turf/helpers'; -import {point} from '@turf/helpers'; - -import RouteSimulator from '../../utils/RouteSimulator'; -import sheet from '../../styles/sheet'; -import {SF_OFFICE_COORDINATE} from '../../utils'; -import Page from '../common/Page'; -import PulseCircleLayer from '../common/PulseCircleLayer'; - -const SF_ZOO_COORDINATE = [-122.505412, 37.737463]; - -const styles = StyleSheet.create({ - button: { - backgroundColor: 'blue', - borderRadius: 3, - }, - buttonCnt: { - backgroundColor: 'transparent', - bottom: 16, - flexDirection: 'row', - justifyContent: 'space-around', - left: 0, - position: 'absolute', - right: 0, - }, -}); - -const layerStyles = { - origin: { - circleRadius: 5, - circleColor: 'white', - }, - destination: { - circleRadius: 5, - circleColor: 'white', - }, - route: { - lineColor: 'white', - lineCap: MapLibreGL.LineJoin.Round, - lineWidth: 3, - lineOpacity: 0.84, - }, - progress: { - lineColor: '#314ccd', - lineWidth: 3, - }, -}; - -class DriveTheLine extends React.Component { - constructor(props) { - super(props); - - this.state = { - route: null, - currentPoint: null, - routeSimulator: null, - }; - - this.onStart = this.onStart.bind(this); - } - - onStart() { - const routeSimulator = new RouteSimulator(this.state.route); - routeSimulator.addListener(currentPoint => this.setState({currentPoint})); - routeSimulator.start(); - this.setState({routeSimulator}); - } - - async componentDidMount() { - // MapLibre should be vendor-agnostic. - // This example should be reworked with a hard-coded route. - // See - // const reqOptions = { - // waypoints: [ - // {coordinates: SF_OFFICE_COORDINATE}, - // {coordinates: SF_ZOO_COORDINATE}, - // ], - // profile: 'walking', - // geometries: 'geojson', - // }; - // - // const res = await directionsClient.getDirections(reqOptions).send(); - // - // this.setState({ - // route: makeLineString(res.body.routes[0].geometry.coordinates), - // }); - } - - componentWillUnmount() { - if (this.state.routeSimulator) { - this.state.routeSimulator.stop(); - } - } - - renderRoute() { - if (!this.state.route) { - return null; - } - - return ( - - - - ); - } - - renderCurrentPoint() { - if (!this.state.currentPoint) { - return; - } - return ( - - ); - } - - renderProgressLine() { - if (!this.state.currentPoint) { - return null; - } - - const {nearestIndex} = this.state.currentPoint.properties; - const coords = this.state.route.geometry.coordinates.filter( - (c, i) => i <= nearestIndex, - ); - coords.push(this.state.currentPoint.geometry.coordinates); - - if (coords.length < 2) { - return null; - } - - const lineString = makeLineString(coords); - return ( - - - - ); - } - - renderOrigin() { - let backgroundColor = 'white'; - - if (this.state.currentPoint) { - backgroundColor = '#314ccd'; - } - - const style = [layerStyles.origin, {circleColor: backgroundColor}]; - - return ( - - - - ); - } - - renderActions() { - if (this.state.routeSimulator) { - return null; - } - return ( - -