title: Using a form checkbox in a div to control the visibility of a vector layer in OpenLayers
body: <p>I am trying to toggle the visibility of a vector layer in OpenLayers that displays a gpx trace using a form button defined in the body, and positioned over the map using a div. I don't want to use the built in control as it is by default hidden, and I want to add further info by the checkbox.</p>
  
  <pre><code>&lt;input name="slow" type="checkbox" class="newstext" 
  id="slow" onClick="slowtrace();" checked&gt;
  </code></pre>
  
  <p>The function 'slowtrace' is in the head script. 'lgpx2' is the vector layer showing the trace:</p>
  
  <pre><code>function slowtrace()  
  {if (lgpx2.getVisibility() == true) 
  {lgpx2.setVisibility(false);}  
  else  
  {lgpx2.setVisibility(true);}} 
  </code></pre>
  
  <p>However it doesn't work, giving the error - Reference error: can't find variable: slowtrace.</p>
  
  <p>There are two vector layers showing two gpx traces. I've been trying this with the slow trace 'lgpx2', not the other named 'lgpx', and the upper tick box in the div over the map, corresponding to 'slow run'. </p>
  
  <p>The code for the whole page is:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="http://www.carnethy.com/carn.css" type="text/css"&gt;
      &lt;title&gt;Wed training 20th March 2013 - golf courses&lt;/title&gt;
      &lt;script src="http://www.openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;    
          var lat
          var lon
          var zoom
          var latstart=55.92900
          var lonstart=-3.19300
              var map;
  
      function init() {
              map = new OpenLayers.Map ("map", {controls:[
                  new OpenLayers.Control.Navigation({zoomWheelEnabled : false}),
              new OpenLayers.Control.PanZoomBar(),
              new OpenLayers.Control.LayerSwitcher(),
              new OpenLayers.Control.Attribution()],
              maxExtent: new OpenLayers.Bounds(-20037508.34,- 20037508.34,20037508.34,20037508.34),
              maxResolution: 156543.0399,
              numZoomLevels: 19,
              units: 'm',
              projection: new OpenLayers.Projection("EPSG:900913"),
              displayProjection: new OpenLayers.Projection("EPSG:4326")
              } );
              layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
              map.addLayer(layerMapnik);
              layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
              map.addLayer(layerCycleMap);
              layerMarkers = new OpenLayers.Layer.Markers("Markers");
              map.addLayer(layerMarkers);
  
      //slow run stylemap
              var gpxStyles = new OpenLayers.StyleMap({
                      "default": new OpenLayers.Style({
                      pointRadius: "1", // sized according to type attribute
                      label: "${name}",        
                      labelAlign: "rb",
                      labelOutlineColor: "white",
                      labelOutlineWidth: 3,
                      fontSize: 15,
                      fontFamily: "Arial",
                      fontColor: "brown",
                      labelYOffset: 10,
                      fillColor: "black",
                      strokeColor: "red",
                      strokeWidth: 2, 
                      strokeOpacity: 0.8
                  }),
                  }); 
  
      //fast run stylemap
                  var gpxStyles2 = new OpenLayers.StyleMap({
                      "default": new OpenLayers.Style({
                      pointRadius: "1", // sized according to type attribute
                      label: "${name}",        
                      labelAlign: "rb",
                      labelOutlineColor: "white",
                      labelOutlineWidth: 3,
              fontSize: 15,
                      fontFamily: "Arial",
                      fontColor: "blue",
                      labelYOffset: 10,
                      fillColor: "black",
                      strokeColor: "blue",
                      strokeWidth: 2, 
                      strokeOpacity: 0.8,
          }),
              }); 
      // Add the Layer with the GPX Track fast run - ignore this bit
      var lgpx = new OpenLayers.Layer.Vector("wed training fast", {
      strategies: [new OpenLayers.Strategy.Fixed()],
      protocol: new OpenLayers.Protocol.HTTP({
      url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-fast.gpx",
      format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
              }),
                  styleMap: gpxStyles,
                  projection: new OpenLayers.Projection("EPSG:4326")
  
              });
  
              map.addLayer(lgpx); 
              // fit map to bounds of window and add start pin 
              lgpx.events.register("loadend", lgpx, function() {
              this.map.zoomToExtent(this.getDataExtent());
              var startPoint = this.features[0].geometry.components[0];               
              layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
                      });
  
  
      // Add the Layer with the GPX Track slow run
      // This is the layer I am practising on
          var lgpx2 = new OpenLayers.Layer.Vector("wed training slow", {
          strategies: [new OpenLayers.Strategy.Fixed()],
          protocol: new OpenLayers.Protocol.HTTP({
          url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-slow.gpx",
          format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})                   
          }),
  
          styleMap: gpxStyles2,
          projection: new OpenLayers.Projection("EPSG:4326"),
          });
  
          map.addLayer(lgpx2);  
  
          // fit map to bounds of window and add start pin
  
          lgpx2.events.register("loadend", lgpx2, function() {
           this.map.zoomToExtent(this.getDataExtent());
           var startPoint = this.features[0].geometry.components[0];              
           layerMarkers.addMarker(new OpenLayers.Marker(new     OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
          });
  
      // the non functional function
  
      function slowtrace()  
      {if (lgpx2.getVisibility() == true) 
      {lgpx2.setVisibility(false);}  
      else  
      {lgpx2.setVisibility(true);}} 
  
  
          var size = new OpenLayers.Size(21, 25);
          var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
          var icon = new     OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_red_pin.png',size,offset);
          var icon2 = new OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_blue_pin.png',size,offset);
      }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!--
  body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
  }
  .mapposn {
      display: block;
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
  }
  #key {
      height: 40px;
      width: 360px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: small;
      background-color: #FFF;
      top: 25px;
      padding-left: 10px;
      padding-top: 3px;
      border: 1px solid #666;
  }
  #blue {
      width: 85px;
      display: inline;
      left: 105px;
      font-size: 2px;
      position: absolute;
      background-color: #36F;
      margin-top: 7px;
  }
  #red {
      width: 85px;
      display: inline;
      left: 105px;
      font-size: 2px;
      position: absolute;
      background-color: #C30;
      margin-top: 7px;
  }  
  --&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body onLoad="init();"&gt;
  &lt;div class="mapposn" id="map"&gt;&lt;/div&gt;
  &lt;div id="key"&gt;&lt;span class="plaintext" style="color:#36F"&gt;
  &lt;input name="slow" type="checkbox" class="newstext" id="slow" onClick="slowtrace();" checked&gt;
  Slow run&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 6.82 miles (10.98k) &lt;/span&gt;
  &lt;div id="blue"&gt;&amp;nbsp;&lt;/div&gt;&lt;br&gt;
  &lt;span class="plaintext" style="color:#C30"&gt;
  &lt;input name="Fast" type="checkbox" class="newstext" id="fast" checked&gt;
  Fast run&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 7.93 miles (12.8k)&lt;/span&gt;
  &lt;div id="red"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>