ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert R examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-16 09:08:17 -07:00
parent e6343ca272
commit c984bedd09
12 changed files with 102 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/raster.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Raster Source title: Raster Source
shortdesc: Demonstrates pixelwise operations with a raster source. shortdesc: Demonstrates pixelwise operations with a raster source.
docs: > docs: >
@@ -21,13 +21,10 @@ docs: >
tags: "raster, pixel" tags: "raster, pixel"
resources: resources:
- http://d3js.org/d3.v3.min.js - http://d3js.org/d3.v3.min.js
- raster.css
cloak: cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
--- ---
<div class="row-fluid"> <div class="rel">
<div class="span12 rel"> <div id="map" class="map"></div>
<div id="map" class="map"></div> <div id="plot"></div>
<div id="plot"></div>
</div>
</div> </div>

20
examples/region-growing.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Region Growing title: Region Growing
shortdesc: Grow a region from a seed pixel shortdesc: Grow a region from a seed pixel
docs: > docs: >
@@ -27,14 +27,10 @@ tags: "raster, region growing"
cloak: cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
--- ---
<div class="row-fluid"> <div id="map" class="map" style="cursor: pointer"></div>
<div class="span12"> <table class="controls">
<div id="map" class="map" style="cursor: pointer"></div> <tr>
<table class="controls"> <td>Threshold: <span id="threshold-value"></span></td>
<tr> <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
<td>Threshold: <span id="threshold-value"></span></td> </tr>
<td><input id="threshold" type="range" min="1" max="50" value="20"></td> </table>
</tr>
</table>
</div>
</div>

10
examples/regularshape.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Regular Shape example title: Regular Shapes
shortdesc: Example of some Regular Shape styles. shortdesc: Example of some Regular Shape styles.
docs: > docs: >
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x" tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

29
examples/reprojection-by-code.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Reprojection with EPSG.io database search title: Reprojection with EPSG.io Search
shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
docs: > docs: >
This example shows client-side raster reprojection capabilities from This example shows client-side raster reprojection capabilities from
@@ -10,17 +10,16 @@ tags: "reprojection, projection, proj4js, mapquest, epsg.io"
resources: resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form class="form-inline">
<div id="map" class="map"></div> <label for="epsg-query">Search projection:</label>
<input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
<button id="epsg-search" class="btn">Search</button>
<span id="epsg-result"></span>
<div>
<label for="render-edges">
Render reprojection edges
<input type="checkbox" id="render-edges">
</label>
</div> </div>
<form class="form-inline"> </form>
<label for="epsg-query">Search projection:</label>
<input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
<button id="epsg-search" class="btn">Search</button>
<span id="epsg-result"></span>
<div>
<label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label>
</div>
</form>
</div>

36
examples/reprojection-by-code.js
View File

@@ -64,30 +64,26 @@ function setProjection(code, name, proj4def, bbox) {
function search(query) { function search(query) {
resultSpan.innerHTML = 'Searching...'; resultSpan.innerHTML = 'Searching ...';
$.ajax({ fetch('http://epsg.io/?format=json&q=' + query).then(function(response) {
url: 'http://epsg.io/?format=json&q=' + query, return response.json();
dataType: 'jsonp', }).then(function(json) {
success: function(response) { var results = json['results'];
if (response) { if (results && results.length > 0) {
var results = response['results']; for (var i = 0, ii = results.length; i < ii; i++) {
if (results && results.length > 0) { var result = results[i];
for (var i = 0, ii = results.length; i < ii; i++) { if (result) {
var result = results[i]; var code = result['code'], name = result['name'],
if (result) { proj4def = result['proj4'], bbox = result['bbox'];
var code = result['code'], name = result['name'], if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
proj4def = result['proj4'], bbox = result['bbox']; bbox && bbox.length == 4) {
if (code && code.length > 0 && proj4def && proj4def.length > 0 && setProjection(code, name, proj4def, bbox);
bbox && bbox.length == 4) { return;
setProjection(code, name, proj4def, bbox);
return;
}
}
} }
} }
} }
setProjection(null, null, null, null);
} }
setProjection(null, null, null, null);
}); });
} }

