Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I´m still working on my own external layerswitcher. An I still have some problems. When I choose a Layer in my dropbob the Webinspektor says "Cannot call method 'setVisibility' of null" How can I fix that? Thank you for your helping.

Here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>Klimaschutzkonzept LK Göttingen</title>

    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"/>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/blitzer/jquery-ui.css" type="text/css"/>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
     <script src="http://192.168.159.128/Sharedfolder/D3/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js"></script>

    <style>
        body {
        font-family: Arial, Helvetica, sans-serif;
        }

        #map {

            margin: 0;
            width: 700px;
            height: 500px;
        }



        #tooltip {
            position: absolute;
            width: 250px;
            height: auto;
            padding: 10px;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }

        path {
           color: "red";
            fill-opacity: .6;
            stroke: black;
            stroke-width: 1px;
        }

        path:hover {
            fill-opacity: 1;
            stroke: black;
            stroke-width: 2px;
        }

    </style>
        <script type="text/javascript">
        Proj4js.defs["EPSG:31463"] = "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs";

        var map;
        var zoom = 10;
        function init() {
        var overlayEinwohner, overlayEnergieverbrauch; 



            var map = new OpenLayers.Map("map", {
                allOverlays: true,
                projection: new OpenLayers.Projection ("EPSG:31463"),
                displayProjection: new OpenLayers.Projection("EPSG: 4326"),
                controls: [
                    //new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.ArgParser(),
                    //new OpenLayers.Control.Attribution(),
                    new OpenLayers.Control.LayerSwitcher(),
                    //new OpenLayers.Control.MousePosition(),
                    //new OpenLayers.Control.PanZoomBar(),
                ]
            });
            /*var external_control = new OpenLayers.Control.LayerSwitcher({
                div: document.getElementById("external_control") 
            });
            map.addControl(external_control);*/

            var osm = new OpenLayers.Layer.OSM("Openstreetmap");
            map.addLayer(osm);

            map.setCenter(new OpenLayers.LonLat(9.95034,51.47826).transform("EPSG:4326", "EPSG:900913"), zoom);

            overlayEinwohner = new OpenLayers.Layer.Vector("Einwohner");
            overlayEnergieverbrauch = new OpenLayers.Layer.Vector("Energieverbrauch");

            var color = d3.scale.quantize()
                .range(["rgb(255, 255, 178)", "rgb(254, 217, 118)","rgb(254, 178, 76)", "rgb(253, 141, 60)","rgb(252, 78, 42)","rgb(227, 26, 28)","rgb(177, 0, 38)"]);

            d3.json("http://192.168.159.128/Sharedfolder/D3/IKSK_LK_Goe_31464_simple.json", function (collection) {


                overlayEinwohner.afterAdd = function () {                   // Add the container when the overlay is added to the map.

                    color.domain([
                            d3.min(collection.features, function(d){return d.properties.EINWOHNER;}),
                            d3.max(collection.features, function(d){return d.properties.EINWOHNER;})
                            ]); 

                    var div = d3.selectAll("#" + overlayEinwohner.div.id);
                        //get the vector layer div element

                    div.selectAll("svg").remove();                  //remove the existing svg element and create a new one

                    var svg = div.append("svg");

                    var group = svg.append("g");                        //Add a G (group) element

                    var bounds = d3.geo.bounds(collection);
                    var path = d3.geo.path()
                        .projection(project);

                    var feature = group.selectAll("path")
                        .data(collection.features)
                        .enter()
                        .append("path")
                        //.transition()
                        //.duration(9000)
                        .attr("fill",function(d) {

                            //Get data value
                            var value = d.properties.EINWOHNER;
                            //console.log(value);

                            if (value) {
                                    //If value exists…
                                    return color(value);
                            } 
                            else {
                                    //If value is undefined…
                                    return "none";
                            }
                        })
                        .on("mouseover", function(d) {
                            d3.select("#tooltip")
                                .html(d.properties.GEMEINDENA +"<br> Einwohner: "+d.properties.EINWOHNER);
                            d3.select("#tooltip").classed("hidden", false);

                        })

                        .on("mouseout", function() {

                            //Hide the tooltip
                            d3.select("#tooltip").classed("hidden", true);

                        });



                    map.events.register("moveend", map, reset);

                    reset();

                    function reset() {
                        var bottomLeft = project(bounds[0]);
                        var topRight = project(bounds[1]);

                        svg.attr("width", topRight[0] - bottomLeft[0])
                            .attr("height", bottomLeft[1] - topRight[1])
                            .style("margin-left", bottomLeft[0] + "px")
                            .style("margin-top", topRight[1] + "px");

                        group
                            .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")")
                            ;

                        feature
                            .attr("d", path);

                    }

                    function project(x) {


                        var point = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(x[0], x[1])
                            .transform("EPSG:31463", "EPSG:900913"));
                        return [point.x, point.y];
                    }

                }

                overlayEnergieverbrauch.afterAdd = function () {                    // Add the container when the overlay is added to the map.

                    color.domain([
                            d3.min(collection.features, function(d){return d.properties.Energiev_2;}),
                            d3.max(collection.features, function(d){return d.properties.Energiev_2;})
                            ]); 

                    var div = d3.selectAll("#" + overlayEnergieverbrauch.div.id);
                        //get the vector layer div element

                    div.selectAll("svg").remove();                  //remove the existing svg element and create a new one

                    var svg = div.append("svg");

                    var group = svg.append("g");                        //Add a G (group) element

                    var bounds = d3.geo.bounds(collection);
                    var path = d3.geo.path()
                        .projection(project);

                    var feature = group.selectAll("path")
                        .data(collection.features)
                        .enter()
                        .append("path")
                        //.transition()
                        //.duration(9000)
                        .attr("transform", function(d) {
                            var centroid = path.centroid(d),
                                x = centroid[0],
                                y = centroid[1];
                            return "translate(" + x + "," + y + ")"
                                + "scale(" + Math.sqrt(d.properties.EINWOHNER * 0.04 || 0) + ")"
                                + "translate(" + -x + "," + -y + ")";
                          })
                          .attr("fill", "darkred")

                        .on("mouseover", function(d) {
                            d3.select("#tooltip")
                                .text("Energieverbrauch "+d.properties.Energiev_2);
                            d3.select("#tooltip").classed("hidden", false);
                        })

                        .on("mouseout", function() {

                            //Hide the tooltip
                            d3.select("#tooltip").classed("hidden", true);                      
                        });

                    map.events.register("moveend", map, reset);

                    reset();

                    function reset() {
                        var bottomLeft = project(bounds[0]);
                        var topRight = project(bounds[1]);

                        svg.attr("width", topRight[0] - bottomLeft[0])
                            .attr("height", bottomLeft[1] - topRight[1])
                            .style("margin-left", bottomLeft[0] + "px")
                            .style("margin-top", topRight[1] + "px");

                        group
                            .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")")
                            ;

                        feature
                            .attr("d", path);

                    }

                    function project(x) {
                        var point = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(x[0], x[1])
                            .transform("EPSG:31463", "EPSG:900913"));
                        return [point.x, point.y];
                    }

                }
                //overlayEinwohner.setVisibility(false);
                //overlayEnergieverbrauch.setVisibility(false);
                map.addLayer(overlayEinwohner);
                map.addLayer(overlayEnergieverbrauch);
            });

        }


    </script>

