Hey thanks for your help. The particular block i am having trouble
with is not part of a loop of placing many objects, but where the
contents of a table need to change. This is for a page using google
maps to display weather data, The zoom level effects what style to
apply to a table (weather table one). Also, since the data is
changing, i need to update the data values in the table.
here is the bigger scope.
I am almost certain it is a simple syntax issue that eludes me.
Thanks for the links too, I am always looking for folks who share
there experience. I am not new to programming, but i am new to
javascript.
shawn
<script type="text/javascript">
var rainGroup = new GMarkerGroup(true,[
addInfoWindowToMarker(
new GMarker((new GLatLng(36.132016, -101.729908)),{icon :
addOptionsToIcon(new GIcon(),
{infoWindowAnchor : new GPoint(0,0),image : '/
images/rain_markers/rain_marker_0.00.png' ,
iconSize : new GSize(38,23),iconAnchor : new
GPoint(0,0)}), title : 'Stampede - 11', zIndexProcess: function()
{return 900000;} }),
"<div style='height:400px; width:800px;'><br> <a
href='/pivrain/multigraph/23'> <img src='/pivrain/getchart/?
id=23&use_gmap=1' ></a><br> </div>" ,{}),
addInfoWindowToMarker(
new GMarker(new GLatLng(35.92363,-102.308768),{icon :
addOptionsToIcon(new GIcon(),{infoWindowAnchor : new GPoint(0,0),
image : "/images/rain_markers/
rain_marker_0.00.png",iconSize : new GSize(38,23),iconAnchor : new
GPoint(0,0)}),title : "Danny Ford - J1"}),
"<div style='height:400px; width:800px;'><br> <a href='/
pivrain/multigraph/4'> <img src='/pivrain/getchart/?id=4&use_gmap=1'
></a><br> </div>",{})
],
{});
var map;
window.onload = addCodeToFunction(window.onload,function() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_div"));
map.setCenter(new GLatLng(35.5,-102),
11);map.setMapType(G_HYBRID_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
map.addOverlay(rainGroup);
var radar = '<img src="/images/radarmap.gif"> ';
var radar_label = new EInsert(new GLatLng(35.2, -101.835),
"/images/radarmap.gif", new GSize(400,300), 12 );
map.addOverlay(radar_label);
var site_marker = new EInsert(new GLatLng(36.0146,
-102.451931), "/images/rain_markers/red_circle.png", new GSize(97.0,
97.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(36.567959,
-103.073581), "/images/rain_markers/red_circle.png", new GSize(53.0,
53.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(42.4668,
-99.7005), "/images/rain_markers/red_circle.png", new GSize(57.0,
57.0), 13 );
map.addOverlay(site_marker);
var site_marker = new EInsert(new GLatLng(39.26715,
-102.3809), "/images/rain_markers/red_circle.png", new GSize(64.0,
64.0), 13 );
map.addOverlay(site_marker);
var weather_table_one = new ELabel(new GLatLng(35.5,-102),
" <span style='background-color: rgb(153,153,153)'> <a href='/
pivrain/weather_graph_index'
onclick='window.open(this.href,'new_window','height=700,width=1050,
scrollbars=yes');return false;'>weather graphs</a></span> <br> <table
Class='zoom2' border='1'> <tr> <td nowrap colspan='4'
style='background-color: rgb(153, 153, 153);'> weather
station 5 miles SE of Dalhart</td> </tr> <tr> <td
nowrap style='background-color: rgb(153, 153, 153);'>
reading </td> <td nowrap style='background-color:
rgb(192, 192, 192)'> current</td> <td nowrap
style='background-color: rgb(153, 153, 153);'> 24hr high</
td> <td nowrap style='background-color: rgb(153, 153,
153);'> 24hr low</td> </tr> <tr> <td
nowrap style='background-color: rgb(153, 153, 153);'> wind
speed</td> <td nowrap style='background-color: rgb(192, 192,
192)'> 2.9 mph </td> <td nowrap
style='background-color: rgb(153, 153, 153);'> 15.7
mph </td> <td nowrap style='background-color: rgb(153,
153, 153);'> 0.1 mph </td> </tr>
<tr> <td nowrap style='background-color: rgb(153, 153,
153);'> humidity </td> <td nowrap
style='background-color: rgb(192, 192, 192)'> 35.0
% </td> <td nowrap style='background-color: rgb(153,
153, 153);'> 90.2 % </td> <td nowrap
style='background-color: rgb(153, 153, 153);'> 35.0
% </td> </tr> <tr> <td nowrap style='background-
color: rgb(153, 153, 153);'> temperature</td> <td
nowrap style='background-color: rgb(192, 192, 192)'> 93.3
° F </td> <td nowrap style='background-color:
rgb(153, 153, 153);'> 93.3 ° F </td>
<td nowrap style='background-color: rgb(153, 153, 153);'>
1285092715 ° F </td> </tr> </table>", "style1");
map.addOverlay(weather_table_one);
function nix_weathermap(){
map.removeOverlay(weather_table_one);
}
// action when map is moved
function replace_weather_table(){
map.removeOverlay(weather_table_one);
zoomy = map.getZoom();
new Ajax.Request('/wlocations/update_weather_tables',
{
parameters: {
zoom: zoomy
}
})
};
new PeriodicalExecuter(replace_weather_table, 30);
// action to refresh the map table every so often NEED
to make the times of execution the same
var zoomy = map.getZoom();
//new PeriodicalExecuter(function() { new Ajax.Request('/
wlocations/update_weather_tables?zoom='+zoomy, {asynchronous:true,
evalScripts:true})},30);
GEvent.addListener(map,"moveend", replace_weather_table);
}
}
);
</script>
<div id="map_div" style="width:1800px;height:1200px" ></div>
<div id="map_marker_div"> </div>
<div id="weather_tables"> </div>
<!-- update rain markers -->
<script type="text/javascript">
//<![CDATA[
new PeriodicalExecuter(function() {new
Ajax.Request('/wlocations/
update_rain_markers', {asynchronous:true, evalScripts:true})},30);
//]]>
</script>
<div id="zoom"> </div>
On Sep 21, 12:05 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> What's the wider context of that code? In particular, what happens to
> `weather_table_one` after the code you've shown? Because if you're
> modifying it (for instance, in a loop), that's your problem. The
> `replace_weather_table` function is a closure over the
> `weather_table_one` variable, which means it has a *live* reference to
> it (not a copy of it).
>
> Here's a simple example of the effect:http://jsbin.com/ujera3
> * * * *
> document.observe("dom:loaded", function() {
>
> var index, div;
> for (index = 0; index < 5; ++index) {
> div = new Element('div');
> div.update("I'm div #" + index + ". Click me.");
> div.observe('click', function(event) {
> event.stop();
> alert("Index = " + index);
> });
> document.body.appendChild(div);
> }
>
> });
>
> * * * *
>
> You might thing that if you clicked div #0, it would say "Index = 0",
> and if you clicked div #1, it would say "Index = 1". But it doesn't.
> It always says "Index = 5", because that's the *current* value of the
> `index` variable as of the time the click handler is called.
>
> You can break that link so that the function deals with the value at a
> point in time. The usual way is to do it with a function
> call:http://jsbin.com/ujera3/2
> * * * *
> document.observe("dom:loaded", function() {
>
> var index, div;
> for (index = 0; index < 5; ++index) {
> div = new Element('div');
> div.update("I'm div #" + index + ". Click me.");
> // Create a function that accepts an argument
> (function(thisIndex) {
> div.observe('click', function(event) {
> event.stop();
> // Use the argument
> alert("thisIndex = " + thisIndex);
> });
> })(index); // <== pass in the current value of `index` as the
> argument
> document.body.appendChild(div);
> }
>
> });
>
> * * * *
> The event handler is still a closure. In fact, it's a closure over two
> things: 1. The execution context of the main code, and 2. The
> execution context of *that particular call* to the anonymous function
> we added. Since the event handler is using the `thisIndex` argument
> *of a particular call context*, and that argument is never changed, it
> works as you expect. Mind you, I wouldn't recommend the above code
> literally, it's a bit expensive in terms of creating extra contexts,
> I'd usually try to find some other way to get the information to the
> handler. But for these purposes, it's useful for showing how the
> closure works.
>
> More
> here:http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
>
> HTH,
> --
> T.J. Crowder
> Independent Software Engineer
> tj / crowder software / com
> www / crowder software / com
>
> On Sep 21, 5:22 pm, nephish <neph...@gmail.com> wrote:
>
>
>
> > Not sure if my problem is the javascript function, or how i have the
> > PeriodicalExecuter set up. The action works, the element is updated
> > with new info, but the old contents are not removed.
>
> > map.addOverlay(weather_table_one);
> > // action when map is moved
> > function replace_weather_table(){
> > map.removeOverlay(weather_table_one);
> > zoomy = map.getZoom();
> > new Ajax.Request('/pivrain2/update_weather_tables', {
> > parameters: {
> > zoom: zoomy
> > }
> > })
> > };
>
> > new PeriodicalExecuter(replace_weather_table, 30);
>
> > would appreciate any help
>
> > skrite
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
