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.

Authors

This library is developed by ADSA, Guanacaste, Costa Rica.

• Teto Gomez.

Credits

This library is loosely based on:

• react-native-map-link

License

MIT