static-map-with-polylines

Do you want to show a preview map in your mobile application? Show map with one o two markers? Draw directions between locations (point to point)? Open a location in a map app whatever user's choice? This library brings all those features

Currently supported apps to open location:

| App name | Prop name | |-----------------|---------------| | Apple Maps | apple-maps | | Google Maps | google-maps | | Citymapper | citymapper | | Yandex Maps | yandex-maps | | Yandex.Navi | yandex | | The Transit App | transit | | Uber | uber | | Moovit | moovit | | Waze | waze | | Lyft | lyft |

If you find a bug or have a feature suggestion, please log an issue.

Installation

1. Install the package

npm i -S static-map-with-polyline

2. Update your Info.plist

Please open your info.plist file and add this code:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>comgooglemaps</string>
    <string>citymapper</string>
    <string>uber</string>
    <string>lyft</string>
    <string>transit</string>
    <string>waze</string>
    <string>yandexnavi</string>
    <string>moovit</string>
    <string>yandexmaps</string>
</array>

Usage

import { StaticMapPolylines, onOpenMap } from "static-map-with-polylines";

export default function Example() {
  return (
    <View style={styles.container}>
      <StaticMapPolylines
        firstLocation={{
          latitude: "9.878673899999999",
          longitude: "-83.90911570000003",
          icon: "http://i.imgur.com/bO2nzj9.png"
        }}
        secondLocation={{
          latitude: "9.844878",
          longitude: "-83.96617349999997",
          icon: "http://i.imgur.com/bO2nzj9.png"
        }}
        zoom={12}
        apiKey={""} // here your google map api key
        directionsApiKey={""} // here your google map direction api key
      />
      <Button
        buttonLabel={"Open with"}
        onClick={() => onOpenMap({
          originAddress: {
            latitude: 9.878673899999999,
            longitude: -83.90911570000003
          },
          destinationAddress: {
            latitude: 9.844878,
            longitude: -83.96617349999997
          },
          // googleForceLatLon optionally force GoogleMaps to use the latlon for the query instead of the title
          googleForceLatLon: false,
          // app optionally specify app to open
          app: null,
          // optional
          title: "Teto's house",
          dialog: {
            dialogTitle: "My dialog title test", // optional string (default: 'Open in Maps')
            dialogMessage: "This is the amazing dialog Message", // optional (default: 'What app would you like to use?')
            cancelText: "This is the cancel button text" // optional (default: 'Cancel')
          }
        })}
      />
    </View>
  );
}

##Props StaticMapPolylines

| Prop | Type | Optional | Default | Description | |------------------ |--------- |---------- |------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | firstLocation | Object | No | | Object with latitude and longitude location point, also you can send an optional icon property. Icon property is a image url example: { latitude: "9.87867389999", longitude: "-83.9091157000", icon: "http://i.imgur.com/bO2nzj9.png", // optional} | | secondLocation | object | Yes | | Object with latitude and longitude location point, also you can send an optional icon property. Icon property is a image url example: { latitude: "9.87867389999", longitude: "-83.9091157000", icon: "http://i.imgur.com/bO2nzj9.png", // optional} | | zoom | number | Yes | 12 | Defines the map's zoom level. | | scale | number | Yes | calculated from PixelRatio. | scale=2 returns twice as many pixels as scale=1. | | format | string | Yes | 'png' | Format valid: - 'png' - 'png32' - 'jpg' - 'gif' - 'jpg-baseline' | | mapType | string | Yes | 'roadmap' | Types valid: - 'roadmap' - 'satellite' - 'terrain' - 'hybrid' | | apiKey | string | No | | Google API Key | | directionsApiKey | string | No | | Google directions API Key | | useMapOnlySignal | boolean | Yes | false | useMapOnlySignal = true show map with only one market with out polylines. | | size | object | Yes | { width: screenWidth, height: 500 } | The image size, the default width value is the mobile screen width size. | | style | object | Yes | | View style |

##Props onOpenMap

| Prop | Type | Optional | Default | Description | |--------------------|---------|----------|------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | title | string | Yes | null | Title to show | | app | string | Yes | null | Especify which app you can use as deafult to open map. You can see the app available above of this file. | | dialog | object | Yes | {dialogTitle: 'Open in Maps',dialogMessage: 'What app would you like to use?',cancelText: 'Cancel',} | Objet to dialog values to show when modal app options is open (Only if user has more than one app maps installed) example dialog prop: {dialogTitle: "My dialog title test",dialogMessage: "This is the amazing dialog Message",cancelText: "This is the cancel button text", } | | originAddress | object | No | | Object with latitude and longitude values. | | destinationAddress | object | No | | Object with latitude and longitude values. | | googleForceLatLon | boolean | No | | Force GoogleMaps to use the latlon for the query instead of the title. |

Demos

IOS

ANDROID

CUSTOM MARKER

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Credits

This library is loosely based on:

• react-native-map-link

License

MIT