diff --git a/examples_src/navigation-controls.html b/examples_src/navigation-controls.html index f4d3ba0a85..95bb614445 100644 --- a/examples_src/navigation-controls.html +++ b/examples_src/navigation-controls.html @@ -1,56 +1,19 @@ - - - - - - - - - - - Navigation controls example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Navigation controls example

-

Shows how to add navigation controls.

- The following navigation controls are added to the map: -
    -
  • ol.control.Zoom (added by default)
    • -
  • ol.control.ZoomToExtent
    • -
-
-

See the navigation-controls.js source to see how this is done.

-
-
control, navigation, extent
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Navigation controls example" +shortdesc: "Shows how to add navigation controls." +docs: > +

This example shows how to use the beforeRender function on the Map to run one + or more animations.

+

The following navigation controls are added to the map:

+ +tags: "control, navigation, extent" +--- +
+
+
+
+
diff --git a/examples_src/overlay.css b/examples_src/overlay.css new file mode 100644 index 0000000000..7b813f5ba9 --- /dev/null +++ b/examples_src/overlay.css @@ -0,0 +1,18 @@ +#marker { + width: 20px; + height: 20px; + border: 1px solid #088; + border-radius: 10px; + background-color: #0FF; + opacity: 0.5; +} +#vienna { + text-decoration: none; + color: white; + font-size: 11pt; + font-weight: bold; + text-shadow: black 0.1em 0.1em 0.2em; +} +.popover-content { + min-width: 180px; +} diff --git a/examples_src/overlay.html b/examples_src/overlay.html index c3351e0d22..4dfda85731 100644 --- a/examples_src/overlay.html +++ b/examples_src/overlay.html @@ -1,82 +1,21 @@ - - - - - - - - - - - - Overlay example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Overlay example

-

Demonstrates overlays.

-
-

The popups are created using - Popovers from Bootstrap.

-

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

-
-
overlay, popup, bootstrap, popover, mapquest, openaerial
-
- -
- -
- -
- - Vienna -
- - -
- - - - - - - - +--- +template: "example.html" +title: "Overlay example" +shortdesc: "Demonstrates overlays." +docs: > +

The popups are created using Popovers from Bootstrap.

+tags: "overlay, popup, bootstrap, popover, mapquest, openaerial" +resources: overlay.css +--- +
+
+
+
+
+
+ + Vienna +
+ + +
diff --git a/examples_src/overviewmap-custom.css b/examples_src/overviewmap-custom.css new file mode 100644 index 0000000000..2a5d5bf07b --- /dev/null +++ b/examples_src/overviewmap-custom.css @@ -0,0 +1,32 @@ +.ol-custom-overviewmap, +.ol-custom-overviewmap.ol-uncollapsible { + bottom: auto; + left: auto; + right: 0; + top: 0; +} + +.ol-custom-overviewmap:not(.ol-collapsed) { + border: 1px solid black; +} + +.ol-custom-overviewmap .ol-overviewmap-map { + border: none; + width: 300px; +} + +.ol-custom-overviewmap .ol-overviewmap-box { + border: 2px solid red; +} + +.ol-custom-overviewmap:not(.ol-collapsed) button{ + bottom: auto; + left: auto; + right: 1px; + top: 1px; +} + +.ol-rotate { + top: 170px; + right: 0; +} diff --git a/examples_src/overviewmap-custom.html b/examples_src/overviewmap-custom.html index d00be1357d..684697018f 100644 --- a/examples_src/overviewmap-custom.html +++ b/examples_src/overviewmap-custom.html @@ -1,77 +1,14 @@ - - - - - - - - - - - - ol3 OverviewMap control with advanced customization example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
-

OverviewMap control, advanced

-
- -
-

Example of OverviewMap control with advanced customization.

-
-

See the overviewmap-custom.js source to see how this is done.

-

This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.

-
-
overview, overviewmap
-
-
- - - - - - - +--- +template: "example.html" +title: "OverviewMap control example advanced" +shortdesc: "Example of OverviewMap control with advanced customization." +docs: > +

