Skip to content

Instantly share code, notes, and snippets.

@domadev812
Forked from ToeJamson/1.html
Last active November 15, 2017 21:06
Show Gist options
  • Save domadev812/580aa8ef35280686665777bd499f810e to your computer and use it in GitHub Desktop.
Save domadev812/580aa8ef35280686665777bd499f810e to your computer and use it in GitHub Desktop.
Displaying Live Location Points & Tracks with JavaScript & MapBox and PubNub
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
var marker = L.marker([lat, lng], {
icon: L.mapbox.marker.icon({
'marker-color': '#f86767'
})
});
marker.addTo(map);
message: function(message, channel) {
console.log(message)
lat = message['lat'];
lng = message['lng'];
map.setView([lat, lng]);
map_line.addLatLng([lat,lng]);
},
var map_line;
map_line = L.polyline([], {color: 'blue'}).addTo(map);
message: function(message, channel) {
console.log(message)
lat = message['lat'];
lng = message['lng'];
map_line.addLatLng([lat,lng]);
}
var lat = null;
var lng = null;
if (navigator.geolocation) {
...
}
navigator.geolocation.getCurrentPosition(function(position) {
var locationMarker = null;
if (locationMarker){
// return if there is a locationMarker bug
return;
}
// sets default position to your position
lat = position.coords["latitude"];
lng = position.coords["longitude"];
},
function(error) {
console.log("Error: ", error);
},
{
enableHighAccuracy: true
}
);
function pubs() {
...
}
pubnub = new PubNub({
publishKey : 'demo',
subscribeKey : 'demo'
})
pubnub.subscribe({
channels: ["mymaps"],
});
pubnub.addListener({
status: function(statusEvent) {
if (statusEvent.category === "PNConnectedCategory") {
console.log("pubnub connected");
}
},
message: function (message) {
console.log(message)
lat = message['lat'];
lng = message['lng'];
}
})
L.mapbox.accessToken = <your token goes here>
var map = L.mapbox.map('map', '<your map goes here>');
map.setView([lat, lng], 17);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment