i am using bing maps with asp .net. i want to track multiple users ( drivers ) . i found a demo on how to track a user in bing website but i didn't figure out how to track specific user with specific id. here is the code to track user
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, watchId, userPin;
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
credentials: ‘Your Bing Maps Key’
});
}
function StartTracking() {
//Add a pushpin to show the user's location.
userPin = new Microsoft.Maps.Pushpin(map.getCenter(), { visible: false });
map.entities.push(gpsPin);
//Watch the users location.
watchId = navigator.geolocation.watchPosition(UsersLocationUpdated);
}
function UsersLocationUpdated(position) {
var loc = new Microsoft.Maps.Location(
position.coords.latitude,
position.coords.longitude);
//Update the user pushpin.
userPin.setLocation(loc);
userPin.setOptions({ visible: true });
//Center the map on the user's location.
map.setView({ center: loc });
}
function StopTracking() {
// Cancel the geolocation updates.
navigator.geolocation.clearWatch(watchId);
//Remove the user pushpin.
map.entities.clear();
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div><br/>
<input type="button" value="Start Continuous Tracking" onclick="StartTracking()" />
<input type="button" value="Stop Continuous Tracking" onclick="StopTracking()"/>
</body>
</html>
The code you provided will show the user where they are on the map. If you want to see the location of multiple drivers on a map, you will need to capture the location of each driver from a device and get that data into a backend service, then have that backend service send the data to the frontend map canvas (i.e. Bing Maps). There are a lot of different ways to do this.
First you need to know how you are going to capture the drivers location. Two common methods:
A mobile app that uses the native geolocation APIs in the background and sends updates to the backend service.
A dedicated IoT device that is either connected to the vehicle or in the vehicle.
A really quick way to do this is to leverage Azure IoT hub for the backend service and IoT central for the frontend. Here is a reference architecture: https://learn.microsoft.com/en-us/azure/architecture/solution-ideas/articles/real-time-asset-tracking-mgmt-iot-central
Bing maps has an open-source project that leverages mobile devices and displays the data on a map: https://github.com/Microsoft/Bing-Maps-Fleet-Tracker
Related
I'm trying to obtain an access token for Google Analytics API.
After creating a project in the developers console and granting acess to the Analytics API I reached the "create credentials" step and created new credentials for a web application.
On these credentials I set the Javascript origins to http://localhost:8080 and also http://localhost:5000. Then I set authorized redirect URIs to http://localhost:8080/oauth2callback as well as http://localhost:5000/oauth2callback.
Then, when I attempt to authorize I'm asked to enter my clientId and secret, which I do, then new browser tab opens and I'm asked to choose an account and then after that select "Allow".
Then, when I click "Allow" I'm taken to this page:
I also tried creating credentials for an application type of "other" but the exact same thing happened.
I've found numerous posts on stack overflow about this but none of the answers were able to solve my problem. Not sure which other info to provide. I even tried clearing history and using different browsers but with no success.
How can I give my application authorization to Google Analytics using OAuth?
This issue has nothing to do with localhost or your redirect uris or JavaScript origins. The issue is that your code is not set up to handle the call back from the authentication server. It would have helped if you had posted your code so it will be hard to know what the problem might be.
You should check the official example here Hello analytics js tutorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics Reporting API V4</title>
<meta name="google-signin-client_id" content="<REPLACE_WITH_CLIENT_ID>">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Hello Analytics Reporting API V4</h1>
<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Replace with your view ID.
var VIEW_ID = '<REPLACE_WITH_VIEW_ID>';
// Query the API and print the results to the page.
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
I am trying to instantiate a Google Places Autocomplete input within an Angular 2 component. I use this code to do it:
loadGoogle() {
let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] });
let that = this
//add event listener to google autocomplete and capture address input
google.maps.event.addListener(autocomplete, 'place_changed', function() {
let place = autocomplete.getPlace();
that.place = place;
that.placesearch = jQuery('#pac-input').val();
});
autocomplete.addListener()
}
Normally, I believe, I would use the callback function provided by the Google API to ensure that it is loaded before this function runs, but I do not have access to it within a component's scope. I am able to load the autocomplete input 90% of the time, but on slower connections I sometimes error out with
google is not defined
Has anyone figured out how to ensure the Google API is loaded within a component before instantiating.
Not sure whether this will help, but I just use a simple script tag in my index.html to load Google API and I never get any error. I believe you do the same as well. I post my codes here, hope it helps.
Note: I use Webpack to load other scripts, except for Google Map API.
<html>
<head>
<base href="/">
<title>Let's Go Holiday</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Map -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
And then in your component:
...
declare var google: any;
export class SearchBoxComponent implements OnInit {
ngOnInit() {
// Initialize the search box and autocomplete
let searchBox: any = document.getElementById('search-box');
let options = {
types: [
// return only geocoding results, rather than business results.
'geocode',
],
componentRestrictions: { country: 'my' }
};
var autocomplete = new google.maps.places.Autocomplete(searchBox, options);
// Add listener to the place changed event
autocomplete.addListener('place_changed', () => {
let place = autocomplete.getPlace();
let lat = place.geometry.location.lat();
let lng = place.geometry.location.lng();
let address = place.formatted_address;
this.placeChanged(lat, lng, address);
});
}
...
}
I used it the same way as explained above but as per google page speed i was getting this suggestion,
Remove render-blocking JavaScript:
http://maps.googleapis.com/…es=geometry,places®ion=IN&language=en
So i changed my implementation,
<body>
<app-root></app-root>
<script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places®ion=IN&language=en" async></script>
</body>
/* Now in my component.ts */
triggerGoogleBasedFn(){
let _this = this;
let interval = setInterval(() => {
if(window['google']){
_this.getPlaces();
clearInterval(interval);
}
},300)
}
You can do one more thing, emit events once the value(google) is received,& trigger your google task
inside them.
I have a database in firebase and I want to make it public like https://publicdata-transit.firebaseio.com/sf-muni
What I see here they have a prefix "pulicdata", How do I get it?
A publicly accessible read-only dashboard, like the one you're referring to, is only available for apps managed by Firebase themselves. You cannot enable it on your own applications.
This won't do any formatting (you can make it pretty if you want), but this will take your snapshot and just put it up on the screen for anyone to see as long as you have your settings for read as true.
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('value', function(snapshot) {
displaySnapshot(snapshot.val());
});
function displaySnapshot(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
$('#displaySnapshotDiv')[0].scrollTop = $('#displaySnapshotDiv')[0].scrollHeight;
};
</script>
</body>
</html>
If you want it to be a little more readable, you could do something like:
<!-- language: lang-html -->
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
displaySnapshotNeatly(snapshot.val());
});
function displaySnapshotNeatly(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
};
</script>
</body>
</html>
Here is the second one working in JSFiddle: https://jsfiddle.net/lukeschlangen/rzfn45pz/
And here is the second one with your firebase data (please tell me the security settings for writing are set to something other than true?): https://jsfiddle.net/lukeschlangen/rzfn45pz/2/
It seems like you might want to do some formatting, but this is displaying all of the data.
The data can be available public if you change your database rules to true or use the auth token for authentication. But since you do not want to authenticate access, all you simply need to do is Make you access rules public
for more information check out: https://firebase.google.com/docs/reference/rest/database/
enter image description here
Good morning all,
I'm Danny, and I'm a Salesforce system admin and (very) junior developer currently trying to integrate Nokia's HERE maps into our system as it's public transport options are vastly superior to Google's. This is done in Salesforce with Visualforce. I've been successful in using our Enterprise id and key to call and display a route on a dynamic map, but am having some trouble with geocoding. I'm having some issues with the element below:
<head>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
position: absolute;
overflow:hidden;
width: 100%;
height: 100%;
}
#mapContainer {
width: 60%;
height: 95%;
left: 0;
top: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<script type="text/javascript">
nokia.Settings.set("app_id", "V6tmpXy6GHXqJWlaPVmh");
nokia.Settings.set("app_code", "XS4Tjj82QznkWAJJu0L3-g");
nokia.Settings.set("serviceMode", "cit");
(document.location.protocol == "https:") && nokia.Settings.set("secureConnection", "force");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.ContextMenu(),
],
});
var modes = [{
type: "fastest",
transportModes: ["car"],
trafficMode: "disabled"
}];
// GeoCode
nokia.places.search.manager.geoCode({
searchTerm : "{!Transport_order__c.From_Address__c}",
onComplete: onGeocodeComplete
});
// Post GeoCode
function onGeocodeComplete(data, requestStatus) {
var marker;
if (requestStatus === 'OK') {
alert('GEOCODE ENDED SUCCESSFULLY');
marker = new nokia.maps.map.StandardMarker(data.location.position);
map.objects.add(marker);
map.zoomTo(marker.getBoundingBox(), false);
if (map.get('zoomLevel') > 15) {
map.setZoomLevel(15);
}
} else if (requestStatus === 'ERROR') {
alert('GEOCODE FAILED.');
}
}
</script>
</body>
I read from a post on this site that the Enterprise version treats nokia.places.search etc. as an instance rather than a function to be called. This makes sense, as changing the URL to SE rather than EE seems to make the geocode request run fine, however our internal system rejects the response as it's not in HTTPS (which can be forced 'on' with Enterprise).
The issue I'm having is that I'm not familiar enough with Java to truly understand what the difference is, or rather, I don't know what to do with calling upon the instance. At present, the java console in Chrome is telling me that search is an undefined type error, which isn't helpful, and I can't find any further guidance anywhere I search! Can anyone help me out in differentiating between Enterprise/ Standard guidance on this?
Thanks!
The issue here is that there are two JavaScript APIs available, and in your case you need to be using the Enterprise Maps JS API not the public Maps JS API. The geocoding in the Enterprise Maps JS API (nokia.search.Manager) is different to the public offering and more flexible. The geocoding signature in the public Maps JS API (nokia.places.search.manager) is part of the places offering and is more restricted.
As an enterprise customer, the only documentation you’ll need is (pardon the pun) HERE
The associated set of examples can be found in the enterprise explorer
A geocoding example using the Enterprise Maps JS API can be found HERE, look at the code and note that it uses the nokia.search.Manager()
Currently Truck Routing is only available in the 6.2 enterprise routing API, whereas Public Transport routing is only available in the 7.2 routing API. This means that in order to use the public transport with the Enterprise Maps JS API, you’ll need use a nokia.maps.advrouting.Manager and contact the underlying rest service. An example of this can be found in the Community Examples
I am trying to create a company directory which will provide a link to an employees linkedin public profile, if the uses chooses to connect.
So on our employee profile page, the user can choose to link their linkedin account to their employee profile. We initiate an oAuth process and we retrieve their hashed linkedin id, which we then store. Great. Now the part that isn't working.
Based on their plugin example, i have this...
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: xxxxxxxxxxxx
authorize: false
</script>
<script type="text/javascript">
function INTEST() {
IN.API.Profile().ids("pU-LBvD_y0")
.fields(['id', 'firstName', 'lastName', 'picture-url', 'public-profile-url'])
.result(function (result) {
profile = result.values[0];
})
.error(function (errorResult) {
var i = 0;
});;
}
</script>
I receive all information except the public-profile-url.
Any help would be greatly appreciated.
I'm sure you have this figured out by now. But for the benefit of others:
When using the JavaScript API you must convert the profile field names from the dashed notation to studly caps. For example first-name becomes firstName. public-profile-url becomes publicProfileUrl
Reference the following API documentation at
http://developer.linkedinlabs.com/tutorials/jsapi_profile/