@openmobilehub/maps-core
v1.0.3
Published
React Native OMH Maps Core
Downloads
169
Readme
Installation
yarn add @openmobilehub/maps-core
Android
No additional steps are required.
iOS
Install peer dependencies:
yarn add react-native-maps @react-native-community/geolocation
Install pods:
cd ios && pod install
or
bundle install
bundle exec pod install --project-directory=ios
[Optional] Reduce native application sizes by adjusting autolinking
React Native by default will autolink native dependencies. If you want to prevent this behavior, you can add the following to your react-native.config.js
(create the file if it doesn't exist):
module.exports = {
dependencies: {
'@openmobilehub/maps-core': {
platforms: {
ios: null,
},
},
'@react-native-community/geolocation': {
platforms: {
android: null,
},
},
'react-native-maps': {
platforms: {
android: null,
},
},
},
};
Usage
OmhMapsModule
To render the OmhMapView, you need to first initialize the module by setting up the map providers:
import {OmhMapsModule} from '@openmobilehub/maps-core';
OmhMapsModule.initialize({
iosProvider: <PROVIDER_FOR_IOS_DEVICES>,
gmsProvider: <PROVIDER_FOR_ANDROID_GMS_DEVICES>,
nonGmsProvider: <PROVIDER_FOR_ANDROID_NON_GMS_DEVICES>,
});
Android providers can be imported from the plugin packages and iOS providers from core package, e.g.:
import {OmhMapsModule, OmhMapsAppleMapsIOSProvider} from '@openmobilehub/maps-core';
import {OmhMapsGoogleMapsProvider} from '@openmobilehub/maps-plugin-googlemaps';
import {OmhMapsOpenStreetMapProvider} from '@openmobilehub/maps-plugin-openstreetmap';
OmhMapsModule.initialize({
iosProvider: OmhMapsAppleMapsIOSProvider,
gmsProvider: OmhMapsGoogleMapsProvider,
nonGmsProvider: OmhMapsOpenStreetMapProvider,
});
:::info
Make sure that you follow each provider's setup guide before initializing the module.
:::
Apart from that you can also get an list of all available providers for given OS:
import {OmhMapsModule} from '@openmobilehub/maps-core';
const providers = OmhMapsModule.getAvailableMapProviders();
and get the default provider:
import {OmhMapsModule} from '@openmobilehub/maps-core';
const provider = OmhMapsModule.getDefaultMapProvider();
OmhMapsLocationModule
The OmhMapsLocationModule
provides methods to interact with the device's location services. It can be used to request the current location and get the last known location.
import {OmhMapsLocationModule} from '@openmobilehub/maps-core';
const currentLocation = await OmhMapsLocationModule.getCurrentLocation();
const lastLocation = await OmhMapsLocationModule.getLastLocation();
:::warning
Before using the OmhMapsLocationModule
, make sure to request the necessary permissions.
Otherwise, the module will throw an OmhLocationError.
It's recommended to use the react-native-permissions library.
:::
OmhMap
Once you have the module initialized, you can use the OmhMapView
component to render the map:
import {OmhMapView} from '@openmobilehub/maps-core';
const App = () => {
return <OmhMapView />;
}
OmhMarker
The OmhMarker
component can be used to render a marker on the map:
import {OmhMapView, OmhMarker} from '@openmobilehub/maps-core';
const coordinate = {latitude: 52.23, longitude: 21.01};
const App = () => {
return (
<OmhMapView>
<OmhMarker coordinate={coordinate} />
</OmhMapView>
);
}
OmhPolyline
The OmhPolyline
component can be used to render a polyline on the map:
import {OmhMapView, OmhPolyline} from '@openmobilehub/maps-core';
const points= [{latitude: 52.23, longitude: 21.01}, {latitude: 52.24, longitude: 21.02}];
const App = () => {
return (
<OmhMapView>
<OmhPolyline points={points} />
</OmhMapView>
);
}
OmhPolygon
The OmhPolygon
component can be used to render a polygon on the map:
import {OmhMapView, OmhPolygon} from '@openmobilehub/maps-core';
const outline = [{latitude: 52.23, longitude: 21.01}, {latitude: 52.24, longitude: 21.02}, {latitude: 52.25, longitude: 21.03}];
const App = () => {
return (
<OmhMapView>
<OmhPolygon outline={outline} />
</OmhMapView>
);
}
License
Copyright 2023 Open Mobile Hub
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.