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

Convert A-C examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-14 12:59:34 -07:00
parent a2f84b144f
commit 734712bf9c
17 changed files with 127 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/accessible.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Accessibility example title: Accessibility example
shortdesc: Example of an accessible map. shortdesc: Example of an accessible map.
docs: > docs: >
@@ -10,11 +10,7 @@ docs: >
tags: "accessibility, tabindex" tags: "accessibility, tabindex"
--- ---
<div class="row-fluid"> <a class="skiplink" href="#map">Go to map</a>
<div class="span12"> <div id="map" class="map" tabindex="0"></div>
<a class="skiplink" href="#map">Go to map</a> <button id="zoom-out">Zoom out</button>
<div id="map" class="map" tabindex="0"></div> <button id="zoom-in">Zoom in</button>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
</div>
</div>

30
examples/animation.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Animation example title: Animation example
shortdesc: Demonstrates animated pan, zoom, and rotation. shortdesc: Demonstrates animated pan, zoom, and rotation.
docs: > docs: >
@@ -7,21 +7,13 @@ docs: >
or more animations. or more animations.
tags: "animation" tags: "animation"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <button id="rotate-left" title="Rotate clockwise">↻</button>
<div id="map" class="map"></div> <button id="rotate-right" title="Rotate counterclockwise">↺</button>
</div> <button id="rotate-around-rome">Rotate around Rome</button>
</div> <button id="pan-to-london">Pan to London</button>
<div class="row-fluid"> <button id="elastic-to-moscow">Elastic to Moscow</button>
<div class="span12"> <button id="bounce-to-istanbul">Bounce to Istanbul</button>
<button id="rotate-left" title="Rotate clockwise">↻</button> <button id="spin-to-rome">Spin to Rome</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button> <button id="fly-to-bern">Fly to Bern</button>
<button id="rotate-around-rome">Rotate around Rome</button> <button id="spiral-to-madrid">Spiral to Madrid</button>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
<button id="spin-to-rome">Spin to Rome</button>
<button id="fly-to-bern">Fly to Bern</button>
<button id="spiral-to-madrid">Spiral to Madrid</button>
</div>
</div>

8
examples/arcgis-tiled.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Tiled ArcGIS MapServer example title: Tiled ArcGIS MapServer example
shortdesc: Example of a tiled ArcGIS layer. shortdesc: Example of a tiled ArcGIS layer.
docs: > docs: >
@@ -9,8 +9,4 @@ docs: >
<code>ol.source.XYZ</code> instead. <code>ol.source.XYZ</code> instead.
tags: arcgis, tile, tilelayer" tags: arcgis, tile, tilelayer"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

8
examples/attributions.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Attributions example title: Attributions example
shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps. shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
docs: > docs: >
@@ -8,8 +8,4 @@ docs: >
of the map gets smaller than 600 pixels. of the map gets smaller than 600 pixels.
tags: "attributions, openstreetmap" tags: "attributions, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

22
examples/bing-maps.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Bing Maps example title: Bing Maps example
shortdesc: Example of a Bing Maps layer. shortdesc: Example of a Bing Maps layer.
docs: > docs: >
@@ -8,15 +8,11 @@ tags: "bing, bing-maps"
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"></div>
<div class="span12"> <select id="layer-select">
<div id="map" class="map"></div> <option value="Aerial">Aerial</option>
<select id="layer-select"> <option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Aerial">Aerial</option> <option value="Road">Road</option>
<option value="AerialWithLabels" selected>Aerial with labels</option> <option value="collinsBart">Collins Bart</option>
<option value="Road">Road</option> <option value="ordnanceSurvey">Ordnance Survey</option>
<option value="collinsBart">Collins Bart</option> </select>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
</div>
</div>

102
examples/blend-modes.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Blend modes example title: Blend modes example
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers. shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
docs: > docs: >
@@ -20,57 +20,49 @@ docs: >
checkboxes.</p> checkboxes.</p>
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector" tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form class="form-horizontal">
<div id="map" class="map"></div> <label>
</div> <select id="blend-mode" class="form-control">
</div> <option value="source-over">source-over (default)</option>
<div class="row-fluid"> <option>source-in</option>
<div class="span12"> <option>source-out</option>
<form class="form-horizontal"> <option>source-atop</option>
<label> <option>destination-over</option>
<select id="blend-mode" class="form-control"> <option>destination-in</option>
<option value="source-over">source-over (default)</option> <option>destination-out</option>
<option>source-in</option> <option>destination-atop</option>
<option>source-out</option> <option>lighter</option>
<option>source-atop</option> <option>copy</option>
<option>destination-over</option> <option>xor</option>
<option>destination-in</option> <option>multiply</option>
<option>destination-out</option> <option>screen</option>
<option>destination-atop</option> <option>overlay</option>
<option>lighter</option> <option>darken</option>
<option>copy</option> <option>lighten</option>
<option>xor</option> <option>color-dodge</option>
<option>multiply</option> <option>color-burn</option>
<option>screen</option> <option>hard-light</option>
<option>overlay</option> <option>soft-light</option>
<option>darken</option> <option selected>difference</option>
<option>lighten</option> <option>exclusion</option>
<option>color-dodge</option> <option>hue</option>
<option>color-burn</option> <option>saturation</option>
<option>hard-light</option> <option>color</option>
<option>soft-light</option> <option>luminosity</option>
<option selected>difference</option> </select>
<option>exclusion</option> Canvas compositing / blending mode
<option>hue</option> </label>
<option>saturation</option> <label>
<option>color</option> <input type="checkbox" id="affect-red" checked>
<option>luminosity</option> Red circle affected
</select> </label>
Canvas compositing / blending mode <label>
</label> <input type="checkbox" id="affect-green" checked>
<label> Green circle affected
<input type="checkbox" id="affect-red" checked> </label>
Red circle affected <label>
</label> <input type="checkbox" id="affect-blue" checked>
<label> Blue circle affected
<input type="checkbox" id="affect-green" checked> </label>
Green circle affected </form>
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>
</div>
</div>

