From c984bedd09c92f96f3d4e0a9a8fc935614025c50 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 16 Nov 2015 09:08:17 -0700 Subject: [PATCH] Convert R examples to strapless template --- examples/raster.html | 11 ++--- examples/region-growing.html | 20 ++++---- examples/regularshape.html | 10 ++-- examples/reprojection-by-code.html | 29 ++++++----- examples/reprojection-by-code.js | 36 +++++++------- examples/reprojection-image.html | 10 ++-- examples/reprojection-image.js | 4 +- examples/reprojection-wgs84.html | 10 ++-- examples/reprojection-wgs84.js | 2 +- examples/reprojection.html | 77 +++++++++++++++--------------- examples/reprojection.js | 9 ++-- examples/rotation.html | 12 ++--- 12 files changed, 102 insertions(+), 128 deletions(-) diff --git a/examples/raster.html b/examples/raster.html index e8342a3c19..28a3cf5d71 100644 --- a/examples/raster.html +++ b/examples/raster.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Raster Source shortdesc: Demonstrates pixelwise operations with a raster source. docs: > @@ -21,13 +21,10 @@ docs: > tags: "raster, pixel" resources: - http://d3js.org/d3.v3.min.js - - raster.css cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
+
+
+
diff --git a/examples/region-growing.html b/examples/region-growing.html index 1aa24b0fba..6a2f5ba856 100644 --- a/examples/region-growing.html +++ b/examples/region-growing.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Region Growing shortdesc: Grow a region from a seed pixel docs: > @@ -27,14 +27,10 @@ tags: "raster, region growing" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
- - - - - -
Threshold:
-
-
+
+ + + + + +
Threshold:
diff --git a/examples/regularshape.html b/examples/regularshape.html index bd5e2cbb88..a4449c155c 100644 --- a/examples/regularshape.html +++ b/examples/regularshape.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Regular Shape example +layout: strapless.html +title: Regular Shapes shortdesc: Example of some Regular Shape styles. docs: > tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x" --- -
-
-
-
-
+
diff --git a/examples/reprojection-by-code.html b/examples/reprojection-by-code.html index 1965729d06..a5a4dd950a 100644 --- a/examples/reprojection-by-code.html +++ b/examples/reprojection-by-code.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Reprojection with EPSG.io database search +layout: strapless.html +title: Reprojection with EPSG.io Search shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection docs: > This example shows client-side raster reprojection capabilities from @@ -10,17 +10,16 @@ tags: "reprojection, projection, proj4js, mapquest, epsg.io" resources: - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js --- -
-
-
+
+
+ + + + +
+
- - - - - -
- -
-
-
+ diff --git a/examples/reprojection-by-code.js b/examples/reprojection-by-code.js index 96203a4177..b9c0f357bb 100644 --- a/examples/reprojection-by-code.js +++ b/examples/reprojection-by-code.js @@ -64,30 +64,26 @@ function setProjection(code, name, proj4def, bbox) { function search(query) { - resultSpan.innerHTML = 'Searching...'; - $.ajax({ - url: 'http://epsg.io/?format=json&q=' + query, - dataType: 'jsonp', - success: function(response) { - if (response) { - var results = response['results']; - if (results && results.length > 0) { - for (var i = 0, ii = results.length; i < ii; i++) { - var result = results[i]; - if (result) { - var code = result['code'], name = result['name'], - proj4def = result['proj4'], bbox = result['bbox']; - if (code && code.length > 0 && proj4def && proj4def.length > 0 && - bbox && bbox.length == 4) { - setProjection(code, name, proj4def, bbox); - return; - } - } + resultSpan.innerHTML = 'Searching ...'; + fetch('http://epsg.io/?format=json&q=' + query).then(function(response) { + return response.json(); + }).then(function(json) { + var results = json['results']; + if (results && results.length > 0) { + for (var i = 0, ii = results.length; i < ii; i++) { + var result = results[i]; + if (result) { + var code = result['code'], name = result['name'], + proj4def = result['proj4'], bbox = result['bbox']; + if (code && code.length > 0 && proj4def && proj4def.length > 0 && + bbox && bbox.length == 4) { + setProjection(code, name, proj4def, bbox); + return; } } } - setProjection(null, null, null, null); } + setProjection(null, null, null, null); }); } diff --git a/examples/reprojection-image.html b/examples/reprojection-image.html index 845c4aa669..fdee8cb711 100644 --- a/examples/reprojection-image.html +++ b/examples/reprojection-image.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Image reprojection example +layout: strapless.html +title: Image Reprojection shortdesc: Demonstrates client-side reprojection of single image source. docs: > This example shows client-side reprojection of single image source. @@ -8,8 +8,4 @@ tags: "reprojection, projection, proj4js, mapquest, image, imagestatic" resources: - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js --- -
-
-
-
-
+
diff --git a/examples/reprojection-image.js b/examples/reprojection-image.js index 3688097980..0e92bb0cf8 100644 --- a/examples/reprojection-image.js +++ b/examples/reprojection-image.js @@ -32,8 +32,8 @@ var map = new ol.Map({ renderer: common.getRendererFromQueryString(), target: 'map', view: new ol.View({ - center: ol.proj.transform(ol.extent.getCenter(imageExtent), - 'EPSG:27700', 'EPSG:3857'), + center: ol.proj.transform( + ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'), zoom: 4 }) }); diff --git a/examples/reprojection-wgs84.html b/examples/reprojection-wgs84.html index 1e4bd1a627..73558c0f39 100644 --- a/examples/reprojection-wgs84.html +++ b/examples/reprojection-wgs84.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: OpenStreetMap reprojection example +layout: strapless.html +title: OpenStreetMap Reprojection shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84. docs: > This example shows client-side reprojection of OpenStreetMap in WGS84. tags: "reprojection, projection, openstreetmap, wgs84, tile" --- -
-
-
-
-
+
diff --git a/examples/reprojection-wgs84.js b/examples/reprojection-wgs84.js index 6f85d7d219..9aaf52f108 100644 --- a/examples/reprojection-wgs84.js +++ b/examples/reprojection-wgs84.js @@ -14,6 +14,6 @@ var map = new ol.Map({ view: new ol.View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 1 + zoom: 2 }) }); diff --git a/examples/reprojection.html b/examples/reprojection.html index dc3af997db..b0c46a7b53 100644 --- a/examples/reprojection.html +++ b/examples/reprojection.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Raster reprojection example +layout: strapless.html +title: Raster Reprojection shortdesc: Demonstrates client-side raster reprojection between various projections. docs: > This example shows client-side raster reprojection between various projections. @@ -8,41 +8,40 @@ tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi" resources: - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js --- -
-
-
+
+
+
+ +
- -
- - -
-
- - -
-
- - -
- (only displayed on reprojected data) -
-
+
+ + +
+
+ + +
+ + diff --git a/examples/reprojection.js b/examples/reprojection.js index dec799b8eb..b460b4659f 100644 --- a/examples/reprojection.js +++ b/examples/reprojection.js @@ -98,9 +98,12 @@ layers['wms21781'] = new ol.layer.Tile({ }); var parser = new ol.format.WMTSCapabilities(); -$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' + - 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) { - var result = parser.read(response); +var url = 'http://map1.vis.earthdata.nasa.gov/wmts-arctic/' + + 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities'; +fetch(url).then(function(response) { + return response.text(); +}).then(function(text) { + var result = parser.read(text); var options = ol.source.WMTS.optionsFromCapabilities(result, {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'}); options.crossOrigin = ''; diff --git a/examples/rotation.html b/examples/rotation.html index 85714fcafc..7de0158c41 100644 --- a/examples/rotation.html +++ b/examples/rotation.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Rotation example +layout: strapless.html +title: View Rotation shortdesc: Example of a rotated map. docs: > -

Use Alt+Shift+drag to rotate the map.

+

Use Alt+Shift+Drag to rotate the map.

tags: "rotation, openstreetmap" --- -
-
-
-
-
+