nativescript-here
by triniwiz | v0.0.1
NativeScript sdk for Here Maps
npm i --save nativescript-here

npm npm Build Status

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