I write code using ext js,openlayers and GeoExt for measuring length and area
,it is working inside inside of india in the world map but this measure tool is not working outside of india in the world map.
My code for Measure length:
To Load map:
var projWGS84 = new OpenLayers.Projection("EPSG:4326");
var projSphericalMercator = new OpenLayers.Projection("EPSG:900913");
var bounds = new OpenLayers.Bounds(68.137, 6.783, 97.336, 37.086);
bounds.transform(projWGS84, projSphericalMercator);
map.maxExtent = bounds;
var gphy = new OpenLayers.Layer.Google("Google Street", {
'sphericalMercator':true
//maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508)
}
);
var osmLayer = new OpenLayers.Layer.OSM();
// Add the background images via WMS
// Add the background images via WMS
//map.addLayer(bglayer);
// map.addControl(new OpenLayers.Control.MousePosition());
map.addLayers([gphy, osmLayer]);
Measure Length:
Measure = new Ext.SplitButton({
text:"Measure",
iconCls:"icon-measure-length",
toggleGroup:"navigate",
group: "navigate",
enableToggle:true,
allowDepress:false,
handler: function(button, event) {
// allowDepress should deal with this first condition
if(!button.pressed) {
button.toggle();
} else {
button.menu.items.itemAt(activeIndex).setChecked(t rue);
}
},
listeners: {
toggle: function(button, pressed) {
// toggleGroup should handle this
if(!pressed) {
button.menu.items.each(function(i) {
i.setChecked(false);
});
}
},
render: function(button) {
// toggleGroup should handle this
Ext.ButtonToggleMgr.register(button);
}
},
menu: new Ext.menu.Menu({
items: [
new Ext.menu.CheckItem(
new GeoExt.Action({
text: "Length",
toggleGroup:"navigate",
iconCls:"icon-measure-length",
group: "navigate",
enableToggle:true,
allowDepress:false,
map: map,
control: new OpenLayers.Control.Measure(OpenLayers.Handler.Path , {
eventListeners: {
measure: function(evt) {
Ext.MessageBox.show({
title: 'Line length :',
buttons: Ext.MessageBox.OK,
width:200,
msg:"Line Length: " + evt.measure.toFixed(2) + " " + evt.units
});
}
}
})
})
)
}
})
})
)
]
})
})
,it is working inside inside of india in the world map but this measure tool is not working outside of india in the world map.
My code for Measure length:
To Load map:
var projWGS84 = new OpenLayers.Projection("EPSG:4326");
var projSphericalMercator = new OpenLayers.Projection("EPSG:900913");
var bounds = new OpenLayers.Bounds(68.137, 6.783, 97.336, 37.086);
bounds.transform(projWGS84, projSphericalMercator);
map.maxExtent = bounds;
var gphy = new OpenLayers.Layer.Google("Google Street", {
'sphericalMercator':true
//maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508)
}
);
var osmLayer = new OpenLayers.Layer.OSM();
// Add the background images via WMS
// Add the background images via WMS
//map.addLayer(bglayer);
// map.addControl(new OpenLayers.Control.MousePosition());
map.addLayers([gphy, osmLayer]);
Measure Length:
Measure = new Ext.SplitButton({
text:"Measure",
iconCls:"icon-measure-length",
toggleGroup:"navigate",
group: "navigate",
enableToggle:true,
allowDepress:false,
handler: function(button, event) {
// allowDepress should deal with this first condition
if(!button.pressed) {
button.toggle();
} else {
button.menu.items.itemAt(activeIndex).setChecked(t rue);
}
},
listeners: {
toggle: function(button, pressed) {
// toggleGroup should handle this
if(!pressed) {
button.menu.items.each(function(i) {
i.setChecked(false);
});
}
},
render: function(button) {
// toggleGroup should handle this
Ext.ButtonToggleMgr.register(button);
}
},
menu: new Ext.menu.Menu({
items: [
new Ext.menu.CheckItem(
new GeoExt.Action({
text: "Length",
toggleGroup:"navigate",
iconCls:"icon-measure-length",
group: "navigate",
enableToggle:true,
allowDepress:false,
map: map,
control: new OpenLayers.Control.Measure(OpenLayers.Handler.Path , {
eventListeners: {
measure: function(evt) {
Ext.MessageBox.show({
title: 'Line length :',
buttons: Ext.MessageBox.OK,
width:200,
msg:"Line Length: " + evt.measure.toFixed(2) + " " + evt.units
});
}
}
})
})
)
}
})
})
)
]
})
})