From e1ee36f46d45d162388f7d72b3c0190053900934 Mon Sep 17 00:00:00 2001 From: Bart van den Eijnden Date: Thu, 2 Apr 2015 14:34:15 +0200 Subject: [PATCH] Port over drag-rotate-and-zoom, draw-and-modify-features, draw-features, dynamic-data and earthquake-clusters examples --- examples_src/drag-rotate-and-zoom.html | 65 ++++------------ examples_src/draw-and-modify-features.html | 82 +++++-------------- examples_src/draw-features.html | 85 ++++++-------------- examples_src/dynamic-data.html | 64 ++++----------- examples_src/earthquake-clusters.css | 19 +++++ examples_src/earthquake-clusters.html | 91 ++++------------------ 6 files changed, 105 insertions(+), 301 deletions(-) create mode 100644 examples_src/earthquake-clusters.css diff --git a/examples_src/drag-rotate-and-zoom.html b/examples_src/drag-rotate-and-zoom.html index 5dcb3fe950..07928c1c7b 100644 --- a/examples_src/drag-rotate-and-zoom.html +++ b/examples_src/drag-rotate-and-zoom.html @@ -1,52 +1,13 @@ - - - - - - - - - - - Drag rotate and zoom example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Drag rotate and zoom example

-

A single interaction to drag, rotate, and zoom.

-
-

Shift + Drag to rotate and zoom the map around its center.

-

See the drag-rotate-and-zoom.js source to see how this is done.

-
-
drag, rotate, zoom, interaction
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Drag rotate and zoom example" +shortdesc: "A single interaction to drag, rotate, and zoom." +docs: > +

Shift + Drag to rotate and zoom the map around its center.

+tags: "drag, rotate, zoom, interaction" +--- +
+
+
+
+
diff --git a/examples_src/draw-and-modify-features.html b/examples_src/draw-and-modify-features.html index 277812df9a..b0030d6f5f 100644 --- a/examples_src/draw-and-modify-features.html +++ b/examples_src/draw-and-modify-features.html @@ -1,61 +1,21 @@ - - - - - - - - - - - Draw and modify features example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Draw and modify features example

-

Example of using the ol.interaction.Draw interaction together with - the ol.interaction.Modify interaction.

-
- - -
- -
-

See the draw-and-modify-features.js source to see how this is done.

-
-
draw, edit, modify, vector, featureoverlay
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Draw and modify features example" +shortdesc: "Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction." +docs: > + Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction. +tags: "draw, edit, modify, vector, featureoverlay" +--- +
+
+
+
+
+ + +
+
diff --git a/examples_src/draw-features.html b/examples_src/draw-features.html index 0cf553fe94..2f00e27698 100644 --- a/examples_src/draw-features.html +++ b/examples_src/draw-features.html @@ -1,62 +1,23 @@ - - - - - - - - - - - Draw features example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Draw features example

-

Example of using the ol.interaction.Draw interaction.

-
- - -
- -
-

See the draw-features.js source to see how this is done.

-
-
draw, edit, vector
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Draw features example" +shortdesc: "Example of using the ol.interaction.Draw interaction." +docs: > + Example of using the ol.interaction.Draw interaction. +tags: "draw, edit, vector" +--- +
+
+
+
+ + +
+
+
diff --git a/examples_src/dynamic-data.html b/examples_src/dynamic-data.html index b7ea32de74..39cddfd3ee 100644 --- a/examples_src/dynamic-data.html +++ b/examples_src/dynamic-data.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Dynamic data example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Dynamic data example

-

Example of dynamic data.

-
-

See the dynamic-data.js source to see how this is done.

-
-
dynamic-data
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Dynamic data example" +shortdesc: "Example of dynamic data." +docs: > + Example of dynamic data. +tags: "dynamic-data" +--- +
+
+
+
+
diff --git a/examples_src/earthquake-clusters.css b/examples_src/earthquake-clusters.css new file mode 100644 index 0000000000..a73813d649 --- /dev/null +++ b/examples_src/earthquake-clusters.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; +} diff --git a/examples_src/earthquake-clusters.html b/examples_src/earthquake-clusters.html index d3f630e066..f8f414cc35 100644 --- a/examples_src/earthquake-clusters.html +++ b/examples_src/earthquake-clusters.html @@ -1,75 +1,16 @@ - - - - - - - - - - - Earthquake Clusters - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Earthquake Clusters

-

Demonstrates the use of style geometries to render source features of a cluster.

-
-

- This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown. -

-

To achieve this, we make heavy use of style functions and ol.style.Style#geometry. See the earthquake-clusters.js source to see how this is done.

-
-
KML, vector, style, geometry, cluster
-
-
- -
- - - - - - - - +--- +template: "example.html" +title: "Earthquake Clusters" +shortdesc: "Demonstrates the use of style geometries to render source features of a cluster." +docs: > +

This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations + (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents + the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.

+

To achieve this, we make heavy use of style functions and ol.style.Style#geometry.

+tags: "KML, vector, style, geometry, cluster" +--- +
+
+
+
+