Code Monkey home page Code Monkey logo

react-native-polyline-direction's Introduction


🟥 DEPRECATED: This project is no longer maintained, please use the project where this project original bramus/react-native-maps-directions 🟥


@react-native-maps/polyline-direction

📍 A component in (iOS + Android) for drawing routes with the polyline of the react-native-maps library

package version downloads weekly Build Status

Installation

Install the package in your project directory with:

// with yarn
yarn add @react-native-maps/polyline-direction

// with npm
npm install --save @react-native-maps/polyline-direction

Compatibility

Due to the rapid changes being made in the React Native ecosystem, we are not officially going to support this module on anything but the latest version of React Native. With that said, we will do our best to stay compatible with older versions as much that is practical, and the peer dependency of this requirement is set to "react-native": "\*" explicitly for this reason. If you are using an older version of React Native with this module though, some features may be buggy.

General Usage

import PolylineDirection from '@react-native-maps/polyline-direction';

Or

var PolylineDirection = require('@react-native-maps/polyline-direction');

Basic Usage

important

The component PolylineDirection wrap it in a MapView component.

The mandatory PolylineDirection props are:

  • origin: The origin location to start routing from
  • destination: The destination location to start routing to
  • apiKey: Your Google Maps Directions API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the Google API Console).
import React from 'react';
import { View } from 'react-native';

import MapView from 'react-native-maps';

import PolylineDirection from '@react-native-maps/polyline-direction';

const origin = { latitude: 19.363631, longitude: -99.182545 };
const destination = { latitude: 19.2932543, longitude: -99.1794758 };
const GOOGLE_MAPS_APIKEY = 'AIzaSyAQO5Ol8duHnJd2vs1JElye8f177yXyHGw';

function MyComponent() {
  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        region={{
          latitude: 19.363631,
          longitude: -99.182545,
          latitudeDelta: 1,
          longitudeDelta: 1,
        }}>
        <PolylineDirection
          origin={origin}
          destination={destination}
          apiKey={GOOGLE_MAPS_APIKEY}
          strokeWidth={4}
          strokeColor="#12bc00"
        />
      </MapView>
    </View>
  );
}

export default MyComponent;

Component API

Props

Prop Type Default Note
origin LatLng or String The origin location to start routing from.
destination LatLng or String The destination location to start routing to.
apiKey String Your Google Maps API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the Google API Console by hitting the “Enable APIs and Services“ button).
waypoints [LatLng or String] Array of waypoints to use between origin and destination.
language String "en" The language to use when calculating directions. See here for more info.
mode String "driving" Which transportation mode to use when calculating directions. Allowed values are "driving", "bicycling", "walking", and "transit". (See here for more info).
resetOnChange boolean true Tweak if the rendered MapView.Polyline should reset or not when calculating the route between origin and destionation. Set to false if you see the directions line glitching.
optimizeWaypoints boolean false Set it to true if you would like Google Maps to re-order all the waypoints to optimize the route for the fastest route. Please be aware that if this option is enabled, you will be billed for a higher rate by Google as stated here.
apiDirectionsServiceURL string (Google's) Base URL of the Directions Service (API) you are using. By default the Google Directions API is used ("https://maps.googleapis.com/maps/api/directions/json"). Usually you won't need to change this.
region String If you are using strings for origin or destination, sometimes you will get an incorrect route because Google Maps API needs the region where this places belong to. See here for more info.

More props

Since the result rendered on screen is a MapView.Polyline component, all MapView.Polyline props – except for coordinates – are also accepted.

<MapView initialRegion={…}>
  <PolylineDirection
    origin={origin}
    destination={destination}
    apiKey={GOOGLE_MAPS_APIKEY}
    strokeWidth={3}
    strokeColor="hotpink"
  />
</MapView>

Events/Callbacks

Event Name Returns Notes
onStart { origin, destination, waypoints: [] } Callback that is called when the routing has started.
onReady { distance: Number, duration: Number, coordinates: [], fare: Object } Callback that is called when the routing has succesfully finished. Note: distance returned in kilometers and duration in minutes.
onError errorMessage Callback that is called in case the routing has failed.

Whats Next

Contributing to @react-native-maps/polyline-direction

I could take the sources to the project where I was inspired, for the moment I will do my best to keep the package updated

react-native-polyline-direction's People

Contributors

dependabot[bot] avatar stelmakhivan avatar tiaanduplessis avatar wootsbot avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

shahidcodes madhavpruthi joevo2 tpage99

react-native-polyline-direction's Issues

Purpose of using useCallback Hook?

I'm here because I basically also tried hookifying the original repo myself, but it doesn't work. More specifically, it works when using it only once on a screen, but not when I want to render it multiple times like so:

export default function PolylineDirectionAllFullRoutes() {
    const FullRoutes = useSelector(state => state.fullRoutes);
    const AllFullRoutes = Object.keys(FullRoutes).map((id) => {
        return (
            <PolylineDirection
                key={id}
                origin={FullRoutes[id].origin}
                destination={FullRoutes[id].destination}
                waypoints={FullRoutes[id].waypoints}
                mode={FullRoutes[id].navigationMode}
                strokeColor={FullRoutes[id].color}
            />
        )
    })
    return AllFullRoutes;
}

When I do this, every route is rendered one after another, but it only ever shows a single route at once. Also, interestingly, the strokeColor is almost never correct - they are meant to have different distinct colors. I believe it always uses the same color for all routes, but it happens quite fast.

I compared my approach to yours, and it turns out that using useCallback for handleFetchAndRenderRoute fixes this. Apart from that, our approaches are fairly similar. I looked into a couple of tutorials for useCallback and I still don't understand how this makes the difference. Could somebody perhaps explain this to me?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.