CODEWITHSUNDEEP
geolocationtrackingpubnub
user875139
user875139

Reputation: 1621

Is it possible to make an uber-like map tracking using PubNub?

I have been trying to make a web app that has a certain feature like uber where users can see other users on a map. I read about pubNub (https://www.pubnub.com/) and I saw they have a tutorial that allows you to track movements on a map https://www.pubnub.com/tutorials/javascript/mapping-javascript-tracking/.

They also provide a tool called presence (https://www.pubnub.com/products/presence/) which allows you to see if users have joined your web session or not. I would like to, with presence, to show on a map if people have joined the session or left the session. If they are on the map, I would like the movements to be updated as well.

I am just wondering if someone has used pubNub before to achieve something similar and if so how to go about it?

Upvotes: 4

Views: 2511

Answers (1)

Stephen Blum
Stephen Blum

Reputation: 6834

Clone Uber with PubNub and EON Maps

https://github.com/pubnub/pubnUber - GitHub Repository

PubNub Uber App

Today we're going to use Phonegap and PubNub to create a simple taxi hailing app. What we'll walk through today is the same technology stack used by Uber, Gett, and other taxi hailing apps. They all work in a similar fashion.

Getting started

  1. Install phonegap on the CLI.
  2. Clone this repository locally.
  3. The repo contains two directories /rider and /driver. We're going to start with /driver.

Set Up PubNub

First, we need to set up PubNub. the PUBNUB variables comes for free from the EON library. The publish_key and subscribe_key settings come from your PubNub account.

var channel = "pubnub-taxi-app";

var pubnub = PUBNUB.init({
    publish_key: 'demo',
    subscribe_key: 'demo'
});

The pubnub plugs the same pubnub variable we configured in the first step into EON. This lets us use our own PubNub keys within EON.

Our Mapbox configuration is set and we're ready to send some

Publish messages to the channel

Define our PubNub channel.

Subscribe.

pubnub.subscribe({
    channel: channel,
    message: function(message,env,channel){

        if(message == 'hail') {

            var pickup = confirm("Someone requested a ride!", "Accept");

            if(pickup) {

                pubnub.publish({
                    channel: channel,
                    message: 'pickup'
                });

            }

        }
    }    
});

And here is the hail() function.

var hail = function(argument) {

    pubnub.publish({
        channel: channel,
        message: 'hail'
    });

    alert('Waiting for driver...');

};

Upvotes: 3

Related Questions