This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.

+tags: "overview, overviewmap" +resources: overviewmap-custom.css +--- +
+
+
+
+
diff --git a/examples_src/overviewmap.html b/examples_src/overviewmap.html index ca0a0da1a4..7a2c2d9965 100644 --- a/examples_src/overviewmap.html +++ b/examples_src/overviewmap.html @@ -1,41 +1,13 @@ - - - - - - - - - - - ol3 OverviewMap control example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
-

OverviewMap control

-
- -
-

Example of OverviewMap control.

-
-

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

-
-
overview, overviewmap
-
-
- - - - - - - +--- +template: "example.html" +title: "OverviewMap control example" +shortdesc: "Example of OverviewMap control." +docs: > + This example demonstrates the use of the OverviewMap control. +tags: "overview, overviewmap" +--- +
+
+
+
+
diff --git a/examples_src/polygon-styles.css b/examples_src/polygon-styles.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/examples_src/polygon-styles.html b/examples_src/polygon-styles.html index 5464d2f097..d425638295 100644 --- a/examples_src/polygon-styles.html +++ b/examples_src/polygon-styles.html @@ -1,57 +1,16 @@ - - - - - - - - - - - - Custom styles for polygons - - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Custom styles for polygons

-

Showing the vertices of a polygon with a custom style geometry.

-
-

See the polygon-styles.js source to see how this is done.

-
-
polygon, vector, style, GeometryFunction
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Custom styles for polygons" +shortdesc: "Showing the vertices of a polygon with a custom style geometry." +docs: > + In this example two different styles are created for the polygons: + * The first style is for the polygons themselves. + * The second style is to draw the vertices of the polygons. +tags: "polygon, vector, style, GeometryFunction" +resources: polygon-styles.css +--- +
+
+
+
+
diff --git a/examples_src/popup.css b/examples_src/popup.css new file mode 100644 index 0000000000..ddcde8dc4e --- /dev/null +++ b/examples_src/popup.css @@ -0,0 +1,41 @@ +.ol-popup { + position: absolute; + background-color: white; + -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); + filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); + padding: 15px; + border-radius: 10px; + border: 1px solid #cccccc; + bottom: 12px; + left: -50px; +} +.ol-popup:after, .ol-popup:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.ol-popup:after { + border-top-color: white; + border-width: 10px; + left: 48px; + margin-left: -10px; +} +.ol-popup:before { + border-top-color: #cccccc; + border-width: 11px; + left: 48px; + margin-left: -11px; +} +.ol-popup-closer { + text-decoration: none; + position: absolute; + top: 2px; + right: 8px; +} +.ol-popup-closer:after { + content: "✖"; +} diff --git a/examples_src/popup.html b/examples_src/popup.html index 272fa75009..31074d70d9 100644 --- a/examples_src/popup.html +++ b/examples_src/popup.html @@ -1,104 +1,20 @@ - - - - - - - - - - - - Popup example - - - -
-
-
- OpenLayers 3 Examples -
-
+--- +template: "example.html" +title: "Popup example" +shortdesc: "Uses an overlay to create a popup." +docs: > +

+ Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to display the popup, and another listener is set as the click handler for the close button to hide the popup. +

+tags: "overlay, popup, mapquest, openaerial" +resources: popup.css +--- +
+
+
+ - -
- -
-
-
- -
-
-
- -
- -
-

Popup example

-

Uses an overlay to create a popup.

-
-

- Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to display the popup, and another listener is set as the click handler for the close button to hide the popup. -

-

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

-
-
overlay, popup, mapquest, openaerial
-
- -
- -
- - - - - - - +
+
diff --git a/examples_src/preload.html b/examples_src/preload.html index b45933d6da..5f303faf6b 100644 --- a/examples_src/preload.html +++ b/examples_src/preload.html @@ -1,55 +1,17 @@ - - - - - - - - - - - Preload example - - +--- +template: "example.html" +title: "Preload example" +shortdesc: "Example of tile preloading." +docs: > +

