These are the test files required to reproduce the issues found rendering VectorImage layers on Retina iPads. In short, the layers do not render.
In order to reproduce, you must have a 4th gen iPad (tested) or newer (not tested). You then should simply open the test site in safari, and you will not see the VectorImage layer render.
This code is taken from: http://openlayers.org/en/v3.0.0/examples/image-vector-layer.html.
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>OL iPad Retina Test</title> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script> | |
| <style> | |
| html,body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="info"></div> | |
| <script src="./map.js"></script> | |
| </body> | |
| </html> |
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.MapQuest({layer: 'sat'}) | |
| }), | |
| new ol.layer.Image({ | |
| source: new ol.source.ImageVector({ | |
| source: new ol.source.GeoJSON({ | |
| projection: 'EPSG:3857', | |
| url: '/countries.geojson' | |
| }), | |
| style: new ol.style.Style({ | |
| fill: new ol.style.Fill({ | |
| color: 'rgba(255, 255, 255, 0.6)' | |
| }), | |
| stroke: new ol.style.Stroke({ | |
| color: '#319FD3', | |
| width: 1 | |
| }) | |
| }) | |
| }) | |
| }) | |
| ], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 1 | |
| }) | |
| }); | |
| var featureOverlay = new ol.FeatureOverlay({ | |
| map: map, | |
| style: new ol.style.Style({ | |
| stroke: new ol.style.Stroke({ | |
| color: '#f00', | |
| width: 1 | |
| }), | |
| fill: new ol.style.Fill({ | |
| color: 'rgba(255,0,0,0.1)' | |
| }) | |
| }) | |
| }); | |
| var highlight; | |
| var displayFeatureInfo = function(pixel) { | |
| var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { | |
| return feature; | |
| }); | |
| var info = document.getElementById('info'); | |
| if (feature) { | |
| info.innerHTML = feature.getId() + ': ' + feature.get('name'); | |
| } else { | |
| info.innerHTML = ' '; | |
| } | |
| if (feature !== highlight) { | |
| if (highlight) { | |
| featureOverlay.removeFeature(highlight); | |
| } | |
| if (feature) { | |
| featureOverlay.addFeature(feature); | |
| } | |
| highlight = feature; | |
| } | |
| }; | |
| $(map.getViewport()).on('mousemove', function(evt) { | |
| var pixel = map.getEventPixel(evt.originalEvent); | |
| displayFeatureInfo(pixel); | |
| }); | |
| map.on('click', function(evt) { | |
| displayFeatureInfo(evt.pixel); | |
| }); |