From 5cfb4910df074c9f82da62a65413038ea9832003 Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Thu, 2 Apr 2015 16:50:23 +0200 Subject: [PATCH] Port over graticule, heatmap-earthquakes, hue-saturation, icon-sprite-webgl, icon, igc examples --- examples_src/graticule.html | 64 ++++-------------- examples_src/heatmap-earthquakes.html | 82 ++++++----------------- examples_src/hue-saturation.css | 6 ++ examples_src/hue-saturation.html | 96 +++++++-------------------- examples_src/icon-sprite-webgl.html | 72 +++++--------------- examples_src/icon.css | 6 ++ examples_src/icon.html | 75 ++++----------------- examples_src/igc.html | 73 +++++--------------- 8 files changed, 116 insertions(+), 358 deletions(-) create mode 100644 examples_src/hue-saturation.css create mode 100644 examples_src/icon.css diff --git a/examples_src/graticule.html b/examples_src/graticule.html index 89c57be0e5..3e89dfba2c 100644 --- a/examples_src/graticule.html +++ b/examples_src/graticule.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Graticule example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Graticule example

-

This example shows how to add a graticule overlay to a map.

-
-

See the graticule.js source to see how this is done.

-
-
graticule
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Graticule example" +shortdesc: "This example shows how to add a graticule overlay to a map." +docs: > + This example shows how to add a graticule overlay to a map. +tags: "graticule" +--- +
+
+
+
+
diff --git a/examples_src/heatmap-earthquakes.html b/examples_src/heatmap-earthquakes.html index 79a5e2e59a..473d128ca8 100644 --- a/examples_src/heatmap-earthquakes.html +++ b/examples_src/heatmap-earthquakes.html @@ -1,61 +1,21 @@ - - - - - - - - - - Earthquakes heatmap - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Earthquakes heatmap

-

Demonstrates the use of a heatmap layer.

-
-

- This example parses a KML file and renders the features as a ol.layer.Heatmap layer. -

-

See the heatmap-earthquakes.js source to see how this is done.

-
-
heatmap, kml, vector, style
-
- -
-
- - - - -
-
- -
-
- - - - - - - +--- +template: "example.html" +title: "Earthquakes heatmap" +shortdesc: "Demonstrates the use of a heatmap layer." +docs: > + This example parses a KML file and renders the features as a ol.layer.Heatmap layer. +tags: "heatmap, kml, vector, style" +--- +
+
+
+
+
+
+ + + + +
+
+
diff --git a/examples_src/hue-saturation.css b/examples_src/hue-saturation.css new file mode 100644 index 0000000000..59a9ea8a69 --- /dev/null +++ b/examples_src/hue-saturation.css @@ -0,0 +1,6 @@ +#reset-hue { + min-width: 90px; +} +#reset-saturation { + min-width: 124px; +} diff --git a/examples_src/hue-saturation.html b/examples_src/hue-saturation.html index b5f4abc94b..72b8075e37 100644 --- a/examples_src/hue-saturation.html +++ b/examples_src/hue-saturation.html @@ -1,74 +1,26 @@ - - - - - - - - - - - Hue/saturation example - - - - -
-
-
- OpenLayers 3 Examples -
-
+--- +template: "example.html" +title: "Hue/saturation example" +shortdesc: "Example of hue/saturation control on the client (WebGL only)." +docs: > + Example of hue/saturation control on the client (WebGL only). +tags: "custom, control" +--- +
+
+
+ - -
- -
-
-
- - - -
- - - -
-
- - - -
-
-
- -
- -
-

Hue/saturation example

-

Example of hue/saturation control on the client (WebGL only).

-
-

See the hue-saturation.js source to see how this is done.

-
-
hue, saturation, webgl
-
- -
- +
+ + +
- - - - - - - +
+ + + +
+
+
diff --git a/examples_src/icon-sprite-webgl.html b/examples_src/icon-sprite-webgl.html index 1d50a55616..f44a060ad3 100644 --- a/examples_src/icon-sprite-webgl.html +++ b/examples_src/icon-sprite-webgl.html @@ -1,58 +1,18 @@ - - - - - - - - - - - Icon sprites with WebGL example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "Icon sprites with WebGL example" +shortdesc: "Icon sprite with WebGL" +docs: > +

In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.

+tags: "webgl, icon, sprite, vector, point" +--- +
+
+
+
+
+  
- -
- -
-
-
-
-
- -
- -
-

Icon sprite with WebGL example

-

Icon sprite with WebGL.

-
-

See the icon-sprite-webgl.js source to see how this is done.

-

In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.

-
-
webgl, icon, sprite, vector, point
-
-
-
-   -
-
- -
- -
- - - - - - - - +
+
diff --git a/examples_src/icon.css b/examples_src/icon.css new file mode 100644 index 0000000000..3881884e22 --- /dev/null +++ b/examples_src/icon.css @@ -0,0 +1,6 @@ +#map { + position: relative; +} +#popup { + padding-bottom: 45px; +} \ No newline at end of file diff --git a/examples_src/icon.html b/examples_src/icon.html index 6b1ddaeae0..8fa391abf8 100644 --- a/examples_src/icon.html +++ b/examples_src/icon.html @@ -1,62 +1,13 @@ - - - - - - - - - - - Vector Icon Example - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
- -
-
-
- -
- -
-

Icon example

-

Example using an icon to symbolize a point.

-
-

See the icon.js source to see how this is done.

-
-
vector, style, icon, marker, popup
-
- -
- -
- - - - - - - - +--- +template: "example.html" +title: "Vector Icon Example" +shortdesc: "Example using an icon to symbolize a point." +docs: > + Example using an icon to symbolize a point. +tags: "vector, style, icon, marker, popup" +--- +
+
+
+
+
diff --git a/examples_src/igc.html b/examples_src/igc.html index 78e6b5c88e..cffea1281d 100644 --- a/examples_src/igc.html +++ b/examples_src/igc.html @@ -1,58 +1,19 @@ - - - - - - - - - - - IGC example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "IGC example" +shortdesc: "Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file." +docs: > +

The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.

+tags: "complex-geometry, closest-feature, igc, opencyclemap" +--- +
+
+
+ +
+
+  
- -
- -
-
-
-
-
- -
- -
-

IGC example

-

Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.

-
-

The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.

-

See the igc.js source to see how this is done.

-
- -
complex-geometry, closest-feature, igc, opencyclemap
-
-
-
-   -
-
- -
- -
- - - - - - - +
+