react-native-maps#Polyline JavaScript Examples

The following examples show how to use react-native-maps#Polyline. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Map.js    From timetable with MIT License 5 votes vote down vote up 
Map = ({ polylineSource, markerSource, onPressHandler, isDark }) => {
  // MapView Markers
  const markers = () => {
    if (markerSource.length > 0) {
      return markerSource.map((marker, index) => {
        const coords = {
          latitude: marker.Lat,
          longitude: marker.Lon
        }

        return (
          <Marker
            key={index}
            coordinate={coords}
            title={marker.Name}
            description={' '}
            onPress={() => onPressHandler(marker.StopId, marker.Name)}
            pinColor={'#de373d'}
            tracksViewChanges={false}
            icon={require('../assets/images/b.png')}
          />
        )
      })
    }
  }

  // MapView Polylines
  const polylines = () => {
    if (polylineSource != null) {
      return (
        <Polyline
          coordinates={polylineSource}
          strokeWidth={4}
          strokeColor='#fff829'
        />
      )
    }
  }

  return (
    <MapView
      style={{ flex: 1 }}
      provider='google'
      initialRegion={{
        latitude: 41.7330215,
        longitude: 44.7989883,
        latitudeDelta: 0.35,
        longitudeDelta: 0.25
      }}
      clusterColor={isDark ? 'rgba(255, 0, 0, 0.4)' : 'rgba(255, 0, 0, 0.5)'}
      radius={170}
      extent={700}
      showsCompass={true}
      customMapStyle={isDark ? night : day}
      showsUserLocation={true}
      showsMyLocationButton={true}
      followsUserLocation={true}
    >
      {markers()}

      {polylines()}
    </MapView>
  )
}
Example #2
Source File: index.js    From pandoa with GNU General Public License v3.0 4 votes vote down vote up 
MapHistory = ({ positions, setDetailTrigger, warnings }) => {
  const lines = positions.map(point => {
    return {
      latitude: point.lat ? point.lat : 0,
      longitude: point.lng ? point.lng : 0
    };
  });

  const connectedPoints = warnings;

  var concatPoints = [];
  connectedPoints.forEach((position, i) => {
    const foundSimilar = concatPoints.findIndex(existingPoint => {
      const diff = diffCalc(position, existingPoint);
      if (diff.distance <= 100 && diff.timeDifference <= 1000 * 60 * 60 * 2) {
        return true;
      }
    });
    if (foundSimilar === -1) {
      concatPoints.push(position);
    }
  });

  const circle = positions.map((point, index) => {
    const coordinates = {
      longitude: point.lng,
      latitude: point.lat
    };
    return (
      <Circle
        key={index}
        strokeColor={commonColor.brandPrimary}
        center={coordinates}
        fillColor={commonColor.brandPrimary}
        radius={Platform.OS === "ios" ? 0.3 : 0.1}
      />
    );
  });

  const connectedLines = connectedPoints.map((point, index) => {
    if (point.matches && point.matches.length >= 1) {
      return point.matches.map((e, i) => (
        <Polyline
          key={`${i}-${index}`}
          coordinates={[
            { latitude: point.position.lat, longitude: point.position.lng },
            { latitude: e.lat, longitude: e.lng }
          ]}
          strokeColor="rgba(255,0,0,0.1)" // fallback for when `strokeColors` is not supported by the map-provider
          strokeColors={["rgba(255,0,0,0.5)", "rgba(255,168,12,0.8)"]}
          strokeWidth={15.5}
        />
      ));
    }
  });

  const points = connectedPoints.map((point, index) => {
    const coordinates = {
      longitude: point.position.lng,
      latitude: point.position.lat
    };

    return (
      <Marker
        key={index}
        anchor={Platform.OS === "ios" ? { x: 0, y: 0 } : { x: 0.53, y: 0.53 }}
        coordinate={coordinates}
        onCalloutPress={() => setDetailTrigger(point)}
        title={`${new Date(point.position.time).toLocaleDateString(
          "de-DE",
          options
        )}`}
        description={contactLengthText(point.duration)}
      >
        {point.matches.length >= 1 ? (
          <View style={styles.matchCircle}>
            <View style={styles.matchCircleBackground}></View>
            <View style={styles.matchCircleInner}></View>
          </View>
        ) : (
          <View style={styles.historyCircle} />
        )}
      </Marker>
    );
  });

  //
  //
  //
  return (
    <React.Fragment>
      <Polyline
        coordinates={lines}
        geodesic={true}
        // strokeColor={Colors.tintColor}  fallback for when `strokeColors` is not supported by the map-provider
        strokeWidth={2}
        strokeColor="rgba(0,122,255,0.7)"
      />
      {circle}
      {connectedLines}
      {points}
    </React.Fragment>
  );
}