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
shortdesc: Example of an accessible map.
docs: >
@@ -10,11 +10,7 @@ docs: >
tags: "accessibility, tabindex"
---
<div class="row-fluid">
<div class="span12">
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
</div>
</div>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>

30
examples/animation.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Animation example
shortdesc: Demonstrates animated pan, zoom, and rotation.
docs: >
@@ -7,21 +7,13 @@ docs: >
or more animations.
tags: "animation"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
<button id="rotate-around-rome">Rotate around Rome</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>
<div id="map" class="map"></div>
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
<button id="rotate-around-rome">Rotate around Rome</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>

8
examples/arcgis-tiled.html
View File

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

8
examples/attributions.html
View File

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

22
examples/bing-maps.html
View File

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

102
examples/blend-modes.html
View File

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

16
examples/box-selection.html
View File

@@ -1,20 +1,12 @@
---
layout: example.html
layout: strapless.html
title: Box selection example
shortdesc: Using a DragBox interaction to select features.
docs: >
<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>
<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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">No countries selected</div>

1
examples/button-title.css
View File

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

12
examples/button-title.html
View File

@@ -1,13 +1,13 @@
---
layout: example.html
layout: strapless.html
title: Custom tooltips example
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
docs: >
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
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 class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/canvas-tiles.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Canvas tiles example
shortdesc: Renders tiles with coordinates for debugging.
docs: >
@@ -7,11 +7,7 @@ docs: >
displayed tile coordinates are OpenLayers tile coordinates. These increase
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
`-y - 1`.
`-y - 1`.
tags: "layers, openstreetmap, canvas"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

32
examples/center.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
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.
docs: >
@@ -13,22 +13,16 @@ docs: >
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
tags: "center, rotation, openstreetmap"
---
<div class="row-fluid">
<div class="span12 mapcontainer">
<div id="map" class="map"></div>
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></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 class="mapcontainer">
<div id="map" class="map"></div>
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></div>
<div class="center"></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
shortdesc: Example of using <code>ol.source.Cluster</code>.
docs: >
This example shows how to do clustering on point features.
tags: "cluster, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></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
shortdesc: Demonstrates color manipulation with a raster source.
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.
tags: "color, hue, lightness, chroma"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>hue</td>
<td><span id="hueOut"></span>°</td>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
</tr>
<tr>
<td>chroma</td>
<td><span id="chromaOut"></span> %</td>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
</tr>
<tr>
<td>lightness</td>
<td><span id="lightnessOut"></span> %</td>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
</tr>
</table>
</div>
</div>
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>hue</td>
<td><span id="hueOut"></span>°</td>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
</tr>
<tr>
<td>chroma</td>
<td><span id="chromaOut"></span> %</td>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
</tr>
<tr>
<td>lightness</td>
<td><span id="lightnessOut"></span> %</td>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
</tr>
</table>

6
examples/custom-controls.html
View File

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

2
examples/custom-controls.js
View File

@@ -75,7 +75,7 @@ var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
zoom: 3,
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.
tags: "drag, feature, vector, editing, custom, interaction"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

3
examples/custom-interactions.js
View File

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