npm i --save nativescript-here
- Version: 0.0.1
- GitHub:
- NPM: https://www.npmjs.com/package/nativescript-here
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
NativeScript Here
Prerequisites
You need a Here APP ID & APP Code so sign up with Here. Once you've registered go to your Project > (Your Project Name) > Generate `Keys for your Starter SDKs.
Installation
tns plugin add nativescript-here
Android
Add the following to your ApplicationManifest.xml
anywhere after your application opening tag an before it's closing
<meta-data android:name="com.here.android.maps.appid" android:value="YOUR_APP_ID"/>
<meta-data android:name="com.here.android.maps.apptoken" android:value="YOUR_APP_CODE"/>
IOS
Place the following in your app.ts , app.js or main.ts
import { Here } from 'nativescript-here';
import * as application from 'tns-core-modules/application';
import { Here } from 'nativescript-here';
application.on('launch', () => {
Here.init('APP_ID', 'APP_CODE');
});
Usage
IMPORTANT: Make sure you include xmlns:map="nativescript-here" on the Page element
<map:Here mapStyle="hybrid_day" mapReady="onMapReady" row="3" id="map" zoomLevel="12" disableZoom="false" disableScroll="false" latitude="10.6689243" longitude="-61.5315486"/>
import { HereMarker } from 'nativescript-here';
export function onMapReady(event){
const map = event.object;
map.addMarkers(<HereMarker[]>[{
id: 1,
latitude: 10.6689243,
longitude: -61.5315486,
title: 'Home',
description: 'Hmmm ... 🤔',
draggable: true,
onTap: (marker) => {
const updatedMarker = Object.assign({}, marker, {
selected: !marker.selected
});
map.updateMarker(updatedMarker);
}
}]);
}
API
Property | Default | Description |
---|---|---|
mapStyle | normal_day | |
latitude | 0 | Set the center of the map by passing this in |
longitude | 0 | .. and this as well |
zoomLevel | 0 | |
mapReady | - | The name of a callback function you can declare to interact with the map after it has been drawn |
License
Apache License Version 2.0, January 2004