[GIS] Save GPX from drawn feature in OpenLayers

gpxopenlayers-2

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>

Best Answer

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

Related Question