-1

I look after a website which displays UK Ordnance Survey maps for people going on walks in SW England, and it relies on displaying a marker on an OS map, in response either to an alphanumeric OSGB grid reference, appended as a query string to the name of the HTML file which displays the map, or to a click on the OS map produced by the HTML file, in the absence of a query string. This has all worked well for several years, on both Windows PCs and mobile devices, using OS OpenSpace, which is based on OpenLayers 2, but now Ordnance Survey have decided to enforce a new system based on Open Layers 6, and requiring a complete re-code of the JavaScript. OS provide example code for various scenarios, from which I have re-written my code to run perfectly on a Windows PC with a mouse, but it fails on an iPad or an iPhone, particularly if the iPad is several years old.

Using a current Apple device, I cannot display a scaled vector graphic on an OS map, either at hard-coded co-ordinates, or in response to a tap on a map. A tap will however bring up a pop-up at the tapped point, and a swipe on the map will pan it. Using an iPad several years old, in addition to the above problems, opening two fingers will not zoom the map, and a swipe will not pan it. The only things that work are the + and - buttons on the map.

I have read that I may need to include a Controls section within my Map command, along the lines of:

controls: [
    new OpenLayers.Control.TouchNavigation({
        dragPanOptions: {
                    enableKinetic: true
                }
        }),
            new OpenLayers.Control.Zoom()
],

but if I include this code, my JavaScript crashes, and the JavaScript Error Console within MS Edge gives error message 'OpenLayers is not defined'

Ordnance Survey tell me that my problem 'is an issue relating to the mapping library, OpenLayers, rather than our APIs' so my question is, how do I get code based on the OS examples to run on mobile devices of any age, in the same way my existing code based on Open Layers 2 has run for several years?

I will gladly supply a copy of my code which works on a Windows PC, but not on an Apple device, on request.

Allan Stead
  • 1
  • 2

1 Answers1

0

OpenLayers needs polyfills on older devices/browsers. Try adding

   <script src="https://unpkg.com/elm-pep"></script>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>

before the ol.js script. The default controls should be sufficient (the code you have used is Openlayers 2 format and will not work with OpenLayers 6).

Mike
  • 16,042
  • 2
  • 14
  • 30
  • The polyfills code from Mike has worked a treat on older devices, which now respond to two-finger gestures, and to a swipe - thank you. – Allan Stead Oct 29 '20 at 07:46
  • I still have the problem that although I can add a marker to an OS map on a Windows PC, no mobile device will display a marker, either at a hard-coded point, or at the location of a tap on the map, though a tap will display a pop-up quite happily. – Allan Stead Oct 29 '20 at 07:55
  • I presume you are using this example https://labs.os.uk/public/openspace-migration/examples/adding-markers ? Try adding `imgSize: [48, 48],` to the `ol.style.Icon` options as some browsers (including IE on Windows) cannot read the size of SVG images (or you could find alternative PNG images to use as icons). – Mike Oct 29 '20 at 09:45
  • I've tried inserting the imgSize code from Mike, modifying it to suit the size of the marker I'm trying to show, but this has no effect. I don't think the problem is related to svg images, as I've tried substituting png and jpg images as markers, and these don't show up on an iPad either. – Allan Stead Oct 30 '20 at 07:38
  • Strangely, if I go to the OS Data Hub migration site and choose the How Do I Add A Marker page, I see the red marker, on either a Windows PC or a recent iPad. But, if I download the code for the map and the marker, make no changes other than inserting my API key and amending the src entry to refer to the location of the marker in my svg folder, and use Firefox or MS Edge to run the downloaded, edited and saved html file, then the red marker shows up as expected on a Windows PC, but not on my recent iPad. I cannot explain this. – Allan Stead Oct 30 '20 at 07:38
  • Here is the code I am using to add a marker, including Mike's imgSize suggestion` // Add a marker to the map var marker = new ol.Feature({ geometry: new ol.geom.Point([286947, 71627]) }); var markerLayerSource = new ol.source.Vector({ features: [marker] }); var markerLayer = new ol.layer.Vector({ source: markerLayerSource, style: new ol.style.Style({ image: new ol.style.Icon({ imgSize: [100, 200], src: 'svg/Triangle Red.svg', scale: 0.25 }) }) }); map.addLayer(markerLayer);` – Allan Stead Oct 30 '20 at 07:49
  • Does it work if you link directly to the OS image, for example `src: 'https://raw.githubusercontent.com/OrdnanceSurvey/openspace-migration/28a4ab6fc9b02adc47a7f1d834cc0f9edcd0a7f0/icons/marker-red.svg'` ? – Mike Oct 30 '20 at 09:47
  • Direct link works a treat, even on an old iPad, displaying a little off centre, but even this comes right if I remove the imgSize code. Thinking I might have made a mess of the folder addressing in my original src statement, I copied my marker code to the same folder as the main html page, and removed all the folder code, but although a Windows PC picks up the graphic, the iPad doesn't. – Allan Stead Oct 30 '20 at 13:48
  • Here is my code for the graphic `` – Allan Stead Oct 30 '20 at 13:49
  • Are you loading the html and svg from a server, or are they copied to the device storage where they would be accessed using file:// protocol? – Mike Oct 30 '20 at 15:43
  • My Windows computer gets the files from a Dropbox folder on its own hard drive, this folder being shared with the iPad, so I guess the iPad is getting the files from a server. I’m only experimenting with OS Data Hub at the moment, as a replacement for OS OpenSpace. Once everything is working, the plan would be for all files to live on the server for our club website, and be accessed by users from there. Is this where I’m going wrong? – Allan Stead Oct 30 '20 at 20:42
  • Yes, it seems to be an IOS security setting not accepting your dev setup. There should be no problem when you have it on a server. – Mike Oct 30 '20 at 21:41
  • Quite right - I uploaded my svg folder to our club website, changed the src reference in each of my development files to point to the appropriate uploaded graphic, and each file now displays its graphic on an iPad of any age - many thanks to Mike for his patient and expert guidance. – Allan Stead Oct 31 '20 at 08:06