From b92d7cdf13aeea905ddea98067d8818c62f82cfa Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Thu, 2 Apr 2015 17:14:44 +0200 Subject: [PATCH] Port over image-filter, image-load-events, image-vector-layer, kml-earthquakes, kml-timezones and kml examples --- examples_src/image-filter.html | 89 +++++++------------------ examples_src/image-load-events.css | 15 +++++ examples_src/image-load-events.html | 97 ++++++---------------------- examples_src/image-vector-layer.html | 75 ++++++--------------- examples_src/kml-earthquakes.css | 19 ++++++ examples_src/kml-earthquakes.html | 88 ++++--------------------- examples_src/kml-timezones.css | 9 +++ examples_src/kml-timezones.html | 77 ++++------------------ examples_src/kml.html | 78 ++++++---------------- 9 files changed, 150 insertions(+), 397 deletions(-) create mode 100644 examples_src/image-load-events.css create mode 100644 examples_src/kml-earthquakes.css create mode 100644 examples_src/kml-timezones.css diff --git a/examples_src/image-filter.html b/examples_src/image-filter.html index 1b0b2fede3..42613c1864 100644 --- a/examples_src/image-filter.html +++ b/examples_src/image-filter.html @@ -1,65 +1,24 @@ - - - - - - - - - - - Image Filter Example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Image filter example

-

Apply a filter to imagery

- -
-

- Layer rendering can be manipulated in precompose and postcompose event listeners. - These listeners get an event with a reference to the Canvas rendering context. - In this example, the postcompose listener applies a filter to the image data. -

-

See the image-filter.js source for details on how this is done.

-
-
filter, image manipulation
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Image Filter Example" +shortdesc: "Apply a filter to imagery" +docs: > +

Layer rendering can be manipulated in precompose and postcompose event listeners. + These listeners get an event with a reference to the Canvas rendering context. + In this example, the postcompose listener applies a filter to the image data.

