I'm stuck at this issue where I can't seem to assign a new value to the created object variable. See below:
// Vesselposition class
function vessel(name,ajaxName,dataUrl,pointLimit,polylineColor,iconUrl) {
this.name = name;
this.ajaxName = ajaxName;
this.dataUrl = dataUrl;
this.pointLimit = pointLimit;
this.polylineColor = polylineColor;
this.iconUrl = iconUrl;
// Global variables
this.lat=0;
this.lng=0;
this.latlng;
this.dateTime, this.vesselIcon, this.marker, this.polyline, this.localTemp, this.localWindSpeed, this.localWindDir;
this.countryName, this.countryCode, this.localTime, this.localSunrise, this.localSunset, this.countryFlag;
this.localTemp, this.localWindSpeed, this.localWindDir, this.myOptions, this.ib;
// Function gets position data
this.getData = function() {
$.when(
$.getJSON(this.dataUrl, { vessel: this.ajaxName, limit: this.pointLimit })
).done(function (data){
this.path = [];
// Create vessel icon for marker
this.vesselIcon = new google.maps.MarkerImage(this.iconUrl,
// This marker is 60 pixels wide by 58 pixels tall.
new google.maps.Size(60, 58),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is centered at 30,29 pixels.
new google.maps.Point(30, 29)
);
if (data.markers.length < 1) {
document.getElementById("map_canvas").innerHTML = "<h2>There was a problem obtaining vessel data, wait a couple of minutes and refresh your browser!</h2>";
} else {
for(i=0;i<data.markers.length;i++) {
// Assign lat,lng, id, dateTime and heading
this.lat = data.markers[i].marker.lat;
this.lng = data.markers[i].marker.lng;
What I want to accomplish is to assign this.lat and this.lng the coordinate values inside the for-loop. Later on, those values should be passed on to the getData method.
Please help guys! Been stuck on this for 3 hours searching the web!
Try this:
//keep a reference to this
var self = this;
// Function gets position data
this.getData = function() {
....
//use self here
self.lat=
I found a solution. By using jQuery's proxy function.. I got it to work.
// Function gets position data
this.getData = function() {
$.when(
$.getJSON(this.dataUrl, { vessel: this.ajaxName, limit: this.pointLimit })
).done($.proxy(function (data){
this.path = [];
),this}
Using the same class variables as first provided.. the key is to use $.proxy method in the .done function with the scope "this".
Related
I'm a french student in computering and I have to use Mapbox but since I create a class I'm stuck by this error.When I wasn't in a class it worked perfectly but now it's fully broken.And I saw on some topics it could come from safari but I already tested it on Mozilla and it still broken.
This is my class.
constructor() {
//Temporary array of currentMarkers
let currentMarkers=[];
let type ="";
//Create the map
mapboxgl.accessToken = 'private data';
this.mapbox = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 9 // starting zoom
});
//Add search bar from a plugin
let geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
placeholder: 'Saissisez une adresse', // Placeholder text for the search bar
marker: {
color: 'orange'
},
mapboxgl: mapboxgl
});
this.mapbox.addControl(geocoder);
const mbox = this;
this.mapbox.on("click",function(){
this.getcoordonates();
});
//Allow us to create marker just with a research
geocoder.on('result', function(e) {
//Deleting all current markers
if (currentMarkers!==null) {
for (let i = currentMarkers.length - 1; i >= 0; i--) {
currentMarkers[i].remove();
}
}
//Add the markers who come with the research
this.addMarker(e.result.center[0],e.result.center[1]);
// Delete the last marker who got placed
//currentMarkers[currentMarkers.length - 1].remove();
});
this.addPoint(2.333333 ,48.866667 ,"supervisor");
}
//split the JSON.stringify(e.lngLat.wrap()) to get the coordinates
async mysplit(m){
let z = m.split(',');
let x = z[0].replace("{\"lng\":","");
let g = z[1].replace("\"lat\":","");
let y = g.replace("}","");
await addMarker(x,y);
}
//Add a marker on click after the excution of mysplit() function
async addMarker(x,y) {
// tmp marker
let oneMarker= new mapboxgl.Marker()
.setLngLat([x,y])
.addTo(this.mbox);
currentMarkers.push(oneMarker);
}
// Get the coordinates and send it to split function
getcoordonates(){
mbox.on('click',function(e){
let m = JSON.stringify(e.lngLat.wrap());
this.mbox.mysplit(m);
});
}
addPoint(y,x,type)
{
let color ="";
let t = type;
if(t == "supervisor")
{
color = "grey";
}else if (t =="fieldworker") {
color = "red";
}else if (t == "intervention") {
color = "blue";
}else alert("Nous ne pouvons pas ajouter votre marker\nLatitude : "+x+"\nLongitude :"+y+"\n car "+t+" n'est pas un type reconnu" );
let myMarker = new mapboxgl.Marker({"color": color})
.setLngLat([y,x])
.addTo(this.mbox);
}
}
Thanks for help and have a good day :) ! Sorry if my English isn't that good.
As the first step, the
this.mapbox.on("click", function(e){
this.getcoordonates();
});
was called outside of any method of the Map class. It would most probably belong to the constructor (as discussed above in the question's comments section).
Next, the callback changes the scope of this, so it is not anymore pointing to a Map instance. A common solution to this issue is to store/backup this before, something like:
constructor() {
...
const thisObject = this;
this.mapbox.on("click", function(e) {
thisObject.getcoordonates();
});
}
Update:
The logic of code in its current form tries to add a new click event listener every time the map is clicked. Which is not desired. This getcoordonates() function is not really needed. Instead this should work (never tested it, it is based on your code):
constructor() {
...
const mbox = this;
this.mapbox.on("click", function(e) {
let m = JSON.stringify(e.lngLat.wrap());
mbox.mysplit(m);
});
}
Remarks:
There is no real logic behind JSON-encoding the lngLat object before calling mysplit just to decode it there.
You won't need it here, but the reverse of the JSON.stringify() is JSON.parse(). There is no need to work with it on a string level, like the current mysplit() method does.
Instead, the mysplit() method should be called directly with the e.lngLat object as its argument.
Going further, since there is no "splitting" (decoding) really needed, the mysplit() method isn't really needed either.
In the end, something like this should work:
constructor() {
...
const mbox = this;
this.mapbox.on("click", function(e) {
await mbox.addMarker(e.lngLat.lng, e.lngLat.lat);
});
}
I need to create a search-filter function that show/hide google map markers accordingly to the filter.
For example, if i type "a" in my search form, the map will display only those markers that contain an "a", while the other remain hidden.
I'm using JS and knockout framework. I was thinking to use Marker.setVisible(true/false) but i do not know how to implement this feature.
Thanks for your help
var Data = {
locations: [
new Location("Palazzo Pitti", 43.765264, 11.250094,"4bc8c9d7af07a593d4aa812d"),
new Location("Uffizi Gallery", 43.768439, 11.2559,"51191cdfb0ed67c8fff5610b"),
new Location("Florence Cathedral", 43.773083, 11.256222,"4bd00cdb046076b00a576f71"),
new Location("Palazzo Vecchio", 43.769315, 11.256174,"4bd01b8077b29c74a0298a82"),
new Location("Piazza della Signoria", 43.7684152597, 11.2534589862,"4b81729af964a520a7a630e3"),
new Location("Giotto's Campanile", 43.772772, 11.255786,"4b49cd73f964a520d87326e3"),
new Location("Piazzale Michelangelo", 43.762462, 11.264897,"4b3276d5f964a520620c25e3"),
new Location("Ponte Vecchio", 43.768009, 11.253165,"4b6ed35df964a52038cc2ce3"),
new Location("Boboli Gardens", 43.762361, 11.248297,"4bc97abcfb84c9b6f62e1b3e"),
new Location("Vinci", 43.783333, 10.916667,"4ca4f0a0965c9c74530dc7fa"),
],
query: ko.observable(''),
};
// Search by name into the locations list.
Data.search = ko.computed(function() {
var self = this;
var search = this.query().toLowerCase();
return ko.utils.arrayFilter(self.locations, function(location) {
return location.title.toLowerCase().indexOf(search) >= 0;
});}, Data);
ko.applyBindings(Data);
}
You're pretty close to what you need. Remember that locations is a ko.observable, so you need to use parens to open it up. Try this:
Data.search = ko.computed(function() {
var self = this;
var search = this.query().toLowerCase();
return ko.utils.arrayFilter(self.locations, function(location) {
if (location.title.toLowerCase().indexOf(search) >= 0) {
location.setVisible(true);
return true;
}
else {
place.setVisible(false);
return false;
}
});
}, Data); // not sure you really need this last reference to Data here
I'm working through the process of modulization on an app that I have written. This works with spatial location
I'm using an event to query for the user's lat / lon position for use inside the application. My calling snippet is below (button click starts it up)
<script>
require([
'dojo/dom',
'dojo/_base/array',
'demo/testModule',
'esri/SpatialReference',
'esri/geometry/Point'
], function (
dom,
arrayUtils,
testModule,
SpatialReference,
Point
) {
//Here is the button click listener
$('#whereAmIButton').click(function () {
var spatialRef = new esri.SpatialReference({ 'wkid': 4326 });
//variable I want to set to a returned geometry.
var myGeom;
//This runs but I'm missing the boat on the return of a value
testModule.findUserLocPT(spatialRef);
//var myModule = new testModule(); //not a constructor
});
});
</script>
Here is the custom module. It logs the information to the console for the user's location. But I want to return the value for setting the 'myGeom' variable.
define(['dojo/_base/declare','dojo/_base/lang','dojo/dom',
'esri/geometry/Point','esri/SpatialReference'], function (
declare, lang, dom, Point, SpatialReference) {
return {
findUserLocPT: function (spatialRef) {
var geom;
var location_timeout = setTimeout("geolocFail()", 5000);
navigator.geolocation.getCurrentPosition(function (position) {
clearTimeout(location_timeout);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
setTimeout(function () {
geom = new Point(lon, lat, spatialRef);
//console.log writes out the geom but that isnt what I am after
console.log(geom);
//I want to return this value
return geom;
}, 500);
});
function geolocFail() {
console.log("GeoLocation Failure");
}
}
}//end of the return
});
Any help would be welcome. I can by reference back change textual/html values on the document but am not getting things back as a variable.
Andy
Ok, I don't know if this is the 'best' answer but I have one now.
I added a global variable inside the 'test.html' page
<script>
var theGeom; //This is the variable
require([
'dojo/dom',
here is where I am setting the value of this variable for use in the original dojo 'require' code block. This is coming from the 'testModule.js'
setTimeout(function () {
geom = new Point(lon, lat, spatialRef);
theGeom = geom; //Here is the feedback of the value to the global variable.
return myGeom;
}, 500);
$('#whereAmIButton').click(function () {
var spatialRef = new esri.SpatialReference({'wkid':4326});
testModule.findUserLocPT(spatialRef);
setTimeout(function () {
console.log(theGeom); //here is the value set and ready to use
},2000);
});
I'm not sure if this is the best way. If you have something better please let me know.
Andy
I am reading a Rss feed using setInterval method and displaying notification to the users ,I want to make sure I store the latest feed title so that the user does not get multiple notification of the same title again. The current implementation does not work because I cant use that variable until the response comes back. To make things worse I am delaying the execution.So I am guessing I need to use callback function get the value and do my checking inside that function. I am not able to figure out how to do the callback and get the value of entry_title.
/** global variable **/
var global_Rsstitle;
/** end global variable **/
function get_rss1_feeds() {
var Rss1_title = getRss("http://rss.cnn.com/rss/cnn_topstories.rss", function(entry_title) {
if(global_Rsstitle != entry_title)
global_Rsstitle = entry_title;
console.log('test',global_Rsstitle); // the value is outputed but global var is not working
});
console.log('test1',global_Rsstitle); // outputted as undefined ??
}
google.load("feeds", "1");
google.setOnLoadCallback(function () { setInterval(get_rss1_feeds, 5000); });
My jsRss.js
function getRss(url, callback){
if(url == null) return false;
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
var entry = result.feed.entries[0];
var entry_title = entry.title; // need to get this value
callback && callback(entry_title);
}
}
function Load() {
// Create a feed instance that will grab feed.
var feed = new google.feeds.Feed(url);
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
Load();
}
can u see the entry_title -> this stores d value i need
so i need to get this value n store it into a global variable
or send it to another fns as a argument
so that I can maintain the value
and when next time setInterval is fired
I get a new value so I can compare and check if its same
n if its same I dont display it to the user
google.load("feeds", "1");
google.setOnLoadCallback(function () {
var oldTitle = '',
newTitle = '',
getRss = function (url, callback) {
(url) && (function (url) {
var feed = new google.feeds.Feed(url);
feed.load(function (result) {
(!result.error && callback) && (callback(result.feed.entries[0].title));
});
}(url));
};
setInterval(function () {
getRss(
'http://rss.cnn.com/rss/cnn_topstories.rss',
function (title) {
newTitle = title;
if(oldTitle !== newTitle) {
oldTitle = newTitle;
console.log('oldTitle: ', oldTitle);
}
console.log('newTitle: ', newTitle);
}
);
}, 5000);
});
I have this Javascript class (cut down to necessary parts):
function DigitalChannel ($xmlDoc) {
var self = this;
// Parse definition from $xmlDoc
self.firstRender = function (rootElem) {
var html = ""; // Build HTML string to display object information
rootElem.html (rootElem.html () + html); // Make above HTML visible
self.paper = Raphael ("digDot" + self.numIndex, 54, 38);
self.svgImage = self.paper.circle (30, 20, 15).attr ({
"stroke-width": "2",
"stroke": "#000000",
"fill": "#00FF00"
});
}
self.updateStatus = function (newState) {
self.state = newState;
if (self.state !== self.normalState) {
self.svgImage.attr ("fill", "#FF0000");
}
else {
self.svgImage.attr ("fill", "#00FF00");
}
}
}
Now, please assume that all variables used in my methods were initialized properly from XML data (I have verified that this is the case with Firebug). A digital channel can either have a value of 0 or 1 and it can have a normal value of 0 or 1. If the current value matches the normal value, I want the circle that gets drawn to be green, otherwise red. Then I have this class:
function PageManager () {
var self = this;
self.base_url = "http://" + location.hostname + "...";
self.digital_channels = new Array ();
var fullPath = self.base_url + "...";
$.ajax (fullPath,
{
type: "post",
cache: true,
context: self,
success: function (data) {
$xmlDoc = $($.parseXML (data));
$xmlDoc.find ("channel").each (function () {
self.digital_channels.push (new DigitalChannel ($(this)));
});
}
});
self.firstRender = function () {
for (i in self.digital_channels) {
self.digital_channels[i].firstRender ($("#rootElem"));
}
}
self.updateDigitals = function () {
var fullPath = self.base_url + "...";
$.ajax (fullPath,
{
type: "post",
cache: true,
context: self,
success = function (data) {
var digital_idx = 0;
var mask = 0x0001;
$xmlDoc = $($.parseXML (data));
$xmlDoc.find ("digital_inputs").each (function () {
var bits = parseInt ($.trim ($(this).text ()));
for (i = 0; i < 32; i++) {
self.digital_channels[digital_idx].updateState (bits & mask);
bits = bits >>> 1;
digital_idx += 1;
}
});
}
});
}
}
So at this point, I have defined everything I need, and then I do this:
var pageManager = new PageManager ();
pageManager.firstRender ();
pageManager.updateDigitals ();
Again, assume that everything happens in the proper order. The actual classes are more complicated and nothing will get called before the right time. I have used Firebug to step through everything and what I have right now is a page of 64 green dots after pageManager.firstRender ();, which is what I want. When I call pageManager.updateDigitals ();, I should see the first 32 dots stay green and the next 32 dots turn red. I have seen everything code-wise internally go OK, even to the point where DigitalChannel.updateState (newState); actually changes the color of svgImage circle; however, only the very last dot visually changes color. I apologize for such a long question, but does anybody have any idea why?
Could it be because self.normalState is not defined in DigitalChannel?
It turned out that it was a timing issue. Creating the HTML that would hold the Raphael paper and then immediately creating the paper caused something to get messed up, so I added a delay in the creation of the papers and everything is working as expected now.