I was wondering if when coding, there was a way to make it so the users can make it so there are multiple waypoints. Right now, I'm getting an automatic waypoint 4 miles away from the starting waypoint that the users can edit.
This is the code I have:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var directionsManager;
var directionsErrorEventObj;
var directionsUpdatedEventObj;
function getMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'myKey' });
}
function createDirectionsManager() {
var displayMessage;
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
displayMessage = 'Directions Module loaded\n';
displayMessage += 'Directions Manager loaded';
}
alert(displayMessage);
directionsManager.resetDirections();
directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function (arg) { alert(arg.message) });
directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () { alert('Directions updated') });
}
function createDrivingRoute() {
if (!directionsManager) { createDirectionsManager(); }
directionsManager.resetDirections();
// Set Route Mode to driving
{
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '7500 University Dr., Bismarck, ND' });
directionsManager.addWaypoint(startWaypoint);
var destinationWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('hometown').value });
directionsManager.addWaypoint(destinationWaypoint);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
alert('Calculating directions...');
directionsManager.calculateDirections();
}
// Insert a waypoint
directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Bismarck, ND'}), 1);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
alert('Calculating directions...');
directionsManager.calculateDirections();
}
function createDirections() {
if (!directionsManager) {
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });
}
else {
createDrivingRoute();
}
}
</script>
Is there a way I can make it so the user decides when to add a waypoint - so that the waypoint wouldn't be automatic and the user can decide to add multiple waypoints?
Thanks in advance.
Yes. You have to create a UI that handles this rather than automatically choosing random waypoints. Then you just have to use the addWaypoint method to add the waypoint to the directions manager.
Related
Can anyone help me why I cannot be able to change the data value within a method?
<head>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
</head>
<body>
<script>
var app = new Vue({
data() {
return {
name: ""
}
},
methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
docRef.get().then(function(doc) {
this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
})
</script>
</body>
"console.log" is working and I can get the value from Firestore, but why the value of "name" doesn't change?
this will not be referring to the Vue instance anymore in function(){}, because this kind of function declaration bind its own this.
So you can save this into another variable 1st, and use it in function(){}.
methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
var _this = this; // save it in a variable for usage inside function
docRef.get().then(function(doc) {
_this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
}
Alternatively, you could use arrow function like ()=>{}. Arrow function doesn't bind its own this. But it's not supported in some browsers yet.
I'm working on an app with both Firebase (web app) and the youtube API. The idea is to let users share their playlists and interact.
1) First, the user must identify himself. This part works very well (firebase part)
2) Then, the user must accept some conditions (the scopes) from the youtube API.
3) The Youtube API return the result of the request.
The issue is that youtube API recreate for every item of the array the HTML structure : HTML > HEAD > BODY. Plus, the response skips my header and display the all thing in a blank page instead of reacting like an include PHP (i know this is javascript but still.. ).
I know the solution rest in the function executerequest but i can't figurate how to do it.
The code of the request is in the middle of the body but for the purpose of my post, i did separate it.
var GoogleAuth;
var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
function handleClientLoad() {
// Load the API's client and auth2 modules.
// Call the initClient function after the modules load.
gapi.load('client:auth2', initClient);
}
function initClient() {
// Retrieve the discovery document for version 3 of YouTube Data API.
// In practice, your app can retrieve one or more discovery documents.
var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest';
// Initialize the gapi.client object, which app uses to make API requests.
// Get API key and client ID from API Console.
// 'scope' field specifies space-delimited list of access scopes.
gapi.client.init({
'apiKey': '...',
'discoveryDocs': [discoveryUrl],
'clientId': '....',
'scope': SCOPE
}).then(function () {
GoogleAuth = gapi.auth2.getAuthInstance();
// Listen for sign-in state changes.
GoogleAuth.isSignedIn.listen(updateSigninStatus);
// Handle initial sign-in state. (Determine if user is already signed in.)
var user = GoogleAuth.currentUser.get();
setSigninStatus();
// Call handleAuthClick function when user clicks on
// "Sign In/Authorize" button.
$('#sign-in-or-out-button').click(function() {
handleAuthClick();
});
$('#revoke-access-button').click(function() {
revokeAccess();
});
});
}
function handleAuthClick() {
if (GoogleAuth.isSignedIn.get()) {
// User is authorized and has clicked 'Sign out' button.
$('#sign-in-or-out-button').html('Sign out');
$('#revoke-access-button').css('display', 'inline-block');
GoogleAuth.signOut();
} else {
// User is not signed in. Start Google auth flow.
GoogleAuth.signIn();
}
}
function revokeAccess() {
GoogleAuth.disconnect();
}
function setSigninStatus(isSignedIn) {
var user = GoogleAuth.currentUser.get();
var isAuthorized = user.hasGrantedScopes(SCOPE);
if (isAuthorized) {
$('#sign-in-or-out-button').html('Sign out');
$('#revoke-access-button').css('display', 'inline-block');
$('#auth-status').html('Connecté ' +
' Granted');
defineRequest();
console.log('connecté');
} else {
$('#roomRed').html('display', 'block');
$('#sign-in-or-out-button').html('Sign In/Authorize');
$('#revoke-access-button').css('display', 'none');
$('#auth-status').html('Déconnecté' +
' Denied');
console.log('déconnecté');
}
// This helper method displays a message on the page.
}
function updateSigninStatus(isSignedIn) {
setSigninStatus();
}
function createResource(properties) {
var resource = {};
var normalizedProps = properties;
for (var p in properties) {
var value = properties[p];
if (p && p.substr(-2, 2) == '[]') {
var adjustedName = p.replace('[]', '');
if (value) {
normalizedProps[adjustedName] = value.split(',');
}
delete normalizedProps[p];
}
}
for (var p in normalizedProps) {
// Leave properties that don't have values out of inserted resource.
if (normalizedProps.hasOwnProperty(p) && normalizedProps[p]) {
var propArray = p.split('.');
var ref = resource;
for (var pa = 0; pa < propArray.length; pa++) {
var key = propArray[pa];
if (pa == propArray.length - 1) {
ref[key] = normalizedProps[p];
} else {
ref = ref[key] = ref[key] || {};
}
}
};
}
return resource;
}
function removeEmptyParams(params) {
for (var p in params) {
if (!params[p] || params[p] == 'undefined') {
delete params[p];
}
}
return params;
}
function executeRequest(request) {
request.execute(function(response) {
console.log(response);
for(var i = 0; i< response.items.length; i++){
console.log(response.items[i].player.embedHtml);
document.write(response.items[i].player.embedHtml);
}
});
}
function buildApiRequest(requestMethod, path, params, properties) {
params = removeEmptyParams(params);
var request;
if (properties) {
var resource = createResource(properties);
request = gapi.client.request({
'body': resource,
'method': requestMethod,
'path': path,
'params': params
});
} else {
request = gapi.client.request({
'method': requestMethod,
'path': path,
'params': params
});
}
executeRequest(request);
}
/***** END BOILERPLATE CODE *****/
function defineRequest() {
// See full sample for buildApiRequest() code, which is not
// specific to a particular youtube or youtube method.
buildApiRequest('GET',
'/youtube/v3/playlists',
{
'mine': 'true',
'maxResults': '25',
'part': 'snippet,contentDetails,player',
'onBehalfOfContentOwner': '',
'onBehalfOfContentOwnerChannel': ''
});
/*
buildApiRequest('GET',
'/youtube/v3/playlistItems',
{
'playlistId': "PLsvlo6Soc2pc2ZlereiehdPRhm0eKjSxI",
'maxResults': '25',
'part': 'snippet,contentDetails'
});
*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mes vidéo </title>
<style>
</style>
</head>
<body>
<button id="sign-in-or-out-button"
style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
style="display: none; margin-left: 25px">Revoke access</button>
<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>
<div id="video-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
Thank you by advance
Google changed his GCM (Google Cloud Messaging) to FCM (Firebase Cloud Messaging). What should I do to integrate it with Appcelerator app?
I found a lot of modules in marketplace but I think they only work with GCM.
Has anyone tried to combine it?
I have this currently working with FCM and a module called Ti.Goosh. It works really well and I can send push notifications to web browsers and Android devices with it. https://github.com/caffeinalab/ti.goosh
create an html with some Firebase functions, in my case we need to find some vehicles on a Geo radio
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firebase</title>
<!-- Firebase -->
<script src="firebase.js"></script>
<!-- GeoFire -->
<script src="geofire.min.js"></script>
</head>
<body style="margin:0;padding:0;border:0;">
<script type="text/javascript">
var markers = new Array();
var markersArray = [];
var driverInvitations;
var diverInvited;
Ti.App.addEventListener('firebase:init', function(e) {
Ti.API.info('Geofire init');
Ti.API.info(e);
Ti.API.info('latitude :'+e.latitude);
Ti.API.info('longitude :'+e.longitude);
var latitude = parseFloat(e.latitude);
var longitude = parseFloat(e.longitude);
// Set the center
var center = [latitude, longitude];
// Query radius
var radiusInKm = 0;
// Get a reference to the Firebase public transit open data set
var transitFirebaseRef = new Firebase("https://xxx.firebaseio.com/");
// Create a new GeoFire instance, pulling data from the public transit data
var geoFire = new GeoFire(transitFirebaseRef.child("_geofire"));
/*************/
/* GEOQUERY */
/*************/
// Keep track of all of the vehicles currently within the query
var vehiclesInQuery = {};
// Create a new GeoQuery instance
var geoQuery = geoFire.query({
center : center,
radius : radiusInKm
});
geoQuery.on("ready", function() {
Ti.API.info("GeoQuery has loaded and fired all other events for initial data");
Ti.App.fireEvent('fbController:selectDriver');
});
/* Adds new vehicle markers to the map when they enter the query */
geoQuery.on("key_entered", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire enter driver, id ' + vehicleId + ', on location ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:addMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Moves vehicles markers on the map when their location within the query changes */
geoQuery.on("key_moved", function(vehicleId, vehicleLocation) {
Ti.API.info('Geofire move driver, id ' + vehicleId + ', moved to : ' + vehicleLocation);
var latitude = vehicleLocation[0];
var longitude = vehicleLocation[1];
Ti.App.fireEvent('fbController:moveMarker', {
id : vehicleId,
latitude : latitude,
longitude : longitude
});
});
/* Removes vehicle markers from the map when they exit the query */
geoQuery.on("key_exited", function(vehicleId) {
Ti.API.info('Geofire exited driver, id ' + vehicleId);
Ti.App.fireEvent('fbController:removeMarker', {
id : vehicleId
});
});
});
</script>
</body>
</html>
then on the View window we add the html to the container view
var webview = Ti.UI.createWebView({
url: Ti.Filesystem.resourcesDirectory + '/webview/firebase/index.html',
width: 0,
height: 0,
top: 0,
left: 0,
visible: false
});
webview.addEventListener('load', function() {
Ti.App.fireEvent('firebase:init', {
latitude : latitude,
longitude : longitude
});
});
$.container.add(webview);
create some events to communicate with the Firebase Webview
var Map = require('ti.map');
var mapview;
var annotations = [];
Ti.App.addEventListener('fbController:addMarker', function(e) {
Ti.API.info('Firebase add marker: ' + e.id);
annotations[e.id] = Map.createAnnotation({
latitude: e.latitude,
longitude: e.longitude,
image: '/images/icon-car.png'
});
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.addAnnotation(annotations[e.id]);
} else {
}
});
Ti.App.addEventListener('fbController:moveMarker', function(e) {
Ti.API.info('Firebase move marker: ' + e.id);
annotations[e.id].setLatitude(e.latitude);
annotations[e.id].setLongitude(e.longitude);
});
Ti.App.addEventListener('fbController:removeMarker', function(e) {
Ti.API.info('Firebase remove marker: ' + e.id);
if (Ti.App.Properties.getBool('locationEnabled') == true) {
mapview.removeAnnotation(annotations[e.id]);
delete annotations[e.id];
}
});
Anything you need can ask me, I am using this on an App and is working good, try to improving everyday but with this setup we did the job :), hope this helps, greetings
I do it as this way in my Android app:
Install module ln.vanvianen.android.gcm
Create instance in alloy.js: var FCM = require('actions/gcm');// pub/sub
In app/lib/actions/gcm.js create instance of module and logic to interact with fcm.
As I use promises on gcm.js, link bluebird library in alloy.js: var Promise = require('bluebird/bluebird');
Run my app: appc run -p android -T device
To test run CURL command or use firebase notification console: https://console.firebase.google.com/project/your-project-name/notification
Firebase Notification Console example
Works for me with: sdk-version 5.5.0.GA
I'm trying to include the vis.js library into my Meteor application. I have the library included and I'm rendering the page without errors, however, the vis.js timeline is rendering with only horizontal lines, and no objects.
I am definitely populating my dataset as I have confirmed it via console.
Here is my code.
Template.events_timeline.rendered = function () {
drawTimeline();
};
function drawTimeline(){
var container = document.getElementById('timeline');
var event = Events.find();
if (event.count() === 0) {
console.log('found no events');
return;
}
data = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var i = 1;
event.forEach(function (ev) {
data.add([{id: i, content: ev.content, start: ev.startDate, end: ev.endDate}]);
i++;
});
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, data, options);
}
My template is as follows. Very basic.
<template name="events_timeline">
<div id="timeline"></div>
</template>
Result.
http://i.imgur.com/k2HyQb5.jpg
I was able to get the graph to render with data on it's own with the above code and some changes to the router, but I cannot seem to get the chart to work when embedding the chart template in, for example, a layout template.
The following router changes renders the chart correctly, with data from the Events collection.
this.route('events_timeline', {
path: '/timeline',
waitOn: function() {
return Meteor.subscribe('events');
},
notFoundTemplate:'data_not_found',
action: function() {
if(this.ready()) {
this.setLayout('events_timeline');
this.render();
} else {
this.setLayout('loading');
this.render('loading');
}
}
});
If I replace ...
this.setLayout('events_timeline');
... With ...
this.setLayout('layout');
... Then I still get the blank chart.
I think I'm missing something with how to correctly waitOn the data for a specific template.
Is there a way to get the results from Google Autocomplete API before it's displayed below the input? I want to show results from any country except U.S.A.
I found this question: Google Maps API V3 - Anyway to retrieve Autocomplete results instead of dropdown rendering it? but it's not useful, because the method getQueryPredictions only returns 5 elements.
This is an example with UK and US Results: http://jsfiddle.net/LVdBK/
Is it possible?
I used the jquery autocomplete widget and called the google methods manually.
For our case, we only wanted to show addresses in Michigan, US.
Since Google doesn't allow filtering out responses to that degree you have to do it manually.
Override the source function of the jquery autocomplete
Call the google autocompleteService.getQueryPredictions method
Filter out the results you want and return them as the "response" callback of the jquery autocomplete.
Optionally, if you need more detail about the selected item from Google, override the select function of the jquery autocomplete and make a call to Google's PlacesService.getDetails method.
The below assumes you have the Google api reference with the "places" library.
<script src="https://maps.googleapis.com/maps/api/js?key=[yourKeyHere]&libraries=places&v=weekly" defer></script>
var _autoCompleteService; // defined globally in script
var _placesService; // defined globally in script
//...
// setup autocomplete wrapper for google places
// starting point in our city
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng('42.9655426','-85.6769166'),
new google.maps.LatLng('42.9655426','-85.6769166'));
if (_autoCompleteService == null) {
_autoCompleteService = new google.maps.places.AutocompleteService();
}
$("#CustomerAddress_Street").autocomplete({
minLength: 2,
source: function (request, response) {
if (request.term != '') {
var googleRequest = {
input: request.term,
bounds: defaultBounds,
types: ["geocode"],
componentRestrictions: { 'country': ['us'] },
fields: ['geometry', 'formatted_address']
}
_autoCompleteService.getQueryPredictions(googleRequest, function (predictions) {
var michiganOnly = new Array(); // array to hold only addresses in Michigan
for (var i = 0; i < predictions.length; i++) {
if (predictions[i].terms.length > 0) {
// find the State term. Could probably assume it's predictions[4], but not sure if it is guaranteed.
for (var j = 0; j < predictions[i].terms.length; j++) {
if (predictions[i].terms[j].value.length == 2) {
if (predictions[i].terms[j].value.toUpperCase() == 'MI') {
michiganOnly.push(predictions[i]);
}
}
}
}
}
response(michiganOnly);
});
}
},
select: function (event, ui) {
if (ui != null) {
var item = ui.item;
var request = {
placeId: ui.item.place_id
}
if (_placesService == null) {
$("body").append("<div id='GoogleAttribution'></div>"); // PlacesService() requires a field to put it's attribution image in. For now, just put on on the body
_placesService = new google.maps.places.PlacesService(document.getElementById('GoogleAttribution'));
}
_placesService.getDetails(request, function (result, status) {
if (result != null) {
const place = result;
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" + place.name + "'");
return;
}
else {
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
// do something with Lat/Lng
}
}
});
}
}
}).autocomplete("instance")._renderItem = function (ul, item) {
// item is the prediction object returned from our call to getQueryPredictions
// return the prediction object's "description" property or do something else
return $("<li>")
.append("<div>" + item.description + "</div>")
.appendTo(ul);
};
$("#CustomerAddress_Street").autocomplete("instance")._renderMenu = function (ul, items) {
// Google's terms require attribution, so when building the menu, append an item pointing to their image
var that = this;
$.each(items, function (index, item) {
that._renderItemData(ul, item);
});
$(ul).append("<li class='ui-menu-item'><div style='display:flex;justify-content:flex-end;'><img src='https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png' /></div></li>")
}