From c75c704e9f3d4dbf8d6ee1a027fe02ca7fc4fbcb Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Thu, 2 Apr 2015 17:45:13 +0200 Subject: [PATCH] Port over layer-clipping-webgl, layer-clipping, layer-extent, layer-group, layer-spy, layer-swipe examples --- examples_src/layer-clipping-webgl.html | 72 ++------- examples_src/layer-clipping.html | 64 ++------ examples_src/layer-extent.html | 90 +++-------- examples_src/layer-group.css | 3 + examples_src/layer-group.html | 214 ++++++++++--------------- examples_src/layer-spy.html | 77 ++------- examples_src/layer-swipe.html | 66 ++------ 7 files changed, 173 insertions(+), 413 deletions(-) create mode 100644 examples_src/layer-group.css diff --git a/examples_src/layer-clipping-webgl.html b/examples_src/layer-clipping-webgl.html index f28de14ec2..5a76fac0f7 100644 --- a/examples_src/layer-clipping-webgl.html +++ b/examples_src/layer-clipping-webgl.html @@ -1,56 +1,16 @@ - - - - - - - - - - - Layer WebGL clipping example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- - - -
- -
-

Layer WebGL clipping example

-

Layer WebGL clipping example.

-
-

This example shows how to use the precompose and postcompose rendering hooks to clip layers using WebGL.

-

See the layer-clipping-webgl.js source to see how this is done.

-
-
clipping, webgl, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Layer WebGL clipping example" +shortdesc: "Layer WebGL clipping example." +docs: > + This example shows how to use the precompose and postcompose rendering hooks to clip layers using WebGL. +tags: "clipping, webgl, openstreetmap" +--- +
+
+
+
+
+ diff --git a/examples_src/layer-clipping.html b/examples_src/layer-clipping.html index 8b70917bd1..31c0724a18 100644 --- a/examples_src/layer-clipping.html +++ b/examples_src/layer-clipping.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Layer clipping example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Layer clipping example

-

Layer clipping example.

-
-

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

-
-
clipping, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Layer clipping example" +shortdesc: "Layer clipping example" +docs: > + Layer clipping example +tags: "clipping, openstreetmap" +--- +
+
+
+
+
diff --git a/examples_src/layer-extent.html b/examples_src/layer-extent.html index 95bc7d041c..99daa64125 100644 --- a/examples_src/layer-extent.html +++ b/examples_src/layer-extent.html @@ -1,68 +1,22 @@ - - - - - - - - - - - Limited Layer Extent - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Limited layer extent

-

Restricting layer rendering to a limited extent.

-
-

- This example uses the layer.setExtent() method to - modify the extent of the overlay layer. Use the controls below - to limit rendering based on an extent. -

-

-

- - - - - -
-

-

- See the layer-extent.js - source for details on how this is done. -

-
-
extent, tilejson
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Limited Layer Extent" +shortdesc: "Restricting layer rendering to a limited extent." +docs: > + This example uses the layer.setExtent() method to + modify the extent of the overlay layer. Use the controls below + to limit rendering based on an extent. +tags: "extent, tilejson" +--- +
+
+
+
+
+
+ + + + + +
\ No newline at end of file diff --git a/examples_src/layer-group.css b/examples_src/layer-group.css new file mode 100644 index 0000000000..31cb3e6cf1 --- /dev/null +++ b/examples_src/layer-group.css @@ -0,0 +1,3 @@ +#layertree li > span { + cursor: pointer; +} \ No newline at end of file diff --git a/examples_src/layer-group.html b/examples_src/layer-group.html index a86f9dc072..b0f34534a5 100644 --- a/examples_src/layer-group.html +++ b/examples_src/layer-group.html @@ -1,126 +1,88 @@ - - - - - - - - - - - - Layer group example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
- -

Layer group example

-

Example of a map with layer group.

-
-

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

-
-
tilejson, input, bind, group, layergroup
-
- -
-
Click on layer nodes below to change their properties.
-
    -
  • OpenAerial layer -
    - - - - - - - - - - - -
    -
    • -
  • Layer group -
    - - - - - - - - - - - -
    -
      -
    • Food insecurity layer -
      - - - - - - - - - - - -
      -
      • -
    • World borders layer -
      - - - - - - - - - - - -
      -
      • -
    -
    • -
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Layer group example" +shortdesc: "Example of a map with layer group." +docs: > + Example of a map with layer group. +tags: "tilejson, input, bind, group, layergroup" +--- +
+
+
+
+
+
Click on layer nodes below to change their properties.
+
    +
  • OpenAerial layer +
    + + + + + + + + + + + +
    +
    • +
  • Layer group +
    + + + + + + + + + + + +
    +
      +
    • Food insecurity layer +
      + + + + + + + + + + + +
      +
      • +
    • World borders layer +
      + + + + + + + + + + + +
      +
      • +
    +
    • +
+
+
diff --git a/examples_src/layer-spy.html b/examples_src/layer-spy.html index 1eb895c269..4cdfa1b3ec 100644 --- a/examples_src/layer-spy.html +++ b/examples_src/layer-spy.html @@ -1,60 +1,17 @@ - - - - - - - - - - - Layer Spy Example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Layer spy example

-

View a portion of one layer over another

-
-

- 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 precompose listener sets a clipping mask around the most - recent mouse position, giving you a spyglass effect for viewing one layer over another. -

-

- Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size. -

-

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

-
-
spy, image manipulation
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Layer Spy Example" +shortdesc: "View a portion of one layer over another" +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 precompose listener sets a clipping mask around the most + recent mouse position, giving you a spyglass effect for viewing one layer over another.

+

Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.

+tags: "spy, image manipulation" +--- +
+
+
+
+
diff --git a/examples_src/layer-swipe.html b/examples_src/layer-swipe.html index 15e34dc16e..f704b6cfb0 100644 --- a/examples_src/layer-swipe.html +++ b/examples_src/layer-swipe.html @@ -1,52 +1,14 @@ - - - - - - - - - - - Layer Swipe example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
- -
-
- -
- -
-

Layer Swipe example

-

Example of a Layer swipe map.

-
-

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

-
-
swipe, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Layer Swipe example" +shortdesc: "Example of a Layer swipe map." +docs: > + Example of a Layer swipe map. +tags: "swipe, openstreetmap" +--- +
+
+
+ +
+
\ No newline at end of file