16
examples/box-selection.html
View File

@@ -1,20 +1,12 @@
--- ---
layout: example.html layout: strapless.html
title: Box selection example title: Box selection example
shortdesc: Using a DragBox interaction to select features. shortdesc: Using a DragBox interaction to select features.
docs: > docs: >
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p> to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
<p>Use <code>Ctrl+drag</code> (<code>Meta+drag</code> on Mac) to draw boxes.</p> <p>Use <code>Ctrl+drag</code> (<code>Command+drag</code> on Mac) to draw boxes.</p>
tags: "DragBox, feature, selection, box" tags: "DragBox, feature, selection, box"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="info">No countries selected</div>
<div id="map" class="map"></div>
</div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>

1
examples/button-title.css
View File

@@ -1,4 +1,3 @@
.tooltip-inner { .tooltip-inner {
white-space: nowrap; white-space: nowrap;
} }

12
examples/button-title.html
View File

@@ -1,13 +1,13 @@
--- ---
layout: example.html layout: strapless.html
title: Custom tooltips example title: Custom tooltips example
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap. shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
docs: > docs: >
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>. This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
tags: "custom, tooltip" tags: "custom, tooltip"
resources:
- https://code.jquery.com/jquery-1.11.2.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/canvas-tiles.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Canvas tiles example title: Canvas tiles example
shortdesc: Renders tiles with coordinates for debugging. shortdesc: Renders tiles with coordinates for debugging.
docs: > docs: >
@@ -7,11 +7,7 @@ docs: >
displayed tile coordinates are OpenLayers tile coordinates. These increase displayed tile coordinates are OpenLayers tile coordinates. These increase
from bottom to top, but standard XYZ tiling scheme coordinates increase from from bottom to top, but standard XYZ tiling scheme coordinates increase from
top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use
`-y - 1`. `-y - 1`.
tags: "layers, openstreetmap, canvas" tags: "layers, openstreetmap, canvas"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

32
examples/center.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Advanced View Positioning example title: Advanced View Positioning example
shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
docs: > docs: >
@@ -13,22 +13,16 @@ docs: >
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p> <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
tags: "center, rotation, openstreetmap" tags: "center, rotation, openstreetmap"
--- ---
<div class="row-fluid"> <div class="mapcontainer">
<div class="span12 mapcontainer"> <div id="map" class="map"></div>
<div id="map" class="map"></div> <div class="padding-top"></div>
<div class="padding-top"></div> <div class="padding-left"></div>
<div class="padding-left"></div> <div class="padding-right"></div>
<div class="padding-right"></div> <div class="padding-bottom"></div>
<div class="padding-bottom"></div> <div class="center"></div>
<div class="center"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
<button id="centerlausanne">Center on Lausanne</button>
</div>
</div> </div>
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
<button id="centerlausanne">Center on Lausanne</button>

8
examples/cluster.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Clustering example title: Clustering example
shortdesc: Example of using <code>ol.source.Cluster</code>. shortdesc: Example of using <code>ol.source.Cluster</code>.
docs: > docs: >
This example shows how to do clustering on point features. This example shows how to do clustering on point features.
tags: "cluster, vector" tags: "cluster, vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

42
examples/color-manipulation.html
View File

@@ -1,30 +1,26 @@
--- ---
layout: example.html layout: strapless.html
title: Manipulating colors with a raster source title: Manipulating colors with a raster source
shortdesc: Demonstrates color manipulation with a raster source. shortdesc: Demonstrates color manipulation with a raster source.
docs: > docs: >
A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering. A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
tags: "color, hue, lightness, chroma" tags: "color, hue, lightness, chroma"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <table class="controls">
<div id="map" class="map"></div> <tr>
<table class="controls"> <td>hue</td>
<tr> <td><span id="hueOut"></span>°</td>
<td>hue</td> <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
<td><span id="hueOut"></span>°</td> </tr>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td> <tr>
</tr> <td>chroma</td>
<tr> <td><span id="chromaOut"></span> %</td>
<td>chroma</td> <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
<td><span id="chromaOut"></span> %</td> </tr>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td> <tr>
</tr> <td>lightness</td>
<tr> <td><span id="lightnessOut"></span> %</td>
<td>lightness</td> <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
<td><span id="lightnessOut"></span> %</td> </tr>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td> </table>
</tr>
</table>
</div>
</div>

6
examples/custom-controls.html
View File

@@ -6,8 +6,4 @@ docs: >
This example creates a "rotate to north" button. This example creates a "rotate to north" button.
tags: "custom, control" tags: "custom, control"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

2
examples/custom-controls.js
View File

@@ -75,7 +75,7 @@ var map = new ol.Map({
target: 'map', target: 'map',
view: new ol.View({ view: new ol.View({
center: [0, 0], center: [0, 0],
zoom: 2, zoom: 3,
rotation: 1 rotation: 1
}) })
}); });

6
examples/custom-interactions.html
View File

@@ -7,8 +7,4 @@ docs: >
Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features. Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
tags: "drag, feature, vector, editing, custom, interaction" tags: "drag, feature, vector, editing, custom, interaction"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

3
examples/custom-interactions.js
View File

@@ -19,8 +19,7 @@ goog.require('ol.style.Style');
/** /**
* Define a namespace for the application. * Define a namespace for the application.
*/ */
window.app = {}; var app = {};
var app = window.app;