The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.

+tags: "preload, bing" +--- +
+
+
+
+
+
+
+
-
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
-
-
-
- -
- -
-

Preload example

-

Example of tile preloading.

-
-

The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.

-

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

-
-
preload, bing
-
- -
- -
- - - - - - - diff --git a/examples_src/regularshape.html b/examples_src/regularshape.html index 2b1ecfcc34..3f764a91b1 100644 --- a/examples_src/regularshape.html +++ b/examples_src/regularshape.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Regular Shape example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Regular Shape example

-

Example of some Regular Shape styles.

-
-

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

-
-
vector, symbol, regularshape, style, square, cross, star, triangle, x
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Regular Shape example" +shortdesc: "Example of some Regular Shape styles." +docs: > + +tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x" +--- +
+
+
+
+
diff --git a/examples_src/rotation.html b/examples_src/rotation.html index b6e94d986e..9b8f79c3f9 100644 --- a/examples_src/rotation.html +++ b/examples_src/rotation.html @@ -1,52 +1,13 @@ - - - - - - - - - - - Rotation example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Rotation example

-

Example of a rotated map.

-
-

Use Alt+Shift+drag to rotate the map.

-

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

-
-
rotation, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Rotation example" +shortdesc: "Example of a rotated map." +docs: > +

Use Alt+Shift+drag to rotate the map.

+tags: "rotation, openstreetmap" +--- +
+
+
+
+
diff --git a/examples_src/scale-line.html b/examples_src/scale-line.html index 2151535a52..049f00df67 100644 --- a/examples_src/scale-line.html +++ b/examples_src/scale-line.html @@ -1,58 +1,20 @@ - - - - - - - - - - - Scale line example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
- -
-
- -
- -
-

Scale line example

-

Example of a scale line.

-
-

See the scale-line.js source to see how this is done.

-
-
scale-line, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Scale line example" +shortdesc: "Example of a scale line." +docs: > + +tags: "scale-line, openstreetmap" +--- +
+
+
+ +
+
diff --git a/examples_src/select-features.html b/examples_src/select-features.html index 353183ecef..7370a9a83c 100644 --- a/examples_src/select-features.html +++ b/examples_src/select-features.html @@ -1,64 +1,25 @@ - - - - - - - - - - - - Select features example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Select features example

-

Example of using the Select interaction. Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

+--- +template: "example.html" +title: "Select features example" +shortdesc: "Example of using the Select interaction." +docs: > + Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

-

In this example, a listener is registered for the Select interaction's select event in order to update the selection status below. -

- - -  0 selected features -
-
-

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

-
-
select, vector
-
- -
- -
- - - - - - - +

In this example, a listener is registered for the Select interaction's select event in order to update the selection status below. +

+ + +  0 selected features +
+tags: "select, vector" +--- +
+
+
+
+
diff --git a/examples_src/semi-transparent-layer.html b/examples_src/semi-transparent-layer.html index 24f7302eca..e4c173aa49 100644 --- a/examples_src/semi-transparent-layer.html +++ b/examples_src/semi-transparent-layer.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Semi-transparent layer example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Semi-transparent layer example

-

Example of a map with a semi-transparent layer.

-
-

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

-
-
transparent, mapquest, tilejson
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Semi-transparent layer example" +shortdesc: "Example of a map with a semi-transparent layer." +docs: > + This example will display a tiled MaxBox layer semi-transparently over a MapQuest background. +tags: "transparent, mapquest, tilejson" +--- +
+
+
+
+
diff --git a/examples_src/side-by-side.html b/examples_src/side-by-side.html index 67bb0f8cfd..4649b85808 100644 --- a/examples_src/side-by-side.html +++ b/examples_src/side-by-side.html @@ -1,63 +1,25 @@ - - - - - - - - - - - Side-by-side example - - - -
-
-
- OpenLayers 3 Examples -
-
+--- +template: "example.html" +title: "Side-by-side example" +shortdesc: "The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers." +docs: > + The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. +tags: "side-by-side, canvas, webgl, dom, canvas, sync, object" +--- +
+
+

