i have this class with a few methods more code here JS Bin
var Maps = (function () {
function Maps() {
}
Maps.prototype.getCoord = function () {
navigator.geolocation.getCurrentPosition(this.onPositionSuccess, this.onPositionError);
};
Maps.prototype.getWatchCoord = function () {
var options = { enableHighAccuracy: true, timeout: 3000 };
navigator.geolocation.watchPosition(this.onWatchSuccess, this.onWatchError, options);
};
Maps.prototype.onPositionSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchError = function (error) {
console.log(error.code);
};
Maps.prototype.onPositionError = function (error) {
console.log(error.code);
};
return Maps;
})();
var maps = new Maps();
maps.getCoord();
what i am trying to do is if getCoord() is a success then do a call to getWatchCoord() and compare the latitude and longitude. If they are the same don't run getWatchCoord()
Im trying to do this inside that Maps class if possible.
I've tried a few ways but it seems i cant call getWatchCoord() inside onPositionSuccess()
not i can set var x = navigator.geolocation.getCurrentPosition.... and then return pos; inside the success callback <- it wont return anything
Any ideas?
Are you using jQuery? If you are, then do this:
var Maps = (function () {
function Maps() {
}
Maps.prototype.getCoord = function () {
navigator.geolocation.getCurrentPosition($.proxy(this.onPositionSuccess, this), $.proxy(this.onPositionError, this));
};
Maps.prototype.getWatchCoord = function () {
var options = { enableHighAccuracy: true, timeout: 3000 };
navigator.geolocation.watchPosition($.proxy(this.onWatchSuccess, this), $.proxy(this.onWatchError, this), options);
};
Maps.prototype.onPositionSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
//call getWatchCoord
this.getWatchCoord();
};
Maps.prototype.onWatchSuccess = function (position) {
var pos = {
'latitude' : position.coords.latitude,
'longitude' : position.coords.longitude
};
console.log(pos);
};
Maps.prototype.onWatchError = function (error) {
console.log(error.code);
};
Maps.prototype.onPositionError = function (error) {
console.log(error.code);
};
return Maps;
})();
var maps = new Maps();
maps.getCoord();
'this' will be global when entering the success callback if you do not pass a callback function that is scope with the right 'this' which is why I used $.proxy above. Now this is untested so I do not know what other problems you have here.
Related
I have the following code which is responsible for the geographical location of latitude, longitude and the map of where one is:
<html>
<head>
<title>javascript-mobile-desktop-geolocation With No Simulation with Google Maps</title>
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<style>
body {font-family: Helvetica;font-size:11pt;padding:0px;margin:0px}
#title {background-color:#e22640;padding:5px;}
#current {font-size:10pt;padding:5px;}
</style>
</head>
<body onload="initialiseMap();initialise()">
<h1>location GPS</h1>
<div id="current">Initializing...</div>
<div id="map_canvas" style="width:320px; height:350px"></div>
<script src="js/geoPosition.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialiseMap()
{
var myOptions = {
zoom: 4,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function initialise()
{
if(geoPosition.init())
{
document.getElementById('current').innerHTML="Receiving...";
geoPosition.getCurrentPosition(showPosition,function(){document.getElementById('current').innerHTML="Couldn't get location"},{enableHighAccuracy:true});
}
else
{
document.getElementById('current').innerHTML="Functionality not available";
}
}
function showPosition(p)
{
var latitude = parseFloat( p.coords.latitude );
var longitude = parseFloat( p.coords.longitude );
document.getElementById('current').innerHTML="latitude=" + latitude + " longitude=" + longitude;
var pos=new google.maps.LatLng( latitude , longitude);
map.setCenter(pos);
map.setZoom(14);
var infowindow = new google.maps.InfoWindow({
content: "<strong>yes</strong>"
});
var marker = new google.maps.Marker({
position: pos,
map: map,
title:"You are here"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</body>
</html>
the file geoPosition.js:
var bb = {
success: 0,
error: 0,
blackberryTimeoutId : -1
};
function handleBlackBerryLocationTimeout()
{
if(bb.blackberryTimeoutId!=-1) {
bb.error({ message: "Timeout error",
code: 3
});
}
}
function handleBlackBerryLocation()
{
clearTimeout(bb.blackberryTimeoutId);
bb.blackberryTimeoutId=-1;
if (bb.success && bb.error) {
if(blackberry.location.latitude==0 && blackberry.location.longitude==0) {
//http://dev.w3.org/geo/api/spec-source.html#position_unavailable_error
//POSITION_UNAVAILABLE (numeric value 2)
bb.error({message:"Position unavailable", code:2});
}
else
{
var timestamp=null;
//only available with 4.6 and later
//http://na.blackberry.com/eng/deliverables/8861/blackberry_location_568404_11.jsp
if (blackberry.location.timestamp)
{
timestamp = new Date( blackberry.location.timestamp );
}
bb.success( { timestamp: timestamp ,
coords: {
latitude: blackberry.location.latitude,
longitude: blackberry.location.longitude
}
});
}
//since blackberry.location.removeLocationUpdate();
//is not working as described http://na.blackberry.com/eng/deliverables/8861/blackberry_location_removeLocationUpdate_568409_11.jsp
//the callback are set to null to indicate that the job is done
bb.success = null;
bb.error = null;
}
}
var geoPosition=function() {
var pub = {};
var provider=null;
var u="undefined";
var ipGeolocationSrv = 'http://freegeoip.net/json/?callback=JSONPCallback';
pub.getCurrentPosition = function(success,error,opts)
{
provider.getCurrentPosition(success, error,opts);
}
pub.jsonp = {
callbackCounter: 0,
fetch: function(url, callback) {
var fn = 'JSONPCallback_' + this.callbackCounter++;
window[fn] = this.evalJSONP(callback);
url = url.replace('=JSONPCallback', '=' + fn);
var scriptTag = document.createElement('SCRIPT');
scriptTag.src = url;
document.getElementsByTagName('HEAD')[0].appendChild(scriptTag);
},
evalJSONP: function(callback) {
return function(data) {
callback(data);
}
}
};
pub.confirmation = function()
{
return confirm('This Webpage wants to track your physical location.\nDo you allow it?');
};
pub.init = function()
{
try
{
var hasGeolocation = typeof(navigator.geolocation)!=u;
if( !hasGeolocation ){
if( !pub.confirmation() ){
return false;
}
}
if ( ( typeof(geoPositionSimulator)!=u ) && (geoPositionSimulator.length > 0 ) ){
provider=geoPositionSimulator;
} else if (typeof(bondi)!=u && typeof(bondi.geolocation)!=u ) {
provider=bondi.geolocation;
} else if ( hasGeolocation ) {
provider=navigator.geolocation;
pub.getCurrentPosition = function(success, error, opts)
{
function _success(p) {
//for mozilla geode,it returns the coordinates slightly differently
var params;
if(typeof(p.latitude)!=u) {
params = {
timestamp: p.timestamp,
coords: {
latitude: p.latitude,
longitude: p.longitude
}
};
} else {
params = p;
}
success( params );
}
provider.getCurrentPosition(_success,error,opts);
}
} else if(typeof(window.blackberry)!=u && blackberry.location.GPSSupported) {
// set to autonomous mode
if(typeof(blackberry.location.setAidMode)==u) {
return false;
}
blackberry.location.setAidMode(2);
//override default method implementation
pub.getCurrentPosition = function(success,error,opts)
{
//passing over callbacks as parameter didn't work consistently
//in the onLocationUpdate method, thats why they have to be set outside
bb.success = success;
bb.error = error;
//function needs to be a string according to
//http://www.tonybunce.com/2008/05/08/Blackberry-Browser-Amp-GPS.aspx
if(opts['timeout']) {
bb.blackberryTimeoutId = setTimeout("handleBlackBerryLocationTimeout()",opts['timeout']);
} else {
//default timeout when none is given to prevent a hanging script
bb.blackberryTimeoutId = setTimeout("handleBlackBerryLocationTimeout()",60000);
}
blackberry.location.onLocationUpdate("handleBlackBerryLocation()");
blackberry.location.refreshLocation();
}
provider = blackberry.location;
} else if ( typeof(Mojo) !=u && typeof(Mojo.Service.Request)!="Mojo.Service.Request") {
provider = true;
pub.getCurrentPosition = function(success, error, opts)
{
parameters = {};
if( opts ) {
//http://developer.palm.com/index.php?option=com_content&view=article&id=1673#GPS-getCurrentPosition
if (opts.enableHighAccuracy && opts.enableHighAccuracy == true ){
parameters.accuracy = 1;
}
if ( opts.maximumAge ) {
parameters.maximumAge = opts.maximumAge;
}
if (opts.responseTime) {
if( opts.responseTime < 5 ) {
parameters.responseTime = 1;
} else if ( opts.responseTime < 20 ) {
parameters.responseTime = 2;
} else {
parameters.timeout = 3;
}
}
}
r = new Mojo.Service.Request( 'palm://com.palm.location' , {
method:"getCurrentPosition",
parameters:parameters,
onSuccess: function( p ){
success( { timestamp: p.timestamp,
coords: {
latitude: p.latitude,
longitude: p.longitude,
heading: p.heading
}
});
},
onFailure: function( e ){
if (e.errorCode==1) {
error({ code: 3,
message: "Timeout"
});
} else if (e.errorCode==2){
error({ code: 2,
message: "Position unavailable"
});
} else {
error({ code: 0,
message: "Unknown Error: webOS-code" + errorCode
});
}
}
});
}
}
else if (typeof(device)!=u && typeof(device.getServiceObject)!=u) {
provider=device.getServiceObject("Service.Location", "ILocation");
//override default method implementation
pub.getCurrentPosition = function(success, error, opts){
function callback(transId, eventCode, result) {
if (eventCode == 4) {
error({message:"Position unavailable", code:2});
} else {
//no timestamp of location given?
success( { timestamp:null,
coords: {
latitude: result.ReturnValue.Latitude,
longitude: result.ReturnValue.Longitude,
altitude: result.ReturnValue.Altitude,
heading: result.ReturnValue.Heading }
});
}
}
//location criteria
var criteria = new Object();
criteria.LocationInformationClass = "BasicLocationInformation";
//make the call
provider.ILocation.GetLocation(criteria,callback);
}
} else {
pub.getCurrentPosition = function(success, error, opts) {
pub.jsonp.fetch(ipGeolocationSrv,
function( p ){ success( { timestamp: p.timestamp,
coords: {
latitude: p.latitude,
longitude: p.longitude,
heading: p.heading
}
});});
}
provider = true;
}
}
catch (e){
if( typeof(console) != u ) console.log(e);
return false;
}
return provider!=null;
}
return pub;
}();
In Internet explorer works correctly for me, but when I try it on Google Chrome it shows me the location of another city near my region. I'd like to be able to solve it, and let me show my correct location in google chrome.
I noticed that in internet explorer it takes a few seconds more to load to visualize the location, perhaps in the google chrome lacks some pre-load cleaning or some compatibility.
In Internet Explorer it is right:
but in google chrome the location shows me wrong:
My objective is to be able to obtain my location with the map in an exact way in different browsers with javascript or some type code on the client side.
If anyone knows, of course, I appreciate your attention.
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I have class below when I call printData I get this.collection is undefined.
How do I access this.collection from the prototype inside printData()? Or do i need to change the class structure. Actually the object returns function which intern returns object in hierarchy.
Thanks in advance!
Sample Class:
var DbProvider = (function () {
function DbProvider(db) {
var that = this; // create a reference to "this" object
that.collection = db;
}
DbProvider.prototype.create = function () {
return {
action: function () {
var y = {
printData: function () {
alert('Hello ' + this.collection.Name);
}
};
return y;
}
};
};
return DbProvider;
})();
Usage:
var a = new DbProvider({ "Name": "John" });
a.create().action().printData();
You could save the this reference and bind it to the printData function
var DbProvider = (function () {
function DbProvider(db) {
var that = this; // create a reference to "this" object
that.collection = db;
}
DbProvider.prototype.create = function () {
var self = this;
return {
action: function () {
var y = {
printData: function () {
alert('Hello ' + this.collection.Name);
}.bind(self)
};
return y;
}
};
};
return DbProvider;
})();
var a = new DbProvider({ "Name": "John" });
a.create().action().printData();
Or you could refactor a bit and move that to the outer scope of DbProvider and use that in printData
var DbProvider = (function () {
var that;
function DbProvider(db) {
that = this; // create a reference to "this" object
that.collection = db;
}
DbProvider.prototype.create = function () {
return {
action: function () {
var y = {
printData: function () {
alert('Hello ' + that.collection.Name);
}
};
return y;
}
};
};
return DbProvider;
})();
var a = new DbProvider({ "Name": "John" });
a.create().action().printData();
just need to keep track of the this pointer correctly, like this
var DbProvider = (function() {
function DbProvider(db) {
this.collection = db;
}
DbProvider.prototype.create = function() {
var self = this;
return {
action: function() {
var y = {
printData: function() {
alert('Hello ' + self.collection.Name);
}
};
return y;
}
};
};
return DbProvider;
})();
let dbProvider = new DbProvider({
Name: "test"
});
dbProvider.create().action().printData();
Keeping ES5 syntax and the call structure a solution would be:
var DbProvider = (function () {
function DbProvider(db) {
var that = this; // create a reference to "this" object
that.collection = db;
}
DbProvider.prototype.create = function () {
var that = this;
return {
action: function() {
var y = {
printData: function () {
console.log('Hello ' + that.collection.Name);
}
};
return y;
}
};
};
return DbProvider;
})();
Definitely not elegant but it works :)
If you do not want to change your structure, you can achieve this behavior if you change you functions to arrow functions.
var DbProvider = (function () {
function DbProvider(db) {
var that = this; // create a reference to "this" object
that.collection = db;
}
DbProvider.prototype.create = function() {
return {
action: () => {
var y = {
printData: () => {
alert('Hello ' + this.collection.Name);
}
};
return y;
}
};
};
return DbProvider;
})();
The way you are creating this "class" is definitely non standard. Let me know if you want an example of how to better structure it.
I'm having a hard time to get promises to work with the right this scope inside prototypes.
Here is my code:
'use strict';
angular.module('testApp').factory('UrlSearchApi',
function($resource, URL_SEARCH_API, PAGE_SIZE, $q){
var resource = $resource(URL_SEARCH_API);
resource.Scroll = function () {
return this.reset();
};
resource.Scroll.prototype.reset = function () {
this.visibleItems = [];
this.allItems = [];
this.busy = null;
return this;
};
resource.Scroll.prototype.fetch = function(query){
var params = {};
if(query) { params.q = query; }
return resource.query(params).$promise;
};
resource.Scroll.prototype.loadAllItems = function (results) {
var d = $q.defer();
angular.forEach(results, function (result, i) {
this.allItems.push(result);
if(i === results.length - 1 ) { d.resolve(); }
}, this);
return d.promise;
};
resource.Scroll.prototype.loadVisibleItems = function () {
var length = this.visibleItems.length,
offset = parseInt(length / PAGE_SIZE),
start = PAGE_SIZE * offset,
end = start + PAGE_SIZE,
subset = this.allItems.slice(start, end),
d = $q.defer();
angular.forEach(subset, function (item, i) {
this.visibleItems.push(item);
if(i === subset.length - 1 ) { d.resolve(); }
}, this);
return d.promise;
};
resource.Scroll.prototype.nextPage = function (query) {
if(this.busy) { return; }
console.log('nextPage ', query);
var tasks = [],
that = this;
if(!this.allItems.length) {
this.reset();
this.busy = true;
return this.fetch(query)
.then(this.loadAllItems)
.then(this.loadVisibleItems)
.finally(function () {
this.busy = false;
});
} else {
this.busy = true;
return this.loadVisibleItems().finally(function () {
this.busy = false;
});
}
};
return resource;
});
Whenever I run the tests I get
describe('#nextPage', function () {
var scroll;
describe('when there is NO search term (show all)', function () {
beforeEach(function (done) {
scroll = new UrlSearchApi.Scroll();
$httpBackend.expectGET('/policy/search')
.respond(200, arrayGenerator(123));
scroll.nextPage().then(done);
$httpBackend.flush();
$rootScope.$apply();
});
it('should load all the items in all items variable', function () {
expect(scroll.allItems.length).toBe(123);
});
});
});
I get the following error:
TypeError: 'undefined' is not an object (evaluating 'this.allItems')
I now that $q in strict mode sets the this inside then to undefined. I tried using bind(this) in multiple places but not luck... Any ideas?
I've already answered a question like this here.
Just let me know in comments if you still have questions.
Upd. Try to update your resource.Scroll.prototype.nextPage method like this:
if(!this.allItems.length) {
this.reset();
this.busy = true;
return this.fetch(query)
.then(this.loadAllItems.bind(this)) //bind here
.then(this.loadVisibleItems.bind(this)) // here
.finally(function () {
this.busy = false;
}.bind(this)); //and here
But keep in mind - when you pass a function as a callback to a then or to forEach e.t.c it'll lose this context. So, use bind exactly when you pass the function which uses this syntax as a callback.
I would like to know what are the common approach to make this concept works:
function Abc () {
var beforeMethod = function (e) {
console.log(e);
};
this.before('bob ana', beforeMethod);
}
Abc.prototype.ana = function () { console.log('ana'); }
Abc.prototype.bob = function () { console.log('bob'); }
Abc.prototype.maria = function () { console.log('maria'); }
//
var abc = new Abc();
abc.ana();
It's supposed to call beforeMethod before bob or ana is called.
Quickly :
need to be tested and securised, but i think it do the trick !
I haven't understood what your e mean so i put the called method name in it !
var el = document.getElementById('debug');
var $l = function(val) {
console.log(val);
el.innerHTML = el.innerHTML + '<div>' + val + '</div>';
};
//___________________________________________________________________
var Before = function( methods , func , context){
methods.split(' ').map(function(m){
var ori = context[m];
if(ori){
context[m] = function(){
func.call(context , m);
return ori.apply(context , arguments);
};
}
});
};
var Abc = function () {
var beforeMethod = function (e) {
$l('from beforeMethod : ' + e);
};
Before('bob ana ', beforeMethod , this);
};
Abc.prototype.ana = function () { $l('from ana '); };
Abc.prototype.bob = function () { $l('from bob '); };
Abc.prototype.maria = function () { $l('from maria '); };
var abc = new Abc();
abc.ana();
abc.maria();
abc.bob();
<div id='debug'>Debug
<div>
I think the way to do this is to save the old prototype function in a property.
function Abc() {
this.oldana = this.prototype.ana;
this.oldbob = this.prototype.bob;
this.prototype.ana = function(e) {
console.log(e);
this.oldana();
}
this.prototype.bob = function(e) {
console.log(e);
this.oldbob();
}
}
I am having trouble when trying to fix the vertical bands issue on Google Maps API for javascript.
The fact is that I only have access to the jQuery that is loaded automatically by the CRM.
In fact, I need to set the max-width property to none for all the img tags inside my Map div (#map-canvas).
This works if I edit the HTML code directly from Firefox Tools, but I can't find a way to have this done automatically.
The code I have access to looks like this:
var mymap;
jQuery.Class("MapView",{
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
});
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});
I tried a bunch of other online tutorials, but I've not been able to solve this.
Does anyone know a way to pull me out of this?
Thanks,
Riccardo
EDIT:
So, here's my complete code up to now:
var mymap;
var mymap_markers = [];
jQuery.Class("MapView",{
registerOnChangeEventOfSourceModule: function () {
jQuery('#sourceModule').on('change', function (e) {
jQuery('#picklistFields').find('option').remove().end().append('<option value="--">--</option>').val('--');
var element = jQuery(e.currentTarget);
var params = {};
var sourceModule = element.val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "changeModule",
'sourceModule': sourceModule
};
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result.options, function (i, item) {
var o = new Option(item, i);
jQuery(o).html(item);
jQuery("#picklistFields").append(o);
jQuery("#picklistFields").trigger('liszt:updated');
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
registerOnChangeEventOfCustomView: function () {
jQuery('#picklistFields').on('change', function (e) {
var element = jQuery(e.currentTarget);
var params = {};
var cvid = element.val();
var module = jQuery('#sourceModule').val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "getMarkers",
'sourceModule': module,
'cvid': cvid
};
for (var i = 0; i < mymap_markers.length; i++) {
mymap_markers[i].setMap(mymap);
}
mymap_markers = [];
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result, function (i, item) {
var myLatlng = new google.maps.LatLng(item['coords']['lat'],item['coords']['lng']);
var popupcontentCV = "<table class=\"table table-condensed table-striped table-bordered\"><tr><td colspan=\"2\"><strong>"+item['title']+"</strong></td></tr>";
jQuery.each(item['data'], function (label, value){
popupcontentCV += "<tr><td>"+app.vtranslate(label,module)+"</td><td>"+value+"</td></tr>";
});
popupcontentCV += "</table>";
var infowindow = new google.maps.InfoWindow({
content: popupcontentCV,
maxWidth: 315,
maxHeight: 550
});
var marker = new google.maps.Marker({
position: myLatlng,
map: mymap,
title: item['data']['title']
});
mymap_markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});
google.maps.event.addListener(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', 'none');
});
/*
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});*/
Try either a CSS rule or with jQuery:
CSS
#map-canvas img {
max-width: 100%;
}
jQuery
google.maps.event.addListenerOnce(map, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
I am not sure whether you should set the max-width to none or 100%. Try both. And maybe try to write your CSS rule with !important if it doesn't work right away.
For the jQuery version, I added the css() function within the map idle event listener (therefore you are sure the map is loaded and ready).
Edit
I can't test your code but you can try this way:
jQuery(document).ready(function () {
mymap = MapView.initialize();
google.maps.event.addListenerOnce(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});