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

Convert S-T examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-16 15:20:20 -07:00
parent c984bedd09
commit baed03d50d
26 changed files with 204 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/scale-line.html
View File

@@ -1,20 +1,16 @@
---
layout: example.html
title: Scale line example
layout: strapless.html
title: Scale Line
shortdesc: Example of a scale line.
docs: >
tags: "scale-line, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<select id="units">
<option value="degrees">degrees</option>
<option value="imperial">imperial inch</option>
<option value="us">us inch</option>
<option value="nautical">nautical mile</option>
<option value="metric">metric</option>
</select>
</div>
</div>
<div id="map" class="map"></div>
<select id="units">
<option value="degrees">degrees</option>
<option value="imperial">imperial inch</option>
<option value="us">us inch</option>
<option value="nautical">nautical mile</option>
<option value="metric" selected>metric</option>
</select>

11
examples/scale-line.js
View File

@@ -30,8 +30,9 @@ var map = new ol.Map({
});
var unitsSelect = $('#units');
unitsSelect.on('change', function() {
scaleLineControl.setUnits(this.value);
});
unitsSelect.val(scaleLineControl.getUnits());
var unitsSelect = document.getElementById('units');
function onChange() {
scaleLineControl.setUnits(unitsSelect.value);
}
unitsSelect.addEventListener('change', onChange);
onChange();

36
examples/select-features.html
View File

@@ -1,26 +1,22 @@
---
layout: example.html
title: Select features example
layout: strapless.html
title: Select Features
shortdesc: Example of using the Select interaction.
docs: >
Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
<form class="form-inline">
<label>Action type &nbsp;</label>
<select id="type" class="form-control">
<option value="none" selected>None</option>
<option value="singleclick">Single-click</option>
<option value="click">Click</option>
<option value="pointermove">Hover</option>
<option value="altclick">Alt+Click</option>
</select>
<span id="status">&nbsp;0 selected features</span>
</form>
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
tags: "select, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Action type &nbsp;</label>
<select id="type" class="form-control">
<option value="click" selected>Click</option>
<option value="singleclick">Single-click</option>
<option value="pointermove">Hover</option>
<option value="altclick">Alt+Click</option>
<option value="none">None</option>
</select>
<span id="status">&nbsp;0 selected features</span>
</form>

5
examples/select-features.js
View File

@@ -71,9 +71,10 @@ var changeInteraction = function() {
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
$('#status').html('&nbsp;' + e.target.getFeatures().getLength() +
document.getElementById('status').innerText = '&nbsp;' +
e.target.getFeatures().getLength() +
' selected features (last operation selected ' + e.selected.length +
' and deselected ' + e.deselected.length + ' features)');
' and deselected ' + e.deselected.length + ' features)';
});
}
};

10
examples/semi-transparent-layer.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Semi-transparent layer example
layout: strapless.html
title: Semi-Transparent Layer
shortdesc: Example of a map with a semi-transparent layer.
docs: >
This example will display a tiled MaxBox layer semi-transparently over a MapQuest background.
tags: "transparent, mapquest, tilejson"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

2
examples/semi-transparent-layer.js
View File

@@ -22,6 +22,6 @@ var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-77.93255, 37.9555]),
zoom: 5
zoom: 7
})
});

36
examples/shaded-relief.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Shaded Relief
shortdesc: Calculate shaded relief from elevation data
docs: >
@@ -25,22 +25,18 @@ docs: >
</p>
tags: "raster, shaded relief"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>vertical exaggeration: <span id="vertOut"></span>x</td>
<td><input id="vert" type="range" min="1" max="5" value="1"/></td>
</tr>
<tr>
<td>sun elevation: <span id="sunElOut"></span>°</td>
<td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
</tr>
<tr>
<td>sun azimuth: <span id="sunAzOut"></span>°</td>
<td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
</tr>
</table>
</div>
</div>
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>vertical exaggeration: <span id="vertOut"></span>x</td>
<td><input id="vert" type="range" min="1" max="5" value="1"/></td>
</tr>
<tr>
<td>sun elevation: <span id="sunElOut"></span>°</td>
<td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
</tr>
<tr>
<td>sun azimuth: <span id="sunAzOut"></span>°</td>
<td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
</tr>
</table>

6
examples/shaded-relief.js
View File

