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>
