From d838214f964b12c5f3301cc3d8a645c720495461 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 17 Nov 2015 10:15:00 -0700 Subject: [PATCH] Convert X-Z examples to strapless template --- examples/xyz-esri-4326-512.html | 10 +++------- examples/xyz-esri.html | 10 +++------- examples/xyz-retina.html | 10 +++------- examples/xyz.html | 10 +++------- examples/xyz.js | 28 +--------------------------- examples/zoom-constrained.html | 10 +++------- examples/zoomify.html | 10 +++------- examples/zoomify.js | 17 ++++------------- examples/zoomslider.html | 26 ++++++++++---------------- 9 files changed, 33 insertions(+), 98 deletions(-) diff --git a/examples/xyz-esri-4326-512.html b/examples/xyz-esri-4326-512.html index 11bb035375..3815597f23 100644 --- a/examples/xyz-esri-4326-512.html +++ b/examples/xyz-esri-4326-512.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: XYZ Esri EPSG:4326 tileSize 512 example +layout: strapless.html +title: ArcGIS REST with 512x512 Tiles shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles. docs: > ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile url function is used to handle zoom level offsets. tags: "xyz, esri, tilesize, custom projection" --- -
-
-
-
-
+
diff --git a/examples/xyz-esri.html b/examples/xyz-esri.html index a8341a4a41..7e7fc25c89 100644 --- a/examples/xyz-esri.html +++ b/examples/xyz-esri.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: XYZ Esri example +layout: strapless.html +title: XYZ Esri shortdesc: Example of a XYZ source using Esri tiles. docs: > ArcGIS REST tile services are supported by `ol.source.XYZ`. tags: "xyz, esri, arcgis rest" --- -
-
-
-
-
+
diff --git a/examples/xyz-retina.html b/examples/xyz-retina.html index 3ed7d0ce99..da70ed04d4 100644 --- a/examples/xyz-retina.html +++ b/examples/xyz-retina.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: XYZ Retina tiles example +layout: strapless.html +title: XYZ Retina Tiles shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ. docs: > The ol.source.XYZ must contain `tilePixelRatio` parameter. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/). tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio" --- -
-
-
-
-
+
diff --git a/examples/xyz.html b/examples/xyz.html index 666d33c5b3..bb2339f3eb 100644 --- a/examples/xyz.html +++ b/examples/xyz.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: XYZ Example +layout: strapless.html +title: XYZ shortdesc: Example of a XYZ source. docs: > The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates. tags: "xyz" --- -
-
-
-
-
+
diff --git a/examples/xyz.js b/examples/xyz.js index 041e6d983f..b87b91b577 100644 --- a/examples/xyz.js +++ b/examples/xyz.js @@ -1,41 +1,15 @@ -goog.require('ol.Attribution'); goog.require('ol.Map'); goog.require('ol.View'); -goog.require('ol.control'); goog.require('ol.layer.Tile'); -goog.require('ol.source.OSM'); goog.require('ol.source.XYZ'); -var attribution = new ol.Attribution({ - html: 'Tiles © ' + - 'National Library of Scotland' -}); - var map = new ol.Map({ target: 'map', - controls: ol.control.defaults({ - attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ - collapsible: false - }) - }), layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM({ - attributions: [ - new ol.Attribution({ - html: 'Tiles © ' + - 'OpenCycleMap' - }), - ol.source.OSM.ATTRIBUTION - ], - url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' - }) - }), new ol.layer.Tile({ source: new ol.source.XYZ({ - attributions: [attribution], - url: 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png' + url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' }) }) ], diff --git a/examples/zoom-constrained.html b/examples/zoom-constrained.html index 4493b5e962..b5dc9a798e 100644 --- a/examples/zoom-constrained.html +++ b/examples/zoom-constrained.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Zoom Constrained Example +layout: strapless.html +title: Constrained Zoom shortdesc: Example of a zoom constrained view. docs: > This map has a view that is constrained between zoom levels 9 and 13. This is done using the `minZoom` and `maxZoom` view options. @@ -8,8 +8,4 @@ tags: "bing, zoom, minZoom, maxZoom" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
+
diff --git a/examples/zoomify.html b/examples/zoomify.html index 45961b3e85..c44a1d5468 100644 --- a/examples/zoomify.html +++ b/examples/zoomify.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Zoomify example +layout: strapless.html +title: Zoomify shortdesc: Example of a Zoomify source. docs: > Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. tags: "zoomify, deep zoom, pixel, projection" --- -
-
-
-
-
+
diff --git a/examples/zoomify.js b/examples/zoomify.js index f84fc14b69..6421960aad 100644 --- a/examples/zoomify.js +++ b/examples/zoomify.js @@ -5,17 +5,8 @@ goog.require('ol.proj'); goog.require('ol.proj.Projection'); goog.require('ol.source.Zoomify'); -// This server does not support CORS, and so is incompatible with WebGL. -//var imgWidth = 8001; -//var imgHeight = 6943; -//var url = 'http://mapy.mzk.cz/AA22/0103/'; -//var crossOrigin = undefined; - var imgWidth = 9911; var imgHeight = 6100; -var url = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' + - '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/'; -var crossOrigin = 'anonymous'; var imgCenter = [imgWidth / 2, - imgHeight / 2]; @@ -29,9 +20,10 @@ var proj = new ol.proj.Projection({ }); var source = new ol.source.Zoomify({ - url: url, + url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' + + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/', size: [imgWidth, imgHeight], - crossOrigin: crossOrigin + crossOrigin: 'anonymous' }); var map = new ol.Map({ @@ -40,12 +32,11 @@ var map = new ol.Map({ source: source }) ], - renderer: common.getRendererFromQueryString(), target: 'map', view: new ol.View({ projection: proj, center: imgCenter, - zoom: 0, + zoom: 2, // constrain the center: center cannot be set outside // this extent extent: [0, -imgHeight, imgWidth, 0] diff --git a/examples/zoomslider.html b/examples/zoomslider.html index e61f1251af..89258cda03 100644 --- a/examples/zoomslider.html +++ b/examples/zoomslider.html @@ -1,22 +1,16 @@ --- -layout: example.html -title: Zoom slider example +layout: strapless.html +title: Zoom Sliders shortdesc: Example of various ZoomSlider controls. docs: > This example shows how to add a zoom slider to a map and how to customize it. tags: "zoom, zoomslider, slider, style, styling, css, control" --- -
-
-

Default style

-
-
-
-

Placed between zoom controls

-
-
-
-

Horizontal and completely re-styled

-
-
-
+

Default style

+
+ +

Placed between zoom controls

+
+ +

Horizontal and completely re-styled

+