I am trying to call an api with location to display a GeoJson object on the bing map. I wrote the code below but nothing gets displayed on the map and no errors also.
Could you please see anything wrong with this code?
var api = 'https://api/locations';
Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
Microsoft.Maps.GeoJson.readFromUrl(api,
function (shapes) {
//Add the shape(s) to the map.
map.entities.push(shapes);
}, 'callback');
});
Thank you
Does the service you are calling wrap the response with JavaScript? Your code has 'callback' which is telling Bing Maps to make a JSONP request which will append &callback=[some internal callback function] to the request. If your service doesn't use JSONP and is hosted on the same domain or is on a CORs enabled endpoint, remove the callback parameter from your code.
Related
i need your help. I`m using bing maps tile source.
const tileSource = new Microsoft.Maps.TileSource({
uriConstructor: 'someapi',
enableCors: true,
minZoom,
maxZoom
});
I'm using REST api and it needs header for security. i can`t understand how can i set a header in uri constructor if it only needs string. I know that i can use callback, but it is also return only string. Any help?
Tile layers in Bing Maps do not expose a way to set the header on tile requests.
I have a module that uses google maps to make a map, get the users location and place a marker on the map where they are. I wanted a custom animated marker so I had to make a factory initializing a custom OverlayView Class. I also wanted the map loaded asynchronously so I created a factory like this
to handle loading google maps.
I can load the map fine by doing this:
initializer.gMapReady.then(function(){
//call service method to make map
});
But I dont know how to use my initializer for my OverlayView factory that looks like this:
.factory('locMarker', function() {
LocationMarker.prototype = new google.maps.OverlayView(); // This returns the error, google is not defined
function LocationMarker(opts) {
this.setValues(opts);
}
LocationMarker.prototype.draw = function() {
//
// Code for drawing the marker on the map
//
}
};
return LocationMarker;
})
Whenever I load the page the map shows up fine but my custom marker never displays. I get a reference error, google is not defined, that points to the line LocationMarker.prototype = new google.maps.OverlayView(); If I don't lazy load google maps and just add the script to the index page everything runs fine.
Is there a way for me to call my maps initializer from within the locMarker factory so that google maps is loaded before it tries to construct the class?
Update:
As estus mentioned in the comments, I could use a resolver in the states/routes but I am trying to make this module not require that if possible.
When trying to retrieve the history message in the on event , the loading time is too long.
The spinner show and hides too fast. But the message is not yet loaded.
How can we calculate or get the exact time to make the history load?
$scope.limit = 100
PubNub.ngHistory( {
channel : $scope.channel,
limit : $scope.limit
});
$rootScope.$on(PubNub.ngMsgEv($scope.channel), function(ngEvent, payload) {
**ActivityIndicator.showSpinner();**
$scope.$apply(function(){
$scope.messages.push(payload.message);
});
$(".messages-wrap").scrollTop($(".messages-wrap")[0].scrollHeight);
**ActivityIndicator.hideSpinner();**
});
Thank you so much for trying out the PubNub AngularJS API! I'll try
to provide some help. There is a little bit of a difference between
the PubNub JS API and the PubNub AngularJS API in this case.
Background
Behind the scenes, The PubNub JS API history() method returns instantly,
and invokes the callback when the given "page" of history is retrieved.
The AngularJS API, in its quest for simplifying this interaction, does not
take a callback - instead, it calls $rootScope.$broadcast() for each message
in the returned history payload.
In this version of the AngularJS API, it's not currently possible to "get inside"
the 'ngHistory' method to provide a callback. However, there are 2 solutions
available to you: one has always been there, and the second one I just added
based on your feedback.
Solutions
1) See codepen here (http://codepen.io/sunnygleason/pen/afqmh). There is an "escape hatch" in the PubNub AngularJS API that lets you call the JS API directly for advanced use cases, called jsapi. You can call PubNub.jsapi.history({channel:theChannel,limit:theLimit,callback:theCallback}). The only thing to keep in mind is that this will not fire message events into the $rootScope, and you will need to call $rootScope.$apply() or $scope.$apply() to make sure any changes you make to $scope within the callback function are propagated properly to the view.
2) See codepen here (http://codepen.io/sunnygleason/pen/JIsek). If you prefer a promise-based approach, I just added an ngHistoryQ() function to version 1.2.0-beta.4 of the PubNub AngularJS API. This will let you write code like:
PubNub.ngHistoryQ({channel:theChannel,limit:theLimit}).then(function(payload) {
payload[0].forEach(function(message) {
$scope.messages.push(message);
}
});
You can install the latest version of the AngularJS SDK using 'bower install pubnub-angular'.
With either of these solutions, you should be able to display and hide your spinner
accordingly. The only difference is in #2, you'll want to write code like this:
var historyPromise = PubNub.ngHistoryQ({channel:theChannel,limit:theLimit});
showSpinner();
historyPromise.then(function(payload) {
// process messages from payload[0] array
hideSpinner();
});
Does this help? Let me know what you think. Thank you again so much for trying this out.
Can you programmatically turn the spinner on at history call time, and programmatically disable it at callback time?
I want to intercept console log message from AngularJS and display them in a div on the page. I need this in order to debug ajax traffic in a PhoneGap app.
This is an example of the kind of errors I want to capture:
I tried this Showing console errors and alerts in a div inside the page but that does not intercept Angular error messages.
I also tried the solution gameover suggested in the answers. No luck with that either. Apparently $http is handling error logging differently.
I guess the answer you tried has the right idea but you're overriding the wrong methods. Reading here I can see angularJs uses $log instead of console.log, so to intercept you can try to override those.
Something like this:
$scope.$log = {
error: function(msg){document.getElementById("logger").innerHTML(msg)},
info: function(msg){document.getElementById("logger").innerHTML(msg)},
log: function(msg){document.getElementById("logger").innerHTML(msg)},
warn: function(msg){document.getElementById("logger").innerHTML(msg)}
}
Make sure to run that after importing angular.js.
EDIT
Second guess, override the consoleLog method on the LogProvider inner class on angular.js file:
function consoleLog(type) {
var output ="";
//arguments array, you'll need to change this accordingly if you want to
//log arrays, objects etc
forEach(arguments, function(arg) {
output+= arg +" ";
});
document.getElementById("logger").innerHTML(output);
}
I've used log4javascript for this purpose. I create the log object via
var log = log4javascript.getLogger('myApp')
log.addAppender(new log4javascript.InPageAppender());
I then use this in a value dependency, and hook into it where needed (e.g. http interceptor).
A more lightweight approach might be to use $rootScope.emit and then have a component on your main page which prepends these log messages to a visible div, but this will require you to change all your calls to console.log (or redefine the function in your js).
I think that this message is not even displayed from AngularJS. It looks like an exception which has not been caught in any JavaScript (angular.js just appears on top of your stack because that's the actual location where the HTTP request is being sent).
Take a look at ng.$exceptionHandler. That should be the code you seem to be interested in. If not, take a quick web search for „JavaScript onerror“ which should tell you how to watch for these kinds of errors.
I would rather user an $http interceptor.
Inside the responseError function, you can set a property on a service that will be exposed to the div's scope.
My question is similar but not the same as this one.
Here is my fiddle
I'm working with a public resource. I don't think it is jsonp. (the flag they use is pjson which i think, to them , means pretty json).
If i have the method as JSONP it will call out and return but then i get an invalid label error. If i have the method set as GET i get the OPTIONS error in firebug (which i typically associate with cross-domain violations).
Oddly, my app calls out to other external resources without issue - so i'm not sure how it is getting that done and can't do this. Am I SOL if i have no control over this outside resource?
$scope.serviceDesc = layerRes.get();
It looks like you can make JSONP calls to this service you're using by specifying a callback=JSON_CALLBACK in the url parameters when using the $http service, or in your case the $resource service
Have a look at this example that I've written up: http://plnkr.co/edit/7EE85Mr8bZBUroQTp5A9?p=preview
$http.jsonp('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/0?f=json&callback=JSON_CALLBACK')
.success(function(data) {
console.log('The data from their server:');
console.log(data);
$scope.worldPhysicalMap = data;
});
Converting this to use $resource shouldn't be much different.