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.

These days, I am trying to develop web map using openlayers. I copy source code from here Then I changed code to display my data.B ut it does not work, even map is also not showing. In chrome shows "Uncaught TypeError: Cannot call method 'containsLonLat' of null"

Here is the full code. Please forgive me about amount of data. Really Thanks for your time.

<!DOCTYPE html>
<html>
 <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">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="3.css" type="text/css">
<link rel="stylesheet" href="4.css" type="text/css">
<style type="text/css">
    #controlToggle li {
        list-style: none;
    }
    p {
        width: 512px;
    }
    #options {
        position: relative;
        width: 512px;
    }
    #output {
        float: right;
    }

    /* avoid pink tiles */
    .olImageLoadError {
        background-color: transparent !important;
    }
</style>
<script src="OpenLayers.js"></script>
<script type="text/javascript">
    var map, measureControls;
    function init(){
        map = new OpenLayers.Map('map_element', {
    projection: 'EPSG:5235',
    maxExtent: new OpenLayers.Bounds(105097.88755998248, 181965.81596899,
    107146.57905998248, 183739.10926899),
    maxResolution: 156543.0339,
    units: 'm'
     });

        var wmsLayer = new OpenLayers.Layer.WMS('OpenLayers                   WMS','http://localhost:8080/geoserver/sac/wms',{layers: 'sac:Luse'},{});

        map.addLayers(wmsLayer);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());


        // style the sketch fancy
        var sketchSymbolizers = {
            "Point": {
                pointRadius: 4,
                graphicName: "square",
                fillColor: "white",
                fillOpacity: 1,
                strokeWidth: 1,
                strokeOpacity: 1,
                strokeColor: "#333333"
            },
            "Line": {
                strokeWidth: 3,
                strokeOpacity: 1,
                strokeColor: "#666666",
                strokeDashstyle: "dash"
            },
            "Polygon": {
                strokeWidth: 2,
                strokeOpacity: 1,
                strokeColor: "#666666",
                fillColor: "white",
                fillOpacity: 0.3
            }
        };
        var style = new OpenLayers.Style();
        style.addRules([
            new OpenLayers.Rule({symbolizer: sketchSymbolizers})
        ]);
        var styleMap = new OpenLayers.StyleMap({"default": style});

        // allow testing of specific renderers via "?renderer=Canvas", etc
        var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
        renderer = (renderer) ? [renderer] :     OpenLayers.Layer.Vector.prototype.renderers;

        measureControls = {
            line: new OpenLayers.Control.Measure(
                OpenLayers.Handler.Path, {
                    persist: true,
                    handlerOptions: {
                        layerOptions: {
                            renderers: renderer,
                            styleMap: styleMap
                        }
                    }
                }
            ),
            polygon: new OpenLayers.Control.Measure(
                OpenLayers.Handler.Polygon, {
                    persist: true,
                    handlerOptions: {
                        layerOptions: {
                            renderers: renderer,
                            styleMap: styleMap
                        }
                    }
                }
            )
        };

        var control;
        for(var key in measureControls) {
            control = measureControls[key];
            control.events.on({
                "measure": handleMeasurements,
                "measurepartial": handleMeasurements
            });
            map.addControl(control);
        }

   map.setCenter(new OpenLayers.LonLat(106017, 102881), 10);

        document.getElementById('noneToggle').checked = true;
    }

    function handleMeasurements(event) {
        var geometry = event.geometry;
        var units = event.units;
        var order = event.order;
        var measure = event.measure;
        var element = document.getElementById('output');
        var out = "";
        if(order == 1) {
            out += "measure: " + measure.toFixed(3) + " " + units;
        } else {
            out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
        }
        element.innerHTML = out;
    }

    function toggleControl(element) {
        for(key in measureControls) {
            var control = measureControls[key];
            if(element.value == key && element.checked) {
                control.activate();
            } else {
                control.deactivate();
            }
        }
    }

    function toggleGeodesic(element) {
        for(key in measureControls) {
            var control = measureControls[key];
            control.geodesic = element.checked;
        }
    }

    function toggleImmediate(element) {
        for(key in measureControls) {
            var control = measureControls[key];
            control.setImmediate(element.checked);
        }
    }


   </script>
   </head>
  <body onload="init()">
   <h1 id="title">OpenLayers Measure Example</h1>
   <div id="tags">
    measuring, geodesic, area, length, distance
   </div>
   <p id="shortdesc">
    Demonstrates the measure control to measure distances and areas.
   </p>
   <div id="map_element" class="smallmap"></div>
   <div id="options">
    <div id="output">
    </div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
        </li>
        <li>
            <input type="radio" name="type" value="line" id="lineToggle"   onclick="toggleControl(this);" />
            <label for="lineToggle">measure distance</label>
        </li>
        <li>
            <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
            <label for="polygonToggle">measure area</label>
        </li>
        <li>
            <input type="checkbox" name="geodesic" id="geodesicToggle" onclick="toggleGeodesic(this);" />
            <label for="geodesicToggle">use geodesic measures</label>
        </li>
        <li>
            <input type="checkbox" name="immediate" id="immediateToggle" onclick="toggleImmediate(this);" />
            <label for="immediateToggle">use immediate measures</label>
        </li>
       </ul>
       <p>Note </p>
       </div>
      </body>
      </html>
share|improve this question
1  
You have a 0% accept rate for several answered questions; read these instructions to fix this. –  Mike T May 7 '12 at 6:00
1  
Thanks for your advise,I am new to this forum and sorry for mistake.Now i am aware of it. –  sacprasanna May 7 '12 at 9:27
    
No worries, thanks for catching on! –  Mike T May 7 '12 at 10:33
    
I couldn't find the problem, try to put some console outputs to identify the function that raises the error or debug the code in firefox or chrome. Ex. Before each function put a console.log('Before function x'). –  Pablo May 7 '12 at 11:35

1 Answer 1

up vote 0 down vote accepted

I don't know what is the reason for some reason I replace this line "map.addLayers(wmsLayer);" using this map.addLayers([wmsLayer]);.Now all works correctly.

I think to add one layer it is not must to use [] brackets.

Any idea?

share|improve this answer
    
map.addLayer() accepts a single layer, while map.addLayers() accepts an array of layers. The docs arent clear on the matter, but since the one is using the plural form (layers) it should be obvoius –  atlefren May 7 '12 at 22:00
    
Yes,now clear,Thanks atlefren and all –  sacprasanna May 8 '12 at 3:39

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.