Canvas

+
+
+
+

WebGL

+
+ - -
- -
-
-

Canvas

-
-
-
-

WebGL

-
- -
-
-

DOM

-
-
-
- -
- -
-

Side-by-side example

-

The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.

-
-

See the side-by-side.js source to see how this is done.

-
-
side-by-side, canvas, webgl, dom, canvas, sync, object
-
- -
- -
- - - - - - - +
+
+

DOM

+
+
+
diff --git a/examples_src/snap.html b/examples_src/snap.html index b30424fabf..69a2eb211c 100644 --- a/examples_src/snap.html +++ b/examples_src/snap.html @@ -1,77 +1,38 @@ - - - - - - - - - - - Snap example - - - -
-
-
- OpenLayers 3 Examples -
-
+--- +template: "example.html" +title: "Snap interaction example" +shortdesc: "Example of using the snap interaction together with draw and modify interactions." +docs: > + Example of using the snap interaction together with + draw and modify interactions. The snap interaction must be added + last, as it needs to be the first to handle the + pointermove event.

+
+
+
- -
- -
-
-
-
-
- -
- -
-

Snap interaction example

-

Example of using the snap interaction together with - draw and modify interactions. The snap interaction must be added - last, as it needs to be the first to handle the - pointermove event.

- -
- -
-
- -
-
- - -
- - -
-

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

-
-
draw, edit, modify, vector, featureoverlay, snap
-
- -
- +
+
- - - - - - - +
+ + +
+ +tags: "draw, edit, modify, vector, featureoverlay, snap" +--- +
+
+
+
+
diff --git a/examples_src/sphere-mollweide.html b/examples_src/sphere-mollweide.html index 9493769cea..e10e22637a 100644 --- a/examples_src/sphere-mollweide.html +++ b/examples_src/sphere-mollweide.html @@ -1,52 +1,14 @@ - - - - - - - - - - - Sphere Mollweide example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Sphere Mollweide example

-

Example of a Sphere Mollweide map with a Graticule component.

-
-

See the sphere-mollweide.js source to see how this is done.

-
-
graticule, Mollweide, projection, proj4js
-
- -
- -
- - - - - - - - +--- +template: "example.html" +title: "Sphere Mollweide example" +shortdesc: "Example of a Sphere Mollweide map with a Graticule component." +docs: > + Example of a Sphere Mollweide map with a Graticule component. +tags: "graticule, Mollweide, projection, proj4js" +resources: http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js +--- +
+
+
+
+
diff --git a/examples_src/stamen.html b/examples_src/stamen.html index 4663db3467..df1deac087 100644 --- a/examples_src/stamen.html +++ b/examples_src/stamen.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Stamen example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Stamen example

-

Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.

-
-

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

-
-
stamen, watercolor, terrain-labels, two-layers
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Stamen example" +shortdesc: "Example of a Stamen tile source." +docs: > + Two layers are composed: the watercolor base layer with the terrain labels. +tags: "stamen, watercolor, terrain-labels, two-layers" +--- +
+
+
+
+
diff --git a/examples_src/static-image.html b/examples_src/static-image.html index 4e761dc286..4224fa096e 100644 --- a/examples_src/static-image.html +++ b/examples_src/static-image.html @@ -1,60 +1,18 @@ - - - - - - - - - - - Static image example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Static image example

-

Example of a static image layer.

-
-

- This example uses a static image - as a layer source. The map view is configured with a custom - projection that translates image coordinates directly into map - coordinates. -

-

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

-
-
static image, xkcd
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Static image example" +shortdesc: "Example of a static image layer." +docs: > +

+ This example uses a static image + as a layer source. The map view is configured with a custom + projection that translates image coordinates directly into map + coordinates. +

