Changeset 8469 in genesis for nodes/nodemap.html


Ignore:
Timestamp:
Sep 19, 2010, 8:43:07 AM (14 years ago)
Author:
rick
Message:

Cross-browser compatible:

Made it valid according to w3c validator, jslint, and IE8, Firefox, Chrome, Opera developer consoles.

Standards there are so many to choose from...

File:
1 edited

Legend:

Unmodified
Added
Removed

  • nodes/nodemap.html

    r8468 r8469  
    1212      }
    1313   </style>
    14    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript" />
    15    <script src="http://openlayers.org/dev/OpenLayers.js" type="text/javascript" />
     14   <script
     15   src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"> </script>
     16   <script src="http://openlayers.org/dev/OpenLayers.js" type="text/javascript"> </script>
    1617   <script type="text/javascript">
    17 
    18     <![CDATA[
     18   // <![CDATA[
    1919      var url_pal3 = "http://maps.google.com/mapfiles/kml/pal3/";
    2020      var map, rulerControl, clickControl;
    … …  
    2727      var min_opacity = 0.1;
    2828     
    29       var nodeStatusImg = new Array();
    30       nodeStatusImg['up'] = 'http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png';
    31       nodeStatusImg['down'] = 'http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png';
    32       nodeStatusImg['planned'] = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
    33       nodeStatusImg['unknown'] = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
     29      var nodeStatusImg = [];
     30      nodeStatusImg.up = 'http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png';
     31      nodeStatusImg.down = 'http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png';
     32      nodeStatusImg.planned = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
     33      nodeStatusImg.unknown = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
    3434     
    3535      function log(message) {
    … …  
    4444      function isInterlink(feature) {
    4545         return (feature.attributes.name.indexOf('Interlink') != -1);
     46      }
     47
     48      function coordConvert(lam, phi) {
     49        var lam_deg = Math.floor(lam);
     50        var t = (lam - lam_deg) * 60;
     51        var lam_min = Math.floor(t);
     52        var lam_sec = (t - lam_min) * 60;
     53     
     54        var phi_deg = Math.floor(phi);
     55        t = (phi - phi_deg) * 60;
     56        var phi_min = Math.floor(t);
     57        var phi_sec = (t - phi_min) * 60;
     58       
     59        var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
     60            "&lam_deg=" + lam_deg +
     61            "&lam_min=" + lam_min +
     62            "&lam_sec=" + lam_sec +
     63            "&phi_deg=" + phi_deg +
     64            "&phi_min=" + phi_min +
     65            "&phi_sec=" + phi_sec
     66            ;
     67        return(url);
    4668      }
    4769     
    … …  
    7395              lonlat = lonlat.transform( projection_smp, projection_wgs);
    7496              var url = coordConvert(lonlat.lon, lonlat.lat);
    75               alert("You clicked near " + lonlat.lon + " N, " +
    76                                         + lonlat.lat + " E\n\n" +
     97              alert("You clicked near " + lonlat.lon + " N, " + lonlat.lat + " E\n\n" +
    7798              'Copy/paste URL in NEW browser window to get your RDNAP coordinates\n\n'  + url);
    7899          }
    … …  
    107128             sphericalMercator: true,
    108129             maxExtent: world_bound,
    109              wrapDateLine: false,
     130             wrapDateLine: false
    110131           });
    111132        var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
    … …  
    136157        function ignoreInterlink(cluster, feature) {
    137158           if (isInterlink(feature)) {
    138              return(false); 
     159             return(false);
    139160           } else {
    140161             return strategy.shouldClusterOrig(cluster, feature); }
    141         };
     162        }
    142163     
    143164        strategy = new OpenLayers.Strategy.Cluster();
    … …  
    152173            externalGraphic: "${icon}",
    153174            pointRadius: "${radius}",
    154             fillOpacity: 1,
     175            fillOpacity: 1
    155176        }, { context : {
    156177                    icon : function(feature) {
    157                       var iconStatus = "DEADCODE"
     178                      var iconStatus = "DEADCODE";
    158179                      if(feature.cluster) {
    159180                        for (var i = 0; i < feature.cluster.length; i++) {
    … …  
    197218            });
    198219        map.addLayer(kml);
     220
     221      function onPopupClose(evt) {
     222          select.unselectAll();
     223      }
     224
     225      function onKMLFeatureSelect(event) {
     226        var feature = event.feature;
     227        var content = "";
     228        if (feature.cluster) {
     229           for (var i = 0; i < feature.cluster.length; i++) {
     230             var node = feature.cluster[i];
     231             iconStatus = node.attributes.styleUrl.split('_')[2];
     232             iconImg = nodeStatusImg[iconStatus];
     233             content = content + "<h4><img src='" + iconImg + "' />" + node.attributes.name + "</h4>" + node.attributes.description + "<br />";
     234           }
     235        } else {
     236           if (isInterlink(feature)) {
     237             content = "<h4>" + feature.attributes.name + "</h4>" +  "<br />" + "<em>Link information: " + feature.attributes.description + "</em>";
     238           } else {
     239             var nodeName = feature.attributes.name.split(' ')[1];
     240             log(nodeName);
     241             content = "<iframe frameborder='0' height='300px' width='700px' src='http://sunny.wleiden.net/nagios/cgi-bin/status.cgi?host=" + nodeName + "&servicestatustypes=28&hoststatustypes=15&noheader=true'></iframe><br />" + "<em>Locatie: " + feature.attributes.description + "</em>";
     242           }
     243        }
     244        popup = new OpenLayers.Popup.FramedCloud("chicken",
     245                                 feature.geometry.getBounds().getCenterLonLat(),
     246                                 new OpenLayers.Size(100,100),
     247                                 content,
     248                                 null, true, onPopupClose);
     249        feature.popup = popup;
     250        map.addPopup(popup);
     251      }
     252     
     253      function onKMLFeatureUnselect(event) {
     254        var feature = event.feature;
     255        if(feature.popup) {
     256          map.removePopup(feature.popup);
     257          feature.popup.destroy();
     258          delete feature.popup;
     259        }
     260      }
     261     
     262      function handleMeasurements(event) {
     263          // For some reason 'delayed' events get posted even though the object
     264          // is deactivated
     265          if (!rulerControl.active) {
     266            return;
     267          }
     268          var units = event.units;
     269          var order = event.order;
     270          var measure = event.measure;
     271          var element = document.getElementById('output');
     272           out = measure.toFixed(3) + " " + units;
     273          if(order == 2) {
     274              out += "<sup>2</" + "sup>";
     275          } else {
     276          }
     277          element.innerHTML = out;
     278      }
    199279     
    200280        select = new OpenLayers.Control.SelectFeature(kml);
    … …  
    211291     
    212292     
    213         var vectors = new OpenLayers.Layer.Vector("Vector Layer")
     293        var vectors = new OpenLayers.Layer.Vector("Vector Layer");
    214294        map.addLayer(vectors);
    215295        map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
    … …  
    286366            new OpenLayers.Rule({symbolizer: sketchSymbolizers})
    287367        ]);
    288         var styleMap = new OpenLayers.StyleMap({"default": style});
     368        var rulerStyleMap = new OpenLayers.StyleMap({"default": style});
    289369       
    290370        rulerControl = new OpenLayers.Control.Measure(
    … …  
    292372                    persist: true,
    293373                    handlerOptions: {
    294                         layerOptions: {styleMap: styleMap}
     374                        layerOptions: {styleMap: rulerStyleMap}
    295375                    }
    296376                }
    … …  
    309389      }
    310390     
    311       function onPopupClose(evt) {
    312           select.unselectAll();
    313       }
    314      
    315      
    316      
    317       function onKMLFeatureSelect(event) {
    318         var feature = event.feature;
    319         var content = "";
    320         if (feature.cluster) {
    321            for (var i = 0; i < feature.cluster.length; i++) {
    322              var node = feature.cluster[i];
    323              iconStatus = node.attributes.styleUrl.split('_')[2];
    324              iconImg = nodeStatusImg[iconStatus];
    325              content = content + "<h4><img src='" + iconImg + "' />" + node.attributes.name + "</h4>" + node.attributes.description + "<br />";
    326            }
    327         } else {
    328            if (isInterlink(feature)) {
    329              content = "<h4>" + feature.attributes.name + "</h4>" +  "<br />" + "<em>Link information: " + feature.attributes.description + "</em>";
    330            } else {
    331              var nodeName = feature.attributes.name.split(' ')[1];
    332              log(nodeName);
    333              content = "<iframe frameborder='0' height='300px' width='700px' src='http://sunny.wleiden.net/nagios/cgi-bin/status.cgi?host=" + nodeName + "&servicestatustypes=28&hoststatustypes=15&noheader=true'></iframe><br />" + "<em>Locatie: " + feature.attributes.description + "</em>";
    334            }
    335         }
    336         popup = new OpenLayers.Popup.FramedCloud("chicken",
    337                                  feature.geometry.getBounds().getCenterLonLat(),
    338                                  new OpenLayers.Size(100,100),
    339                                  content,
    340                                  null, true, onPopupClose);
    341         feature.popup = popup;
    342         map.addPopup(popup);
    343       }
    344      
    345       function onKMLFeatureUnselect(event) {
    346         var feature = event.feature;
    347         if(feature.popup) {
    348           map.removePopup(feature.popup);
    349           feature.popup.destroy();
    350           delete feature.popup;
    351         }
    352       }
    353      
    354       function handleMeasurements(event) {
    355           // For some reason 'delayed' events get posted even though the object
    356           // is deactivated
    357           if (!rulerControl.active) {
    358             return;
    359           }
    360           var geometry = event.geometry;
    361           var units = event.units;
    362           var order = event.order;
    363           var measure = event.measure;
    364           var element = document.getElementById('output');
    365            out = measure.toFixed(3) + " " + units;
    366           if(order == 2) {
    367               out += "<sup>2</" + "sup>";
    368           } else {
    369           }
    370           element.innerHTML = out;
    371       }
     391     
     392     
     393     
    372394     
    373395      function toggleClickControl() {
    … …  
    394416     
    395417      function defaultFocus() {
    396         map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
    397          .transform( projection_wgs, projection_smp), 12 // Zoom level
    398         );
     418        map.setCenter(new OpenLayers.LonLat(4.50,52.186).transform( projection_wgs, projection_smp), 12);
    399419      }
    400420     
    … …  
    405425        } else {
    406426          e.style.visibility = "hidden";
    407         };
    408       }
    409      
    410       function coordConvert(lam, phi) {
    411         var lam_deg = Math.floor(lam);
    412         var t = (lam - lam_deg) * 60;
    413         var lam_min = Math.floor(t);
    414         var lam_sec = (t - lam_min) * 60;
    415      
    416         var phi_deg = Math.floor(phi);
    417         var t = (phi - phi_deg) * 60;
    418         var phi_min = Math.floor(t);
    419         var phi_sec = (t - phi_min) * 60;
    420        
    421         var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
    422             "&lam_deg=" + lam_deg +
    423             "&lam_min=" + lam_min +
    424             "&lam_sec=" + lam_sec +
    425             "&phi_deg=" + phi_deg +
    426             "&phi_min=" + phi_min +
    427             "&phi_sec=" + phi_sec
    428             ;
    429         return(url);
    430       }
     427        }
     428      }
     429     
    431430     
    432431      // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
    433 ]]>
     432      // ]]>
    434433
    435434</script>
    436435
    437436  </head>
    438   <body onload="init();">
     437  <body onload="init()">
    439438    <div id="basicMap">
    440439      <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
    … …  
    455454          <li>Keyboard Navigation is enabled</li>
    456455          <li>Contrast of background: <a title="decrease opacity" href="javascript: changeOpacity(-0.1);">Decrease</a> or <a title="increase opacity" href="javascript: changeOpacity(0.1);">Increase</a></li>
    457 
    458 
    459456        </ul>
     457<p>
     458    <a href="http://validator.w3.org/check?uri=referer"><img
     459        src="http://www.w3.org/Icons/valid-xhtml10" title="Valid XHTML 1.0 Strict"
     460        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
     461    <a href="http://jslint.com"><img src="http://www.jslint.com/jslintpill.gif" title="Valid JavaScript code" alt="Valid JavaScript code" /></a>
     462  </p>
    460463      </div>
    461464    </div>
Note: See TracChangeset for help on using the changeset viewer.