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",
                layers: 'osgb'

                maxExtent: bounds,
                maxResolution: 5223.159438501372,
                projection: "EPSG:27700",
                units: 'm',
                transitionEffect: 'resize'


                vectors = new OpenLayers.Layer.Vector(
                    "Vector Layer",

            editing_toolbar_vector=new OpenLayers.Control.EditingToolbar(vectors);
            // Add layers to the map


            // 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);


        //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 = str.replace(/,/g, ', ');
            document.getElementById('output').value = str;
<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>

1 Answer 1


You should write document.getElementById('output').value = str.write(feature);

  • Thank you that works. I had since redone my modified version of the vectors example and got it working but the version I posted above I prefer now that it actually works.
    – user15965
    Commented Mar 11, 2013 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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