0

I am new to the new structure of OS Maps. I have added a map to my website

   var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: serviceUrl + '/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey,
                projection: 'EPSG:27700',
                tileGrid: tilegrid
            })
        })
    ],
    target: 'osmap',
    view: new ol.View({
        projection: 'EPSG:27700',
        resolutions: tilegrid.getResolutions(),
        minZoom: 0,
        maxZoom: 9,
        center: [ 338084, 497501.6 ],
        zoom: 7
    })
});

and this works fine. I am trying to add GPX overlays to the map to highlight walking routes and sometimes they align correctly, but most of the time are mis-aligned. When mis-aligned they also seem to scroll at different rates to the main map when dragging the map.. Also they appear to be in a small "bounding box" as parts of the overlay disappear.

I add the GPX layers :-

claiffe = new ol.layer.Vector({
source: new ol.source.Vector({
    url: '/media/walks/claiffeheights.gpx',
    format: new ol.format.GPX()
}),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: [0,0,255,0.5],
            width: 4
        })
    })
});

map.addLayer(claiffe);

This is how the map should look

Correct Overlays

This shows incorrect overlay position.

Incorrect Overlay Position

Overlay route truncated at the bottom whilst dragging

Truncated overlay when the map is dragged

I've done some more investigation , and when the error occurs an extra overlay is created and transform is applied to this layer :-

<div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
    <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
        <canvas width="1200" height="768" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(1, 0, 0, 1, 0, 0);">
        </canvas>
    </div>
    <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
        <canvas width="1500" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(0.8, 0, 0, 0.8, 0, 0);" height="960">
        </canvas>
    </div>
</div>

When it works correctly only 1 "ol-layer" is present.

In the CSS there is a rule:-

canvas, img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

After removing the "max-width: 100%;" the layers line up correctly

17
  • You forgot to mention you are using OpenLayers for map display.
    – TomazicM
    Jun 17, 2021 at 13:57
  • Apologies TomazicM... I've also noticed that it may be related to the resolution of the Display used, so I am guessing it is some sort of scaling issue. Jun 17, 2021 at 14:11
  • Welcome to Geographic Information Systems! Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works
    – Ian Turton
    Jun 17, 2021 at 14:30
  • please add a screen shot
    – Ian Turton
    Jun 17, 2021 at 14:30
  • Does this happen only on some devices or browsers, or when using browser zoom? If so do any OpenLayers examples such as openlayers.org/en/latest/examples/modify-features.html or the OS example labs.os.uk/public/openspace-migration/examples/adding-gpx have the same problem? Setting pixelRatio: 1 in the map options might fix it.
    – Mike
    Jun 17, 2021 at 16:23

1 Answer 1

1

When the device pixel ratio is 1 both the tile layer and the vector layer will use the same canvas (unless the view is rotated). If you have a high resolution display or are using browser zoom the vector layer canvas is optimised and uses a separate canvas enlarged to use device pixels instead of css pixels (tiles cannot be optimised beyound their native resolution). You would therefore need to exclude canvas in your map div from your rule:

canvas:not(#osmap canvas), img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

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.