I am trying to modify the Vector Formats example to only display the GPX in the textarea rather than all the options in the original example but I can't get it working.
My code below currently displays [object Object] is the text area. The next stage would be to save it as a GPX file but I can't even get this part to work. Help appreciated.
<!-- The magic comes here -->
<script type="text/javascript">
function init() {
//Set the bounds of the map
var bounds = new OpenLayers.Bounds(
-139554.52234597853, -14571.288749854866,
805578.7494653241, 1322557.5275064965
);
// Create the map using the specified
// DOM element
var map = new OpenLayers.Map("main");
// Add a WMS layer
// and add to the map
var wms = new OpenLayers.Layer.WMS("Ordnance Survey",
"http://192.168.0.7:8080/geoserver/osgb/wms",
{
layers: 'osgb'
},
{
maxExtent: bounds,
maxResolution: 5223.159438501372,
projection: "EPSG:27700",
units: 'm',
transitionEffect: 'resize'
});
vectors = new OpenLayers.Layer.Vector(
"Vector Layer",
{
//renderers:renderer,
}
);
editing_toolbar_vector=new OpenLayers.Control.EditingToolbar(vectors);
// Add layers to the map
map.addLayers([wms,vectors]);
map.addControl(editing_toolbar_vector);
// Add layer switcher control
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Set the centre of the view and the starting zoom level
map.setCenter(new OpenLayers.LonLat(415526,536854), 6);
// Add Scale of current map (bottom right)
map.addControl(new OpenLayers.Control.Scale($('scale')));
// Add coordinates of mouse to the map (bottom right)
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
var options = {
hover: true,
onSelect: serialize
};
var select = new OpenLayers.Control.SelectFeature(vectors, options);
map.addControl(select);
select.activate();
}
//var out_options = {
// 'internalProjection': map.baseLayer.projection,
// 'externalProjection': "EPSG:4326"
//};
function serialize(feature) {
var str = new OpenLayers.Format.GPX({
'internalProjection': new OpenLayers.Projection("EPSG:27700"),
'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
str.write(feature);
//str = str.replace(/,/g, ', ');
document.getElementById('output').value = str;
}
</script>
</head>
<body onload="init()">
<div id="main" style="width: 100%;
height: 75%;"></div>
<div id="text">Draw route to update the output below.<br>
<div id="outputarea""><textarea id="output"></textarea></div>
</body>
