Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
react-native-open-maps
Advanced tools
A simple react-native library to perform cross-platform map actions (Google, Apple, or Yandex Maps)
🗺 A simple cross-platform library to help perform map actions to the corresponding device's map (Google, Apple, or Yandex Maps)
react-native-open-maps
works by creating a universal map link for either Apple, Google, and Yandex maps that can be used to open up the relevant map application. In order to maximize compatibility some platform specific parameters are omitted, but simplifies development efforts and ensures a smooth user experience.
Features
function
that will open the mapstring
of the map link$ npm install --save react-native-open-maps
import openMap from 'react-native-open-maps';
import React, { Component } from 'react';
import { Button } from 'react-native';
import openMap from 'react-native-open-maps';
export default class App extends Component {
_goToYosemite() {
openMap({ latitude: 37.865101, longitude: -119.538330 });
}
render() {
return (
<Button
color={'#bdc3c7'}
onPress={this._goToYosemite}
title="Click To Open Maps 🗺" />
);
}
}
1 - 1
mapping flavor 🍦.import { createOpenLink } from 'react-native-open-maps';
const yosemite = { latitude: 37.865101, longitude: -119.538330 };
const openYosemite = createOpenLink(yosemite);
const openYosemiteZoomedOut = createOpenLink({ ...yosemite, zoom: 30 });
const facebookHQ = { latitude: 37.4847, longitude: 122.1477 };
const openFacebookHQ = createOpenLink(facebookHQ);
// Condensed for Readability...
render() {
return (
<Button
color={'#bdc3c7'}
onPress={openYosemite}
title="Go to Yosemite 🏔" />
<Button
color={'#bdc3c7'}
onPress={openFacebookHQ}
title="Go to Facebook HQ 🕋" />
);
If you need additional examples, view the example directory for a demo you can run locally.
open(options)
react-native-open-maps
immediately opens the map of the coordinates and the settings
{ createOpenLink(options) }
Creates a delayed invoked function to open the map. This is useful for binding functions to onPress()
in a succinct manner. Think of it like ... function openToMe() { open(coordinates) }
{ createMapLink(options) }
Creates the raw link for the map.
{ createQueryParameters(options) }
Creates the query parameters for the designated maps provider. Useful if you want to override the base url and perform logic to override it with a native base URL.
Properties | Type | Description | Example | Map Support |
---|---|---|---|---|
latitude | number | The latitude | 37.865101 | All |
longitude | number | The longitude | -119.538330 | All |
zoom | number | The zoom level, only works with latitude and longitude | 18 Default: 15 | All |
provider | string [ google ,apple ,yandex ] | If no provider set, it will determine according to Platform.OS | apple | N/A |
query | string | Will act according to the map used. Refer to query property | "Yosemite Trail" | All |
queryPlaceId | string | Will query by Place ID. | ChIJgUbEo8cfqokR5lP9_Wh_DaM | |
travelType | enumeration : [drive , walk ,public_transport ] | Use this parameter in conjunction with start and end to determine transportation type. Default is drive | "drive" | All |
start | string that geolocation can understand | The start location that can be interpreted as a geolocation, omit if you want to use current location / "My Location". See Apple, Google and Yandex docs for more details on how to define geolocations. | "New York City, New York, NY" | All |
end | string that geolocation can understand. | The end location that can be interpreted as a geolocation. See Apple, Google and Yandex docs for more details on how to define geolocations. | "SOHO, New York, NY" | All |
waypoints | array : [address , address ] | Define intermediate addresses between a route. | ["San Jose, California", "Campbell, California"] | Apple (v16+) and Google |
endPlaceId | string | End destination with the use of a place ID that uniquely identifies a places. | ChIJgUbEo8cfqokR5lP9_Wh_DaM | |
navigate | boolean | This is only specific for Google. Yandex and Apple maps will provide directions if a start and end is provided. | true | |
mapType | enum : [standard , satellite , hybrid , transit ] | Specifies base map type. Note, hybrid is the satellite map with a transit layer, where as transit is the standard roadmap with a transit layer. | "hybrid" | All, except Yandex does not support "hybrid" |
Note:
To perform certain map actions refer these necessary parameters
end
, [ start
, travelType
]latitude
+ longitude
, [ zoom
]query
createMapLink({ provider: 'apple', query: 'Yosemite National Park' });
createMapLink({ provider: 'apple', query: 'Coffee Shop', latitude: 10.02134, longitude: -29.21322 })
createMapLink({ provider: 'yandex', start: '1 Infinite Loop, Cupertino, CA', end: '1600 Amphitheatre Pkwy, Mountain View, CA' })
createMapLink({ provider: 'google', end: 'New York City, NY' })
createMapLink({ provider: 'google', end: 'East Brunswick, NJ' })
createMapLink({ provider: 'google', end: 'New York City, NY', travelType: 'walking', mapType: 'hybrid' })
createMapLink({ provider: 'google', start: 'SoHo, Manhattan, New York, NY', end: 'Times Square, Manhattan, NY', travelType: 'public_transportation' })
createMapLink({ provider: 'apple', query: 'hiking trails', mapType: 'satellite' })
createMapLink({ provider: 'yandex', latitude: 10.02134, longitude: -29.21322, zoom: 20 })
The query behavior differs per platform:
latitude
and longitude
is provided, this will place a marker with the query
as a label. If no latitude
or longitude
is provided, it will center map to closest query match. This will set a pin with label set to the query value.latitude
and longitude
if present and center map to closest query match. Without a query
, you may however use <latitude>,<longitude>
as a string value in the query to have a unnamed marker on the map.latitude
and longitude
is provided, this will place a point to show the accurate location. If no latitude
or longitude
is provided, it will center map to closest query match.Contributions are greatly appreciated! Prior to submitting PRs, please try to test your changes against the example application provided to make sure your changes do not break existing platforms. In addition, unit tests are recommended for new features or large changes.
To test your changes against the example application.
npm run example-test
cd example
npx react-native start
Your changes should not cause unexpected behaviors or warnings.
npm test
MIT © Brandon Him
If you like this repository, check out my other react-native projects or follow me for other open-source projects:
FAQs
A simple react-native library to perform cross-platform map actions (Google, Apple, or Yandex Maps)
The npm package react-native-open-maps receives a total of 9,286 weekly downloads. As such, react-native-open-maps popularity was classified as popular.
We found that react-native-open-maps demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.