sunnygleason/pubnub_mapbox_directions_ui.html

## pubnub_mapbox_directions_ui.html
<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2</title>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
    <script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>

    <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
    <script src="https://unpkg.com/@angular/http/bundles/http.umd.js"></script>

    <script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script>
    <script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
  <body>
    <main-component>
      Loading...
    </main-component>
    <script>
    var app = window.app = {};

    app.main_component = ng.core.Component({
        selector: 'main-component',
        template: `
<div class="container">
    <pre>
    NOTE: make sure to update the PubNub keys below with your keys,
    and ensure that the BLOCK settings are configured properly!
    </pre>

    <h3>MyApp Directions Integration</h3>
    <hr/>
    <p>Current location (requires location permission) :
    <br />
    <b>lat1</b>={{lat1}}, <b>lng1</b>={{lng1}})</p>
    <p>Suggested Destination :
    <br />
    <b>lat2</b>={{lat2}}, <b>lng2</b>={{lng2}})</p>
    <p>Profile : <b>{{profile}}</b></p>
    <button class="btn btn-primary" (click)="publish()">Get Directions!</button>
    <br/>
    <br/>
    <ol>
      <li *ngFor="let item of steps?.routes[0].legs[0].steps">{{item.maneuver.instruction}} for {{item.distance}} ft</li>
    </ol>
    <br />
    <br />
</div>`
    }).Class({
        constructor: [PubNubAngular, ng.http.Http, function(pubnubService, http){
            var self = this;
            self.pubnubService = pubnubService;
            self.http = http;

            self.steps = null;
            self.channelName = 'mapbox-directions-channel';
            self.profile = "mapbox/walking";
            self.lat1 = self.lng1 = "loading...";
            self.lat2 = 37.7972705;
            self.lng2 = -122.4273027;

            pubnubService.init({
                publishKey:   'YOUR_PUB_KEY',
                subscribeKey: 'YOUR_SUB_KEY',
                uuid: PubNub.generateUUID(),
                ssl:true
            });

            pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});
            self.messages = pubnubService.getMessage(this.channelName,function(msg){
              self.http
                .get(msg.message.directions)
                .map((r)=>r.json())
                .subscribe(data => self.steps = data);
            });

            Rx.Observable.interval(3000).subscribe(()=>(navigator.geolocation.getCurrentPosition((position)=>{
              self.lat1 = position.coords.latitude;
              self.lng1 = position.coords.longitude;
            })));
        }],
        publish: function(){
            this.pubnubService.publish({channel: this.channelName,message:{lat1:this.lat1,lng1:this.lng1,lat2:this.lat2,lng2:this.lng2,profile:this.profile}});
        }
    });

    app.main_module = ng.core.NgModule({
        imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule, ng.http.HttpModule],
        declarations: [app.main_component],
        providers: [PubNubAngular],
        bootstrap: [app.main_component]
    }).Class({
        constructor: function(){}
    });

    document.addEventListener('DOMContentLoaded', function(){
        ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
    });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular 2</title>
	<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
	<script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
	<script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
	<script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>

	<script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
	<script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
	<script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
	<script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
	<script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script>
	<script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
	<script src="https://unpkg.com/@angular/http/bundles/http.umd.js"></script>

	<script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script>
	<script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
	</head>
	<body>
	<main-component>
	Loading...
	</main-component>
	<script>
	var app = window.app = {};

	app.main_component = ng.core.Component({
	selector: 'main-component',
	template: `
	<div class="container">
	<pre>
	NOTE: make sure to update the PubNub keys below with your keys,
	and ensure that the BLOCK settings are configured properly!
	</pre>

	<h3>MyApp Directions Integration</h3>
	<hr/>
	<p>Current location (requires location permission) :
	<br />
	<b>lat1</b>={{lat1}}, <b>lng1</b>={{lng1}})</p>
	<p>Suggested Destination :
	<br />
	<b>lat2</b>={{lat2}}, <b>lng2</b>={{lng2}})</p>
	<p>Profile : <b>{{profile}}</b></p>
	<button class="btn btn-primary" (click)="publish()">Get Directions!</button>
	<br/>
	<br/>
	<ol>
	<li *ngFor="let item of steps?.routes[0].legs[0].steps">{{item.maneuver.instruction}} for {{item.distance}} ft</li>
	</ol>
	<br />
	<br />
	</div>`
	}).Class({
	constructor: [PubNubAngular, ng.http.Http, function(pubnubService, http){
	var self = this;
	self.pubnubService = pubnubService;
	self.http = http;

	self.steps = null;
	self.channelName = 'mapbox-directions-channel';
	self.profile = "mapbox/walking";
	self.lat1 = self.lng1 = "loading...";
	self.lat2 = 37.7972705;
	self.lng2 = -122.4273027;

	pubnubService.init({
	publishKey: 'YOUR_PUB_KEY',
	subscribeKey: 'YOUR_SUB_KEY',
	uuid: PubNub.generateUUID(),
	ssl:true
	});

	pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});
	self.messages = pubnubService.getMessage(this.channelName,function(msg){
	self.http
	.get(msg.message.directions)
	.map((r)=>r.json())
	.subscribe(data => self.steps = data);
	});

	Rx.Observable.interval(3000).subscribe(()=>(navigator.geolocation.getCurrentPosition((position)=>{
	self.lat1 = position.coords.latitude;
	self.lng1 = position.coords.longitude;
	})));
	}],
	publish: function(){
	this.pubnubService.publish({channel: this.channelName,message:{lat1:this.lat1,lng1:this.lng1,lat2:this.lat2,lng2:this.lng2,profile:this.profile}});
	}
	});

	app.main_module = ng.core.NgModule({
	imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule, ng.http.HttpModule],
	declarations: [app.main_component],
	providers: [PubNubAngular],
	bootstrap: [app.main_component]
	}).Class({
	constructor: function(){}
	});

	document.addEventListener('DOMContentLoaded', function(){
	ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
	});
	</script>
	</body>
	</html>