@@ -3,8 +3,8 @@ goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Image');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
goog.require('ol.source.Raster');
goog.require('ol.source.TileJSON');
goog.require('ol.source.XYZ');
@@ -117,9 +117,7 @@ var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/tschaub.miapgppd.jsonp'
})
source: new ol.source.OSM()
}),
new ol.layer.Image({
opacity: 0.3,

28
examples/side-by-side.html
View File

@@ -1,25 +1,17 @@
---
layout: example.html
title: Side-by-side example
layout: strapless.html
title: Shared Views
shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
docs: >
The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
---
<div class="row-fluid">
<div class="span4">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
</div>
<div class="span4">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
</div>
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
<h4>DOM</h4>
<div id="domMap" class="map"></div>

52
examples/snap.html
View File

@@ -1,38 +1,34 @@
---
layout: example.html
title: Snap interaction example
layout: strapless.html
title: Snap Interaction
shortdesc: Example of using the snap interaction together with draw and modify interactions.
docs: >
Example of using the snap interaction together with
draw and modify interactions. The snap interaction must be added
last, as it needs to be the first to handle the
<code>pointermove</code> event.</p>
<form id="options-form" automplete="off">
<div class="radio">
<label>
<input type="radio" name="interaction" value="draw" id="draw" checked>
Draw &nbsp;
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="interaction" value="modify">
Modify &nbsp;
</label>
</div>
<div class="form-group">
<label>Draw type &nbsp;</label>
<select name="draw-type" id="draw-type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
</form>
tags: "draw, edit, modify, vector, snap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="map" class="map"></div>
<form id="options-form" automplete="off">
<div class="radio">
<label>
<input type="radio" name="interaction" value="draw" id="draw" checked>
Draw &nbsp;
</label>
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="interaction" value="modify">
Modify &nbsp;
</label>
</div>
<div class="form-group">
<label>Draw type &nbsp;</label>
<select name="draw-type" id="draw-type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
</form>

10
examples/sphere-mollweide.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Sphere Mollweide example
layout: strapless.html
title: Sphere Mollweide
shortdesc: Example of a Sphere Mollweide map with a Graticule component.
docs: >
Example of a Sphere Mollweide map with a Graticule component.
@@ -8,8 +8,4 @@ tags: "graticule, Mollweide, projection, proj4js"
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>
<div id="map" class="map"></div>

10
examples/stamen.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Stamen example
layout: strapless.html
title: Stamen Tiles
shortdesc: Example of a Stamen tile source.
docs: >
Two layers are composed: the watercolor base layer with the terrain labels.
tags: "stamen, watercolor, terrain-labels, two-layers"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/static-image.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Static image example
layout: strapless.html
title: Static Image
shortdesc: Example of a static image layer.
docs: >
<p>
@@ -11,8 +11,4 @@ docs: >
</p>
tags: "static image, xkcd"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/symbol-atlas-webgl.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Symbols with WebGL example
layout: strapless.html
title: Symbols with WebGL
shortdesc: Using symbols in an atlas with WebGL.
docs: >
<p>When using symbol styles with WebGL, OpenLayers would render the symbol
@@ -11,8 +11,4 @@ docs: >
of a symbol style, will create atlases for the symbols.</p>
tags: "webgl, symbol, atlas, vector, point"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

125
examples/synthetic-lines.html
View File

@@ -1,69 +1,66 @@
---
layout: example.html
title: Synthetic lines example
layout: strapless.html
title: Synthetic Lines
shortdesc: Synthetic lines example.
docs: >
<p>Performance results:</p>
<table border="1">
<thead>
<tr>
<th>Device/Browser</th>
<th>200 lines</th>
<th>500 lines</th>
<th>1000 lines</th>
<th>2000 lines</th>
<th>5000 lines</th>
<th>10000 lines</th>
<th>20000 lines</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mac Book Air / Chrome 33 canary</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
</tr>
<tr>
<td>Mac Book Air / FireFox 25</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>22 fps</td>
<td>6 fps</td>
</tr>
<tr>
<td>Mac Book Air / Safari 7</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>40 fps</td>
<td>10 fps</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>iPhone 4S / iOS 7 / Safari</td>
<td>60 fps</td>
<td>33 fps</td>
<td>15 fps</td>
<td>5 fps</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
tags: "vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<p>Performance results:</p>
<table border="1">
<thead>
<tr>
<th>Device/Browser</th>
<th>200 lines</th>
<th>500 lines</th>
<th>1000 lines</th>
<th>2000 lines</th>
<th>5000 lines</th>
<th>10000 lines</th>
<th>20000 lines</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mac Book Air / Chrome 33 canary</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
</tr>
<tr>
<td>Mac Book Air / FireFox 25</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>22 fps</td>
<td>6 fps</td>
</tr>
<tr>
<td>Mac Book Air / Safari 7</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>40 fps</td>
<td>10 fps</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>iPhone 4S / iOS 7 / Safari</td>
<td>60 fps</td>
<td>33 fps</td>
<td>15 fps</td>
<td>5 fps</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>

10
examples/synthetic-points.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Synthetic points example
layout: strapless.html
title: Synthetic Points
shortdesc: Synthetic points example.
docs: >
tags: "vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

22
examples/teleport.html
View File

@@ -1,21 +1,11 @@
---
layout: example.html
title: Teleport example
layout: strapless.html
title: Teleporting Maps
shortdesc: Example of moving a map from one target to another.
docs: >
<p>Click on the Teleport button below the map to move the map from one target to another.</p>
<p>Click on the teleport button the map to move the map from one target to another.</p>
tags: "teleport, openstreetmap"
---
<div class="row-fluid">
<div class="span8">
<div id="map1" class="map"></div>
</div>
<div class="span4">
<div id="map2" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<a id="teleport" href="#" class="btn">Teleport</a>
</div>
</div>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<button id="teleport">Teleport</button>

12
examples/tile-load-events.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Tile load events example
layout: strapless.html
title: Tile Load Events
shortdesc: Example using tile load events.
docs: >
Image tile sources fire events related to tile loading. You can
@@ -11,9 +11,7 @@ docs: >
This example creates a "rotate to north" button.
tags: "tile, events, loading"
---
<div class="row-fluid">
<div class="span12 wrapper">
<div id="map" class="map"></div>
<div id="progress"></div>
</div>
<div class="wrapper">
<div id="map" class="map"></div>
<div id="progress"></div>
</div>

10
examples/tilejson.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: TileJSON example
layout: strapless.html
title: TileJSON
shortdesc: Example of a TileJSON layer.
docs: >
Example of a TileJSON layer.
tags: "tilejson"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

11
examples/tileutfgrid.html
View File

@@ -1,18 +1,13 @@
---
layout: example.html
title: TileUTFGrid example
layout: strapless.html
title: Tiled UTFGrid
shortdesc: This example shows how to read data from a TileUTFGrid layer.
docs: >
<p>Point to a country to see its name and flag.</p>
Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
tags: "utfgrid, tileutfgrid, tilejson"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<div style="display: none;">
<!-- Overlay with the country info -->
<div id="country-info">

18
examples/tissot.html
View File

@@ -1,18 +1,12 @@
---
layout: example.html
title: Tissot indicatrix example
layout: strapless.html
title: Tissot Indicatrix
shortdesc: Draw Tissot's indicatrices on maps.
docs: >
Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
tags: "tissot, circle"
---
<div class="row-fluid">
<div class="span6">
<h4>EPSG:4326</h4>
<div id="map4326" class="map"></div>
</div>
<div class="span6">
<h4>EPSG:3857</h4>
<div id="map3857" class="map"></div>
</div>
</div>
<h4>EPSG:4326</h4>
<div id="map4326" class="map"></div>
<h4>EPSG:3857</h4>
<div id="map3857" class="map"></div>

10
examples/topojson.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: TopoJSON example
layout: strapless.html
title: TopoJSON
shortdesc: Demonstrates rendering of features from a TopoJSON topology.
docs: >
This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
tags: "topojson, vector, style"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/translate-features.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Translate features example
layout: strapless.html
title: Translate Features
shortdesc: Example of a translate features interaction.
docs: >
This example demonstrates how the translate and select interactions can be used together. Zoom in to an area of interest and click to select a feature. Then drag the feature around to move it elsewhere on the map.
tags: "drag, translate, feature, vector, editing"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

15
examples/translate-features.js
View File

@@ -2,8 +2,6 @@ goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.format.GeoJSON');
goog.require('ol.geom.LineString');
goog.require('ol.geom.Point');
goog.require('ol.interaction');
goog.require('ol.interaction.Select');
goog.require('ol.interaction.Translate');
@@ -24,17 +22,6 @@ var vector = new ol.layer.Vector({
})
});
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
var vector2 = new ol.layer.Vector({
source: new ol.source.Vector({
features: [pointFeature, lineFeature]
})
});
var select = new ol.interaction.Select();
var translate = new ol.interaction.Translate({
@@ -43,7 +30,7 @@ var translate = new ol.interaction.Translate({
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, translate]),
layers: [raster, vector, vector2],
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],

12
examples/turf.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: turf.js Example
layout: strapless.html
title: turf.js
shortdesc: Example on how to use turf.js with OpenLayers 3.
docs: >
Example showing the integration of <a href="http://turfjs.org">turf.js</a>
@@ -9,11 +9,5 @@ docs: >
tags: "vector, turfjs, along, distance"
resources:
- https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

6
examples/turf.js
View File

@@ -12,9 +12,11 @@ goog.require('ol.source.Vector');
var source = new ol.source.Vector();
$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
fetch('data/geojson/roads-seoul.geojson').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(response);
var features = format.readFeatures(json);
var street = features[0];
// convert to a turf.js feature