0

I am trying to read a gpx file and add it as a layer to Open Layers. Here is my code snippet

 osMap = new OpenLayers.Map({
        div: "map",
        maxExtent: extent,
        resolutions: mapResolutions,
        units: "m",
        projection: "EPSG:27700",
        restrictedExtent: restrictedExtent                         
    });

    osMap.addLayer(new OpenLayers.Layer.XYZ(
        "Leisure",
        ['https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=Leisure%2027700&style=true&format=image%2Fpng&tileMatrixSet=EPSG%3A27700&tileMatrix=EPSG%3A27700%3A${z}&tileRow=${y}&tileCol=${x}' + key
        ]
    ));

    vectorLayer = new OpenLayers.Layer.Vector("MarkersTrail"); 
    osMap.addLayer(vectorLayer);     

    osMap.setCenter(new OpenLayers.LonLat(400000, 400000), 0);

    var layer;
    var path = "filename";

    if((layer = osMap.getLayer(path)) == null) 
    {
        var gpxLayer = new OpenLayers.Layer.Vector("gpx", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url:path + ".gpx",
                format: new OpenLayers.Format.GPX({
internalProjection: "EPSG:27700"
                    extractStyles: true,
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });

        gpxLayer.id = path;
        gpxLayer.setVisibility(false, false);
        osMap.addLayer(gpxLayer);


    }
    layer = osMap.getLayer(path);
    if(obj.checked == true) 
    {
        layer.setVisibility(true, false);
    }
    else 
    {
        layer.setVisibility(false, false);
    }

However it is not displaying the layer? Think I've missed a trick here....

0

Are there any CORS errors shown on the console log? OpenLayers 2 HTTP protocol frequently fails to load resources because it uses unnecessarily complex XHR requests which cause CORS preflight requests which most servers do not expect or handle. Preceding your code with a redefinition of the OpenLayers code responsible for the problem often helps.

OpenLayers.Request.issue = function(config) {        
    // apply default config - proxy host may have changed
    var defaultConfig = OpenLayers.Util.extend(
        this.DEFAULT_CONFIG,
        {proxy: OpenLayers.ProxyHost}
    );
    config = config || {};
    config.headers = config.headers || {};
    config = OpenLayers.Util.applyDefaults(config, defaultConfig);
    config.headers = OpenLayers.Util.applyDefaults(config.headers, defaultConfig.headers);
    // Unwanted code removed. DO NOT add the "X-Requested-With" header.

    // create request, open, and set headers
    var request = new OpenLayers.Request.XMLHttpRequest();
    var url = OpenLayers.Util.urlAppend(config.url, 
        OpenLayers.Util.getParameterString(config.params || {}));
    url = OpenLayers.Request.makeSameOrigin(url, config.proxy);
    request.open(
        config.method, url, config.async, config.user, config.password
    );
    for(var header in config.headers) {
        request.setRequestHeader(header, config.headers[header]);
    }

    var events = this.events;

    // we want to execute runCallbacks with "this" as the
    // execution scope
    var self = this;

    request.onreadystatechange = function() {
        if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
            var proceed = events.triggerEvent(
                "complete",
                {request: request, config: config, requestUrl: url}
            );
            if(proceed !== false) {
                self.runCallbacks(
                    {request: request, config: config, requestUrl: url}
                );
            }
        }
    };

    // send request (optionally with data) and return
    // call in a timeout for asynchronous requests so the return is
    // available before readyState == 4 for cached docs
    if(config.async === false) {
        request.send(config.data);
    } else {
        window.setTimeout(function(){
            if (request.readyState !== 0) { // W3C: 0-UNSENT
                request.send(config.data);
            }
        }, 0);
    }
    return request;
};

For reprojection to EPSG:27700 you will need to specify internal projection:

            format: new OpenLayers.Format.GPX({
                internalProjection: "EPSG:27700",
                ...

It seems the workaround to use proj4 version 2 isn't compatible here and only proj4 version 1.1 will work.

  • Nothing in console apart from: OpenLayers.js:553 XHR finished loading: GET "test.domain.com/filename.gpx" – Simon Jun 6 at 15:35
  • It might be data related. Here mikenunn.16mb.com/demo/ol2gpx.html is working (although it needs the no preflight patch) demo based on wiki.openstreetmap.org/wiki/Openlayers_Track_example but using data from a more recent example. You could try testing your code with the same data url. – Mike Jun 6 at 15:58
  • I have noticed my gpx file appears to be being loaded but is rendered in a single location i.e. each way point on top of the previous and not in correct location. Basically the bottom left corner of my map. Essentially 0,0. Could it be projection? – Simon Jun 10 at 11:50
  • Yes, I just tried adding a GPX to some old OL2 code and had the same problem. I've added the fix to my answer. – Mike Jun 10 at 15:24
  • Thanks Mike, version 1.1 does not appear to be available on proj4js – Simon Jun 10 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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