getting “TypeError :bounds is null” in firebug

Question

i've got something error when I run my code in firebug..

here this code :

<script type="text/javascript" src="OpenLayers.js"></script>

        <?php
            mysql_connect("localhost", "root", "") or die("koneksi gagal");
            mysql_select_db("jogja") or die ("database tidak bisa dibuka");

                $query="SELECT * FROM jogja ORDER BY idkab";
                $result= mysql_query($query);

                $value=array();
                $kab=array();

                while($data=mysql_fetch_array($result))
                {
                    $value[$data["idkab"]] = $data["value"];
                    $kab[$data["idkab"]] = $data["kab"];
                }

                $bataskelas = array(0, 500, 1000, 2000);
                $warnakelas = array("#EEFFFF", "#6DD5FF", "#19A3FF", "#0048FF");
    ?>

        <script type="text/javascript">

            var map;
            var jogja;
            var data = <?php echo json_encode($value); ?>;
            var kab = <?php echo json_encode($kab); ?>;
            var batas = <?php echo json_encode($bataskelas); ?>;
            var warna = <?php echo json_encode($warnakelas); ?>;    

        function init(){
            map = new OpenLayers.Map('map',{
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.MousePosition(),
            ]});

            var context = {
                getColor: function(feature){
                var id = feature.attributes.IDKAB;
                var val=data[id];
                var color = "white";

                var i =0;
                while(i < batas.length-1){
                    if (val < batas[i+1]){
                        color = warna[i];
                        break;
                    }
                    i++;
                }
                    if (val !=null && color == "white"){
                        color = warna[batas.length-1];
                    }
                    return color;
                },

                getLabel: function (feature){
                    return wilayah[feature.attributes.IDKAB];
                }
            };

            var template = {
                strokeColor: "#808080",
                strokeWidth: 1,
                graphicZIndex: 1,
                fillColor: "${getColor}",
                label: "${getLabel}",
                labelAlign: "cm"

            };

            var style = new OpenLayers.Style(template, {context: context});
            var myStyle = new OpenLayers.StyleMap(style);

            jogja = new OpenLayers.Layer.GML ("GML", "gml/jogja.gml", {
                        isBaseLayer: true, styleMap: myStyle});

            jogja.events.on({'loadend': onLoadEnd});

            map.addLayer(jogja);
            map.zoomToMaxExtent();

        }
        function onLoadEnd(){
            var ext = jogja.getDataExtent();
            map.zoomToExtent(ext,false);
        }


    </script>

and here screenshot error :

what should I do to avoiding this error?? because of this error the map don't show out..

-thanks for answering-

Answer 1

I haven't run your code, but I would guess the error happens at map.zoomToMaxExtent(); at this point you haven't told your map what its maximum extent is. Before the GML loads (which then triggers onLoadEnd) the map has no data, so its bounds are null.

Try removing map.zoomToMaxExtent(); from your init function. The map should do what you expect when the GML has loaded.

If this doesn't help then you need to either follow drnextgis's advice and use a more readable OL script for debugging or litter your code with console.log or (gasp) alerts so you can see how far your code gets before failing.