Turning weather layer on/off combined with other selections - google-maps

I tried to implement this code (http://stackoverflow.com/questions/10318316/how-to-hide-or-display-a-google-maps-layer/) on my page, to put the weather/clouds on/off my map,
but somehow it interferes with my current code. I tried the two options that were presented in the above link already, but perhaps I did something wrong, or it interferes with the Fusion Tables selections that are already in my map?
Could someone please help me with the right snippet of code?
My page is here http://www.strahlen.org/map/mapplusweather.htm.
The (de)select buttons are already in the bottom right corner.
Thanks in advance,
Frank
ps: although an admin deleted your posting, thanks to Alexander Farber for your previous help!
ps 2: I of course have the weather layer working, see http://www.strahlen.org/map/mapweather.htm, but I cannot toggle it on/off
* final edit *
to prevent link-rot: I used the code here in my "production-version" now -> http://www.strahlen.org/map/

I've taken a look at your site and I believe you just have to make some basic changes to your existing code. First, add two new vars within you initialize() function:
function initialize() {
var tableId = 3167783;
var cloudDisplayIsOn = false;
var weatherDisplayIsOn = false;
Then, in your existing cloud click listener code, make these changes:
google.maps.event.addDomListener(document.getElementById('cloud'),
'click', function() {
if ( cloudDisplayIsOn ) {
cloudLayer.setMap( null );
cloudDisplayIsOn = false;
}
else {
cloudLayer.setMap( map );
cloudDisplayIsOn = true;
}
});
And finally, in your existing weather click listener code, make very similar changes:
google.maps.event.addDomListener(document.getElementById('weather'),
'click', function() {
if ( weatherDisplayIsOn ) {
weatherLayer.setMap( null );
weatherDisplayIsOn = false;
}
else {
weatherLayer.setMap( map );
weatherDisplayIsOn = true;
}
});
Now you may have to do a little minor debugging, but I believe this will add the display on/off code for the cloudLayer and the weatherLayer that you need.

I'm trying to perform a similar function, but with a different slant. The following code is the currently used geeToggleLayer function from the fusion_maps_v3.js file which our map server page references. I am trying to eliminate the checkbox toggle in favor of someone simply clicking the layer label to toggle visibility.
function geeToggleLayer(e, checkBoxId, channel, glmId, layerName) {
try {
var cb = document.getElementById(checkBoxId);
var id = glmId + '-' + channel;
// toggle layer visibility via clicking checkbox
try {
if (cb.checked) {
geeMap.showFusionLayer(id);
} else {
geeMap.hideFusionLayer(id);
}
} catch (err2) {
alert('Failed attempt to enable/disable layer: ' +
layerName + '\n' + id + '\n' + err2);
}
} catch (err) {
alert('Failed attempt to get checkbox for layer: ' +
layerName + '\n' + err);
}
cancelEvent(e);
}

Related

How to dynamically change images using Metaio

I have just start learning Metaio. I am working on a simple development test project.
I have so far made the tracking sheet, put image and two arrows (buttons) which means next image and previous image.
For testing I made one of the buttons to display the image and the other for hiding the image. All this works fine so far.
My question is when I added extra images how can I shift the images dynamically back and forward using my next and previous buttons?
My testing code:
button2.onTouchStarted = function () {
image1.hide();
};
button1.onTouchStarted = function () {
image1.display();
};
It can be done different ways, I suggest you to use arel.Scene.getObject and put your image names inside array and each time you click next or previous you count the array key up or down.
I assume you are using Metaio Creator editor.
You have to added codes 3 different places:
Previous (left arrow button)
button1.onTouchStarted = function () {
if (currentImageIndex == firstImageIndex) {
return;
}
arel.Scene.getObject(imageArray[currentImageIndex]).hide();
currentImageIndex--;
arel.Scene.getObject(imageArray[currentImageIndex]).display();
globalsVar['currentImageIndex'] = currentImageIndex;
};
Next (right arrow button)
button2.onTouchStarted = function () {
if (currentImageIndex == lastImageIndex) {
return;
}
arel.Scene.getObject(imageArray[currentImageIndex]).hide();
currentImageIndex++;
arel.Scene.getObject(imageArray[currentImageIndex]).display();
globalsVar['currentImageIndex'] = currentImageIndex;
};
On your Global Script
var imageArray = ["image1", "image2"]; // and so on extra image names
var firstImageIndex = 0;
var lastImageIndex = imageArray.length - 1;
var currentImageIndex = firstImageIndex;
globalsVar = {};
arel.Scene.getObject(imageArray[currentImageIndex]).display();

dc.js : how to wait for complete barchart redraw?

Hy everybody,
I'm working with dc.js and I think it's a genious tool ! However I have a issue I can't solve.
I'm using a dc.barchart and I want to launch a function of mine after a click on one bar, but I need to wait the end of the redraw of the barchart.
Order :
- my barchart is displayed
- I click on one bar
-> the barchart is redraw
-> only after the complete redraw, my function is launched
Where can I put my callback ? I can't find the corresponding code.
_chart.onClick = function (d) {
var filter = _chart.keyAccessor()(d);
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
alert("here is not working");
});
};
(...)
dc.redrawAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].redraw();
}
alert("neither here");
if(dc._renderlet !== null)
dc._renderlet(group);
};
dc.events.trigger = function(closure, delay) {
if (!delay){
closure();
alert("neither neither here");
return;
}
dc.events.current = closure;
setTimeout(function() {
if (closure == dc.events.current)
closure();
}, delay);
};
Any idea ? I'm completely blocked right now :(
Thanks a lot for your help,
vanessa
If _chart is the name of your chart and you want to execute some function named my_function after finishing drawing, use the following piece of code after the declaration of the chart itself:
_chart.on("postRedraw", my_function);
Hope this is what you were looking for.

