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

Convert F-G examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-14 16:33:58 -07:00
parent 2e8f4806d2
commit 88ec3b9f6c
13 changed files with 67 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/feature-animation.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Feature animation example title: Custom Animation
shortdesc: Demonstrates how to animate features. shortdesc: Demonstrates how to animate features.
docs: > docs: >
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
@@ -8,8 +8,4 @@ docs: >
is added to the layer. is added to the layer.
tags: "animation, vector, feature, flash" tags: "animation, vector, feature, flash"
--- ---
<div class="row"> <div id="map" class="map"></div>
<div class="span8">
<div id="map" class="map"></div>
</div>
</div>

24
examples/feature-move-animation.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Animate a feature movement title: Marker Animation
shortdesc: Demonstrates how to move a feature along a line. shortdesc: Demonstrates how to move a feature along a line.
docs: > docs: >
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
@@ -8,17 +8,9 @@ docs: >
is being used. is being used.
tags: "animation, feature, postcompose, polyline" tags: "animation, feature, postcompose, polyline"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <label for="speed">
<div id="map" class="map"></div> speed:&nbsp;
</div> <input id="speed" type="range" min="10" max="999" step="10" value="60">
</div> </label>
<div class="row-fluid"> <button id="start-animation">Start Animation</button>
<div class="span12">
<label for="speed">
speed:&nbsp;
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
</div>
</div>

22
examples/fractal.html
View File

@@ -1,18 +1,14 @@
--- ---
layout: example.html layout: strapless.html
title: Fractal Example title: Fractal Rendering
shortdesc: Example of a fractal. shortdesc: Example of a fractal.
docs: > docs: >
Example of a fractal. This example demonstrates how features with many vertices can be efficiently rendered.
tags: "fractal, vector" tags: "fractal, vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <label for="depth">
<div id="map" class="map"></div> depth:&nbsp;
<label for="depth"> <input id="depth" type="range" min="0" max="9" step="1" value="5">
depth:&nbsp; &nbsp;(<span id="count">#</span> points)
<input id="depth" type="range" min="0" max="9" step="1" value="5"> </label>
&nbsp;(<span id="count">#</span> points)
</label>
</div>
</div>

10
examples/full-screen-drag-rotate-and-zoom.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Full screen drag rotate and zoom example title: Full Screen Drag, Rotate, and Zoom
shortdesc: Example of drag rotate and zoom control with full screen effect. shortdesc: Example of drag rotate and zoom control with full screen effect.
docs: > docs: >
<p>Hold down <code>Shift</code> + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift</code> + drag thing again.</p> <p>Hold down <code>Shift</code> + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift</code> + drag thing again.</p>
@@ -9,8 +9,4 @@ tags: "full-screen, drag, rotate, zoom, 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">
<div id="map" class="map"></div>
</div>
</div>

10
examples/full-screen.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Full screen control example title: Full Screen Control
shortdesc: Example of a full screen control. shortdesc: Example of a full screen control.
docs: > docs: >
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p> <p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
@@ -9,8 +9,4 @@ tags: "full-screen, 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">
<div id="map" class="map"></div>
</div>
</div>

10
examples/geojson.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: GeoJSON example title: GeoJSON
shortdesc: Example of GeoJSON features. shortdesc: Example of GeoJSON features.
docs: > docs: >
Example of GeoJSON features. Example of GeoJSON features.
tags: "geojson, vector, openstreetmap" tags: "geojson, vector, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

37
examples/geolocation.html
View File

@@ -1,24 +1,21 @@
--- ---
layout: example.html layout: strapless.html
title: Geolocation example title: Geolocation
shortdesc: Example of a geolocation map. shortdesc: Using geolocation to control a map view.
docs: > docs: >
Example of a geolocation map. This example uses the Geolocation API to control the view.
tags: "geolocation, openstreetmap" tags: "geolocation, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="info" style="display: none;"></div>
<div id="map" class="map"></div> <label for="track">
<div class="span4 pull-right"> track position
<div id="info" class="alert alert-danger" style="display: none;"></div> <input id="track" type="checkbox"/>
</div> </label>
<label class="checkbox" for="track"> <p>
<input id="track" type="checkbox"/>track position position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
</label> altitude : <code id="altitude"></code>&nbsp;&nbsp;
<p>position accuracy : <code id="accuracy"></code></p> altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
<p>altitude : <code id="altitude"></code></p> heading : <code id="heading"></code>&nbsp;&nbsp;
<p>altitude accuracy : <code id="altitudeAccuracy"></code></p> speed : <code id="speed"></code>
<p>heading : <code id="heading"></code></p> </p>
<p>speed : <code id="speed"></code></p>
</div>
</div>

22
examples/getfeatureinfo-image.html
View File

@@ -1,20 +1,10 @@
--- ---
layout: example.html layout: strapless.html
title: GetFeatureInfo example (image layer) title: WMS GetFeatureInfo (Image Layer)
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. shortdesc: Using an image WMS source with GetFeatureInfo requests
docs: > docs: >
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p> This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, forEachLayerAtPixel" tags: "getfeatureinfo, forEachLayerAtPixel"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="info">&nbsp;</div>
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4 offset4 iframe-info">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>

2
examples/getfeatureinfo-image.js
View File

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.ImageWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms', url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'}, params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver', serverType: 'geoserver',
crossOrigin: '' crossOrigin: 'anonymous'
}); });
var wmsLayer = new ol.layer.Image({ var wmsLayer = new ol.layer.Image({

22
examples/getfeatureinfo-tile.html
View File

@@ -1,20 +1,10 @@
--- ---
layout: example.html layout: strapless.html
title: WMS GetFeatureInfo example (tile layer) title: WMS GetFeatureInfo (Tile Layer)
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
docs: > docs: >
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p> This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, forEachLayerAtPixel" tags: "getfeatureinfo, forEachLayerAtPixel"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="info">&nbsp;</div>
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4 offset4 iframe-info">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>

2
examples/getfeatureinfo-tile.js
View File

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms', url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'}, params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver', serverType: 'geoserver',
crossOrigin: '' crossOrigin: 'anonymous'
}); });
var wmsLayer = new ol.layer.Tile({ var wmsLayer = new ol.layer.Tile({

16
examples/gpx.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: GPX example title: GPX Data
shortdesc: Example of using the GPX source. shortdesc: Example of using the GPX source.
docs: > docs: >
Example of using the GPX source. Example of using the GPX source.
@@ -8,13 +8,5 @@ tags: "GPX"
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"> <div id="info">&nbsp;</div>
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>

10
examples/graticule.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Graticule example title: Map Graticule
shortdesc: This example shows how to add a graticule overlay to a map. shortdesc: This example shows how to add a graticule overlay to a map.
docs: > docs: >
This example shows how to add a graticule overlay to a map. This example shows how to add a graticule overlay to a map.
tags: "graticule" tags: "graticule"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>