+tags: "filter, image manipulation" +--- +
+
+
+
+
+ \ No newline at end of file diff --git a/examples_src/image-load-events.css b/examples_src/image-load-events.css new file mode 100644 index 0000000000..0bd164d656 --- /dev/null +++ b/examples_src/image-load-events.css @@ -0,0 +1,15 @@ +.map { + background: #E0ECED; +} +.wrapper { + position: relative; +} +#progress { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background: rgba(0, 60, 136, 0.4); + width: 0; + transition: width 250ms; +} \ No newline at end of file diff --git a/examples_src/image-load-events.html b/examples_src/image-load-events.html index a979d70284..b0074de315 100644 --- a/examples_src/image-load-events.html +++ b/examples_src/image-load-events.html @@ -1,79 +1,18 @@ - - - - - - - - - - - Image load events example - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
-
- -
- -
-

Image load events example

-

Example using image load events.

-
-

- Image sources fire events related to image loading. You can - listen for imageloadstart, imageloadend, - and imageloaderror type events to monitor image loading - progress. This example registers listeners for these events and - renders an image loading progress bar at the bottom of the map. -

-

- See the image-load-events.js source - for more detail on how this is done. -

-
-
image, events, loading
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Image load events example" +shortdesc: "Example using image load events." +docs: > +

Image sources fire events related to image loading. You can + listen for imageloadstart, imageloadend, + and imageloaderror type events to monitor image loading + progress. This example registers listeners for these events and + renders an image loading progress bar at the bottom of the map.

+tags: "image, events, loading" +--- +
+
+
+
+
+
\ No newline at end of file diff --git a/examples_src/image-vector-layer.html b/examples_src/image-vector-layer.html index 2de416994b..f9eb402a97 100644 --- a/examples_src/image-vector-layer.html +++ b/examples_src/image-vector-layer.html @@ -1,59 +1,20 @@ - - - - - - - - - - - Image vector layer example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "Image vector layer example" +shortdesc: "Example of an image vector layer." +docs: > +

This example uses a ol.source.ImageVector source. That source gets vector features from the + ol.source.Vector it's configured with, and draw these features to an HTML5 canvas element that + is then used as the image of an image layer.

+tags: "vector, image" +--- +
+
+
+
+
+  
- -
- -
-
-
-
-
- -
- -
-

Image vector example

-

Example of an image vector layer.

-
-

This example uses a ol.source.ImageVector source. That source gets vector features from the - ol.source.Vector it's configured with, and draw these features to an HTML5 canvas element that - is then used as the image of an image layer.

-

See the image-vector-layer.js source to see how this is done.

-
-
vector, image
-
-
-
-   -
-
- -
- -
- - - - - - - +
+
diff --git a/examples_src/kml-earthquakes.css b/examples_src/kml-earthquakes.css new file mode 100644 index 0000000000..e27d40fe94 --- /dev/null +++ b/examples_src/kml-earthquakes.css @@ -0,0 +1,19 @@ +#map { + position: relative; +} +#info { + position: absolute; + height: 1px; + width: 1px; + z-index: 100; +} +.tooltip.in { + opacity: 1; + filter: alpha(opacity=100); +} +.tooltip.top .tooltip-arrow { + border-top-color: white; +} +.tooltip-inner { + border: 2px solid white; +} \ No newline at end of file diff --git a/examples_src/kml-earthquakes.html b/examples_src/kml-earthquakes.html index 7352359da7..407be33860 100644 --- a/examples_src/kml-earthquakes.html +++ b/examples_src/kml-earthquakes.html @@ -1,75 +1,13 @@ - - - - - - - - - - - Earthquakes in KML - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Earthquakes in KML

-

Demonstrates the use of a Shape symbolizer to render earthquake locations.

-
-

- This example parses a KML file and renders the features as a vector layer. The layer is given a style that renders earthquake locations with a size relative to their magnitude. -

-

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

-
-
KML, vector, style, tooltip
-
-
- -
- - - - - - - - +--- +template: "example.html" +title: "Earthquakes in KML" +shortdesc: "Demonstrates the use of a Shape symbolizer to render earthquake locations." +docs: > + This example parses a KML file and renders the features as a vector layer. The layer is given a style that renders earthquake locations with a size relative to their magnitude. +tags: "KML, vector, style, tooltip" +--- +
+
+
+
+
\ No newline at end of file diff --git a/examples_src/kml-timezones.css b/examples_src/kml-timezones.css new file mode 100644 index 0000000000..7c231a020a --- /dev/null +++ b/examples_src/kml-timezones.css @@ -0,0 +1,9 @@ +#map { + position: relative; +} +#info { + position: absolute; + height: 1px; + width: 1px; + z-index: 100; +} \ No newline at end of file diff --git a/examples_src/kml-timezones.html b/examples_src/kml-timezones.html index 564c648e7a..38c0e7cdf2 100644 --- a/examples_src/kml-timezones.html +++ b/examples_src/kml-timezones.html @@ -1,63 +1,14 @@ - - - - - - - - - - - Timezones in KML - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Timezones in KML

-

Demonstrates rendering timezones from KML.

-
-

This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that fills timezones yellow with an opacity calculated based on the current offset to local noon.

-

See the kml-timezones.js source to see how this is done.

-
-
KML, vector, style
-
-
- -
- - - - - - - - +--- +template: "example.html" +title: "Timezones in KML" +shortdesc: "Demonstrates rendering timezones from KML." +docs: > + This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that fills timezones + yellow with an opacity calculated based on the current offset to local noon. +tags: "KML, vector, style" +--- +
+
+
+
+
\ No newline at end of file diff --git a/examples_src/kml.html b/examples_src/kml.html index 7a10f71e23..bb9726a57b 100644 --- a/examples_src/kml.html +++ b/examples_src/kml.html @@ -1,61 +1,23 @@ - - - - - - - - - - - KML example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "KML example" +shortdesc: "Example of using the KML source." +docs: > + Example of using the KML source. +tags: "KML" +--- +
+
+
+
+
+  
- -
- -
-
-
- - Export KML -
-
- -
- -
-

KML example

-

Example of using the KML source.

-
-

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

-
-
KML
-
-
-
-   -
-
- -
- + - - - - - - - + Export KML +
+