Repeatedly Grab DOM in Chrome Extension

I'm trying to teach myself how to write Chrome extensions and ran into a snag when I realized that my jQuery was breaking because it was getting information from the extension page itself and not the tab's current page like I had expected.
Quick summary, my sample extension will refresh the page every x seconds, look at the contents/DOM, and then do some stuff with it. The first and last parts are fine, but getting the DOM from the page that I'm on has proven very difficult, and the documentation hasn't been terribly helpful for me.
You can see the code that I have so far at these links:
Current manifest
Current js script
Current popup.html
If I want to have the ability to grab the DOM on each cycle of my setInterval call, what more needs to be done? I know that, for example, I'll need to have a content script. But do I also need to specify a background page in my manifest? Where do I need to call the content script within my extension? What's the easiest/best way to have it communicate with my current js file on each reload? Will my content script also be expecting me to use jQuery?
I know that these questions are basic and will seem trivial to me in retrospect, but they've really been a headache trying to explore completely on my own. Thanks in advance.
In order to access the web-pages DOM you'll need to programmatically inject some code into it (using chrome.tabs.executeScript()).
That said, although it is possible to grab the DOM as a string, pass it back to your popup, load it into a new element and look for what ever you want, this is a really bad approach (for various reasons).
The best option (in terms of efficiency and accuracy) is to do the processing in web-page itself and then pass just the results back to the popup. Note that in order to be able to inject code into a web-page, you have to include the corresponding host match pattern in your permissions property in manifest.
What I describe above can be achieved like this:
editorMarket.js
var refresherID = 0;
var currentID = 0;
$(document).ready(function(){
$('.start-button').click(function(){
oldGroupedHTML = null;
oldIndividualHTML = null;
chrome.tabs.query({ active: true }, function(tabs) {
if (tabs.length === 0) {
return;
}
currentID = tabs[0].id;
refresherID = setInterval(function() {
chrome.tabs.reload(currentID, { bypassCache: true }, function() {
chrome.tabs.executeScript(currentID, {
file: 'content.js',
runAt: 'document_idle',
allFrames: false
}, function(results) {
if (chrome.runtime.lastError) {
alert('ERROR:\n' + chrome.runtime.lastError.message);
return;
} else if (results.length === 0) {
alert('ERROR: No results !');
return;
}
var nIndyJobs = results[0].nIndyJobs;
var nGroupJobs = results[0].nGroupJobs;
$('.lt').text('Indy: ' + nIndyJobs + '; '
+ 'Grouped: ' + nGroupJobs);
});
});
}, 5000);
});
});
$('.stop-button').click(function(){
clearInterval(refresherID);
});
});
content.js:
(function() {
function getNumberOfIndividualJobs() {...}
function getNumberOfGroupedJobs() {...}
function comparator(grouped, individual) {
var IndyJobs = getNumberOfIndividualJobs();
var GroupJobs = getNumberOfGroupedJobs();
nIndyJobs = IndyJobs[1];
nGroupJobs = GroupJobs[1];
console.log(GroupJobs);
return {
nIndyJobs: nIndyJobs,
nGroupJobs: nGroupJobs
};
}
var currentGroupedHTML = $(".grouped_jobs").html();
var currentIndividualHTML = $(".individual_jobs").html();
var result = comparator(currentGroupedHTML, currentIndividualHTML);
return result;
})();

