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

7
examples/raster.html
View File

@@ -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
---
<div class="row-fluid">
<div class="span12 rel">
<div class="rel">
<div id="map" class="map"></div>
<div id="plot"></div>
</div>
</div>

6
examples/region-growing.html
View File

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

8
examples/regularshape.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

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

@@ -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
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<form class="form-inline">
<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>
<label for="render-edges">
Render reprojection edges
<input type="checkbox" id="render-edges">
</label>
</div>
</form>
</div>

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

@@ -65,12 +65,10 @@ 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'];
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];
@@ -85,9 +83,7 @@ function search(query) {
}
}
}
}
setProjection(null, null, null, null);
}
});
}

8
examples/reprojection-image.html
View File

@@ -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
---
<div class="row-fluid">
<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(),
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
})
});

8
examples/reprojection-wgs84.html
View File

@@ -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"
---
<div class="row-fluid">
<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({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
zoom: 2
})
});

13
examples/reprojection.html
View File

@@ -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,10 +8,7 @@ tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi"
resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<form class="form-inline">
<div class="col-md-3">
<label>Base map:</label>
@@ -43,6 +40,8 @@ resources:
<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)
<label>
Render reprojection edges
<input type="checkbox" id="render-edges">
</label>
</form>
</div>

9
examples/reprojection.js
View File

@@ -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 = '';

10
examples/rotation.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Rotation example
layout: strapless.html
title: View Rotation
shortdesc: Example of a rotated map.
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>