+tags: "static image, xkcd" +--- +
+
+
+
+
diff --git a/examples_src/symbol-atlas-webgl.html b/examples_src/symbol-atlas-webgl.html index 666bc43ab5..d8d3bde07b 100644 --- a/examples_src/symbol-atlas-webgl.html +++ b/examples_src/symbol-atlas-webgl.html @@ -1,58 +1,18 @@ - - - - - - - - - - - Symbols with WebGL example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Symbols with WebGL example

-

Using symbols in an atlas with WebGL.

-
-

When using symbol styles with WebGL, OpenLayers would render the symbol - on a temporary image and would create a WebGL texture for each image. For a - better performance, it is recommended to use atlas images (similar to - image sprites with CSS), so that the number of textures is reduced. OpenLayers - provides an AtlasManager, which when passed to the constructor - of a symbol style, will create atlases for the symbols.

-

See the symbol-atlas-webgl.js source to see how this is done.

-
-
webgl, symbol, atlas, vector, point
-
- -
- -
- - - - - - - - +--- +template: "example.html" +title: "Symbols with WebGL example" +shortdesc: "Using symbols in an atlas with WebGL." +docs: > +

When using symbol styles with WebGL, OpenLayers would render the symbol + on a temporary image and would create a WebGL texture for each image. For a + better performance, it is recommended to use atlas images (similar to + image sprites with CSS), so that the number of textures is reduced. OpenLayers + provides an AtlasManager, which when passed to the constructor + of a symbol style, will create atlases for the symbols.

+tags: "webgl, symbol, atlas, vector, point" +--- +
+
+
+
+
diff --git a/examples_src/synthetic-lines.html b/examples_src/synthetic-lines.html index 64f497f935..e1ef27fa30 100644 --- a/examples_src/synthetic-lines.html +++ b/examples_src/synthetic-lines.html @@ -1,110 +1,69 @@ - - - - - - - - - - - Synthetic lines example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Synthetic lines example

-

Synthetic lines example.

-
-

See the synthetic-lines.js source to see how this is done.

-

Performance results:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Device/Browser200 lines500 lines1000 lines2000 lines5000 lines10000 lines20000 lines
Mac Book Air / Chrome 33 canary60 fps60 fps60 fps60 fps60 fps60 fps60 fps
Mac Book Air / FireFox 2560 fps60 fps60 fps60 fps60 fps22 fps6 fps
Mac Book Air / Safari 760 fps60 fps60 fps40 fps10 fpsN/AN/A
iPhone 4S / iOS 7 / Safari60 fps33 fps15 fps5 fpsN/AN/AN/A
- -
-
vector
-
- -
- -
- - - - - - - - +--- +template: "example.html" +title: "Synthetic lines example" +shortdesc: "Synthetic lines example." +docs: > +

Performance results:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Device/Browser200 lines500 lines1000 lines2000 lines5000 lines10000 lines20000 lines
Mac Book Air / Chrome 33 canary60 fps60 fps60 fps60 fps60 fps60 fps60 fps
Mac Book Air / FireFox 2560 fps60 fps60 fps60 fps60 fps22 fps6 fps
Mac Book Air / Safari 760 fps60 fps60 fps40 fps10 fpsN/AN/A
iPhone 4S / iOS 7 / Safari60 fps33 fps15 fps5 fpsN/AN/AN/A
+tags: "vector" +--- +
+
+
+
+
diff --git a/examples_src/synthetic-points.html b/examples_src/synthetic-points.html index 45cd56ddb6..a9a59b513f 100644 --- a/examples_src/synthetic-points.html +++ b/examples_src/synthetic-points.html @@ -1,52 +1,13 @@ - - - - - - - - - - - Synthetic points example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Synthetic points example

-

Synthetic points example.

-
-

See the synthetic-points.js source to see how this is done.

-
-
vector
-
- -
- -
- - - - - - - - +--- +template: "example.html" +title: "Synthetic points example" +shortdesc: "Synthetic points example." +docs: > + +tags: "vector" +--- +
+
+
+
+