</head>
<body onload="init()">

<div id="tooltip" class="hidden"></div>


<h1>Integriertes Klimaschutzkonzept Göttingen</h1>

    <div id="map"></div>
    <!--<div id="external_control"style="font-size:16px; padding:10px;border:1px solid black;background-color:grey;width:250px;height:100px;"></div>-->
    <script>
    function auswahlLayer1(element){
            //document.getElementById("Einwohner")setVisibility(false);
            //document.getElementById("Energieverbrauch").setVisibility(false);
            var value = element.options[element.selectedIndex].value; 
             if(value == "Einwohner"){
                console.log("Einwohner");
                document.getElementById("Einwohner").setVisibility(true);

             }
             if(value == "Energieverbrauch"){
                console.log("Energieverbrauch");
                document.getElementById("Energieverbrauch").setVisibility(true);
             }

            };
    </script>
    <div id="control" >
    <form >
        <select name="Auswahl1" size="1" onchange="auswahlLayer1(this)">
            <option value="Einwohner">Einwohner</option>
            <option value="Energieverbrauch">Energieverbrauch</option>

        </select>
    </form>
    </div>


</body>

share|improve this question
    
What are you trying to do? document.getElementById("Energieverbrauch") Won't give you anything, since they are option tags without any id. You need to pass the id to document.getElementById() –  Devdatta Tengshe Oct 3 '13 at 9:54
    
Can you add the complete code. You now have no elements with an id of Energieverbrauch or Einwohner, so it is logical these don't show up. –  johanvdw Oct 3 '13 at 9:55
    
possible duplicate of Own layerswitcher value not defined –  Devdatta Tengshe Oct 3 '13 at 9:57
    
Okay I added the whole code to my question. it is not a duplicate, it is the next problem in the same project. –  CST Oct 3 '13 at 10:37
    
@CST: can you explain how this is a separate problem? I'm skeptical, especially given the fact that your last two questions have been on the same topic, and you haven't accepted an answer on either of them yet. –  Devdatta Tengshe Oct 3 '13 at 10:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.