CODEWITHSUNDEEP
checkboxopenlayersvisibilitylayer
Digby Maass
Digby Maass

Reputation: 11

Using a form checkbox in a div to control the visibility of a vector layer in OpenLayers

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.

<input name="slow" type="checkbox" class="newstext" 
id="slow" onClick="slowtrace();" checked>

The function 'slowtrace' is in the head script. 'lgpx2' is the vector layer showing the trace:

function slowtrace()  
{if (lgpx2.getVisibility() == true) 
{lgpx2.setVisibility(false);}  
else  
{lgpx2.setVisibility(true);}}

However it doesn't work, giving the error - Reference error: can't find variable: slowtrace.

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'.

The code for the whole page is:

    <html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<link rel="stylesheet" href="http://www.carnethy.com/carn.css" type="text/css">
    <title>Wed training 20th March 2013 - golf courses</title>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script type="text/javascript">    
        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);
    }


<style type="text/css">
<!--
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;
}  
-->
</style>
</head>

<body onLoad="init();">
<div class="mapposn" id="map"></div>
<div id="key"><span class="plaintext" style="color:#36F">
<input name="slow" type="checkbox" class="newstext" id="slow" onClick="slowtrace();" checked>
Slow run&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6.82 miles (10.98k) </span>
<div id="blue">&nbsp;</div><br>
<span class="plaintext" style="color:#C30">
<input name="Fast" type="checkbox" class="newstext" id="fast" checked>
Fast run&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.93 miles (12.8k)</span>
<div id="red">&nbsp;</div>
</div>
</body>
</html>

Upvotes: 1

Views: 2202

Answers (1)

Digby Maass
Digby Maass

Reputation: 11

I've made it work using jquery. It looks in the named div to see whether the checkbox has been unchecked/toggled. I adapted this code from an example so don't really know why it works, or why the previous version didn't. So if anyone can enlighten me? Is there a way to do it without jquery?

Solution: Add link to jquery src, take out the onclick event from the checkboxes...

<input name="slow" type="checkbox" class="newstext" id="slow"  checked>

...and write the visibility function thus:

$(document).ready(function(){
    function slowtrace()  
          {if (lgpx2.getVisibility() == true) 
         {lgpx2.setVisibility(false);}  
         else  
          {lgpx2.setVisibility(true);}}
    function fasttrace()  
          {if (lgpx.getVisibility() == true) 
         {lgpx.setVisibility(false);}  
         else  
          {lgpx.setVisibility(true);}}
$("#slow").on("change", slowtrace);
$("#fast").on("change", fasttrace);
});

Upvotes: 0

Related Questions