Handling together marker click and doubleclick on googlemaps

I have the following problem.
On my google map app I need to distinguish click and doulbe click on the markers.
So when I am creating markers I create two listeners:
google.maps.event.addListener(markerTMP, 'click', (function(routeID) {
return function() {
console.log('click '+routeID);
}
})(pointRoute));
google.maps.event.addListener(markerTMP, 'dblclick', (function(routeID) {
return function() {
p('double click '+routeID);
}
})(pointRoute));
The problem is that when I use double click, click is also used.
My idea how to handle this:
On click - create a timeout, on double click - delete it.
But is there a normal way to handle this?
I was not able to found it in API reference.
Here is my workaround. it uses a global var to work across the two functions. Not the most eloquent, but works.
google.maps.event.addListener(marker, 'click', function() {
x = 0
update_timeout = setTimeout(function(){
if (x == 0) {
// do something ;
};
}, 300);
});
google.maps.event.addListener(marker, 'dblclick', function() {
x=1
// do something ;
});
There is no "official" way to handle this in the API. Creating a timeout seems to be the accepted approach.
Try using a click event and a rightclick event instead of click and dblclick.

code using mootools 1.4.1 causes an infinite loop

I'm using mootools 1.4.1 and I'm trying to get a div that 'tweens' the width of the screen to fire another function on completion. However, the tween keeps firing and I don't believe that it's firing the function I'm wanting it to.
The code is below:
$('photo-loading_amt').set('tween', {duration: '1000ms',
link: 'cancel',
transition: 'linear',
property: 'width',
onComplete: function() {
var photoContainers = $$('.photo-container')
if (photoNum != photoContainers.length) {
nextPhoto(photoNum.toInt() + 1);
}
else {
nextPhoto(1);
}
}
});
Any Help that you might have would be appreciated.
#Dimitar Christoff, here's the code for the nextPhoto function:
function nextPhoto(photoNum) {
resetTimeline();
var photoContainers = new Array();
photoContainers = $$('.photo-container');
var photoFx = new Fx.Tween(photoContainers[photoNum.toInt() - 1], {
duration: 'normal',
transition: Fx.Transitions.Sine.easeOut,
property: 'opacity',
onComplete: function() {
photoContainers[photoNum.toInt() - 1].setStyle('visibility', 'hidden');
photoContainers[photoNum.toInt() - 1].setStyle('opacity', 1);
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('z-index', photoContainers.length);
}
}
});
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('z-index', 0);
}
photoFx.tween(1, 0);
//alert("photoNum = " + photoNum + "\n" + "photoContainers.length = " + photoContainers.length);
if (photoNum == photoContainers.length) {
photoContainers[0].setStyle('visibility', 'visible');
}
else {
photoContainers[photoNum.toInt()].setStyle('visibility', 'visible');
//loadingPhotos(photoNum.toInt() + 1);
}
// hard reset the loadingPhotos function
} // end of FUNCTION nextPhoto
Since I don't see an apparent loop in your code, I would suspect the effect to be caused by
link: 'cancel'
in your first block of code. According to the Moo docs this will:
'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition. The new transition will start immediately, canceling the one that is currently running.
So this might upset your tweens. However, you probably added this deliberately. I would try changing this to chain or ignore, both in your first and second tween setup, to see what combines best.
If this doesn't solve it, perhaps you could post some more code. For instance, I don't see the code for the resetTimeline function. Perhaps your code gets stuck here.