AlgorithmsCodilityPatternsTutorials

For the map module i decided to go with Mapbox. It is lightweight and reliable, and just looks plain awesome. So first step here is to go and register to the service, and obtain your own access token. No worries, it’s free 🙂

For integration with nativescript i used the excellent nativescript-mapbox plugin from Eddy Verbruggen, so go ahead and install it via npm.

Although the methods are documented, lets open up the node_modules and take a look at how it was build.

First open the mapbox.d.ts file. Here you will see all the interfaces that plugin uses, as well as the methods it exports. Notice the module declaration at the top. For all libraries not written in typescript, you must declare the API that the library exposes. That type of declarations that don’t define an implementation is called “ambient”. Typically, these are defined in d.ts files

Next, open up the mapbox.common.js file

Here, all the methods that are shared between Android and iOS adapter are defined, such as helpers, configurations, defaults, or common methods.

And now for the tricky part, the native code integration. Open up the mapbox.android.js as this is where the magic happens.

Everything you write here can be javascript or java, as nativescript will map the string type from js to java’s string type, and that goes for everything else! Take a look at this:

Here we are basically telling Nativescript to create a new Java mapbox view from android context and an access token defined in javascript and map it to a mapView property of mapbox javascript object. Same goes for the Objective C / Swift part.

Here you can see that the plugin uses a layout that is not available in Nativescript:

The frame layout is Android only, but you can easily call the method that constructs it in your Angular 2 module. How cool is that 🙂 Basically this enables you to construct all your apps as modules, and share just some business logic. The level of Nativescript / native separation is at your will.

Map

Go ahead and create a map folder in your pages folder. The flow is the same as with Login module and service.

And then in your map service, reguire the nativescript-mapbox module, and start the map.

Unfortunately, the geolocation service is crashing my emulator, so we will simulate it using a setTimeout function. As geolocation returns the users coordinates in an interval, we need to check if there are any new pins available. If the user has moved a certain distance, we compare the new pins from our API with the pins already shown on our map, an append the ones that are not. The user distance calculation is done using a Haversine formula just to be exact. Not that it was necessary, but having that precision might come in handy later.

Now add the template:

And voila! The we have a map with pins that update as we move. I didnt go the distance to write the views for adding a new marker, for claiming new markers and showing a list of claimed markers, but that shouldn’t be to hard now.

I think that by now you have a basic understanding how to create a cross-platform app that communicates with a RESTfull api, how Angular 2 and Typescript help us with code organization and why reading long tutorials like this one pays off 😉