10
examples/reprojection-image.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Image reprojection example title: Image Reprojection
shortdesc: Demonstrates client-side reprojection of single image source. shortdesc: Demonstrates client-side reprojection of single image source.
docs: > docs: >
This example shows client-side reprojection of single image source. This example shows client-side reprojection of single image source.
@@ -8,8 +8,4 @@ tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
resources: resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

4
examples/reprojection-image.js
View File

@@ -32,8 +32,8 @@ var map = new ol.Map({
renderer: common.getRendererFromQueryString(), renderer: common.getRendererFromQueryString(),
target: 'map', target: 'map',
view: new ol.View({ view: new ol.View({
center: ol.proj.transform(ol.extent.getCenter(imageExtent), center: ol.proj.transform(
'EPSG:27700', 'EPSG:3857'), ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'),
zoom: 4 zoom: 4
}) })
}); });

10
examples/reprojection-wgs84.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: OpenStreetMap reprojection example title: OpenStreetMap Reprojection
shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84. shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84.
docs: > docs: >
This example shows client-side reprojection of OpenStreetMap in WGS84. This example shows client-side reprojection of OpenStreetMap in WGS84.
tags: "reprojection, projection, openstreetmap, wgs84, tile" tags: "reprojection, projection, openstreetmap, wgs84, tile"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

2
examples/reprojection-wgs84.js
View File

@@ -14,6 +14,6 @@ var map = new ol.Map({
view: new ol.View({ view: new ol.View({
projection: 'EPSG:4326', projection: 'EPSG:4326',
center: [0, 0], center: [0, 0],
zoom: 1 zoom: 2
}) })
}); });

77
examples/reprojection.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Raster reprojection example title: Raster Reprojection
shortdesc: Demonstrates client-side raster reprojection between various projections. shortdesc: Demonstrates client-side raster reprojection between various projections.
docs: > docs: >
This example shows client-side raster reprojection between various projections. This example shows client-side raster reprojection between various projections.
@@ -8,41 +8,40 @@ tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi"
resources: resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form class="form-inline">
<div id="map" class="map"></div> <div class="col-md-3">
<label>Base map:</label>
<select id="base-layer">
<option value="mapquest">MapQuest (EPSG:3857)</option>
<option value="wms4326">WMS (EPSG:4326)</option>
</select>
</div> </div>
<form class="form-inline"> <div class="col-md-4">
<div class="col-md-3"> <label>Overlay map:</label>
<label>Base map:</label> <select id="overlay-layer">
<select id="base-layer"> <option value="bng">British National Grid (EPSG:27700)</option>
<option value="mapquest">MapQuest (EPSG:3857)</option> <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
<option value="wms4326">WMS (EPSG:4326)</option> <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
</select> <option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
</div> <option value="states">United States (EPSG:3857)</option>
<div class="col-md-4"> </select>
<label>Overlay map:</label> </div>
<select id="overlay-layer"> <div class="col-md-5">
<option value="bng">British National Grid (EPSG:27700)</option> <label>View projection:</label>
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option> <select id="view-projection">
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option> <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
<option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option> <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
<option value="states">United States (EPSG:3857)</option> <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
</select> <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
</div> <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
<div class="col-md-5"> <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
<label>View projection:</label> <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<select id="view-projection"> <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option> </select>
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option> </div>
<option value="ESRI:54009">Mollweide (ESRI:54009)</option> <label>
<option value="EPSG:27700">British National Grid (EPSG:27700)</option> Render reprojection edges
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option> <input type="checkbox" id="render-edges">
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option> </label>
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option> </form>
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
</select>
</div>
<label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label> (only displayed on reprojected data)
</form>
</div>

9
examples/reprojection.js
View File

@@ -98,9 +98,12 @@ layers['wms21781'] = new ol.layer.Tile({
}); });
var parser = new ol.format.WMTSCapabilities(); var parser = new ol.format.WMTSCapabilities();
$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' + var url = 'http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) { 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
var result = parser.read(response); fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, var options = ol.source.WMTS.optionsFromCapabilities(result,
{layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'}); {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
options.crossOrigin = ''; options.crossOrigin = '';

12
examples/rotation.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Rotation example title: View Rotation
shortdesc: Example of a rotated map. shortdesc: Example of a rotated map.
docs: > docs: >
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p> <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
tags: "rotation, openstreetmap" tags: "rotation, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>