Show how to wrap world in xyz-esri-4326-512 example

examples/xyz-esri-4326-512.js

@@ -28,8 +28,8 @@ for (z = 0; z < 16; ++z) {
   resolutions[z] = maxResolution / Math.pow(2, z);
 }
 
-var url = 'http://services.arcgisonline.com/arcgis/rest/services/' +
+var urlTemplate = 'http://services.arcgisonline.com/arcgis/rest/services/' +
-    'ESRI_Imagery_World_2D/MapServer/tile/';
+    'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}';
 
 var map = new ol.Map({
   target: 'map',
@@ -39,8 +39,20 @@ var map = new ol.Map({
       source: new ol.source.TileImage({
         attributions: [attribution],
         tileUrlFunction: function(tileCoord, pixelRatio, projection) {
-          return url + tileCoord[0] + '/' + (-tileCoord[2] - 1) + '/' +
+          var z = tileCoord[0];
-              tileCoord[1];
+          var x = tileCoord[1];
+          var y = -tileCoord[2] - 1;
+          // wrap the world on the X axis
+          var n = Math.pow(2, z + 1); // 2 tiles at z=0
+          x = x % n;
+          if (x * n < 0) {
+            // x and n differ in sign so add n to wrap the result
+            // to the correct sign
+            x = x + n;
+          }
+          return urlTemplate.replace('{z}', z.toString())
+              .replace('{y}', y.toString())
+              .replace('{x}', x.toString());
         },
         projection: projection,
         tileGrid: new ol.tilegrid.TileGrid({