diff --git a/examples_src/canvas-tiles.html b/examples_src/canvas-tiles.html index 90eb1866ca..d4b051c9c0 100644 --- a/examples_src/canvas-tiles.html +++ b/examples_src/canvas-tiles.html @@ -1,52 +1,14 @@ - - - - - - - - - - - Canvas tiles example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Canvas tiles example

-

Renders tiles with coordinates for debugging.

-
-

The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).

-

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

-
-
layers, openstreetmap, canvas
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Canvas tiles example" +shortdesc: "Renders tiles with coordinates for debugging." +docs: > +

The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not + OSM tile coordinates (origin top left).

+tags: "layers, openstreetmap, canvas" +--- +
+
+
+
+
diff --git a/examples_src/center.css b/examples_src/center.css new file mode 100644 index 0000000000..3f96011ab0 --- /dev/null +++ b/examples_src/center.css @@ -0,0 +1,56 @@ +.mapcontainer { + position: relative; + margin-bottom: 20px; +} +.map { + width: 1000px; + height: 600px; +} +div.ol-zoom { + top: 178px; + left: 158px; +} +div.ol-attribution { + bottom: 30px; + right: 50px; +} +.padding-top { + position: absolute; + top: 0; + left: 0px; + width: 1000px; + height: 170px; + background: rgba(255, 255, 255, 0.5); +} +.padding-left { + position: absolute; + top: 170px; + left: 0; + width: 150px; + height: 400px; + background: rgba(255, 255, 255, 0.5); +} +.padding-right { + position: absolute; + top: 170px; + left: 950px; + width: 50px; + height: 400px; + background: rgba(255, 255, 255, 0.5); +} +.padding-bottom { + position: absolute; + top: 570px; + left: 0px; + width: 1000px; + height: 30px; + background: rgba(255, 255, 255, 0.5); +} +.center { + position: absolute; + border: solid 1px black; + top: 490px; + left: 560px; + width: 20px; + height: 20px; +} diff --git a/examples_src/center.html b/examples_src/center.html index bf56e78d0c..f97b0577b6 100644 --- a/examples_src/center.html +++ b/examples_src/center.html @@ -1,131 +1,34 @@ - - - - - - - - - - - - Advanced View Positioning example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
-
-
-
-
-
- -
-
- (best fit),
- (respect resolution constraint).
- (nearest),
- (with min resolution),
- -
-
- -
- -
-

Advanced View Positioning example

-

This example demonstrates how a map's view can be - adjusted so a geometry or coordinate is positioned at a specific - pixel location. The map above has top, right, bottom, and left - padding applied inside the viewport. The view's fitGeometry method - is used to fit a geometry in the view with the same padding. The - view's centerOn method is used to position a coordinate (Lausanne) - at a specific pixel location (the center of the black box).

-
-

Use Alt+Shift+drag to rotate the map.

-

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

-
-
center, rotation, openstreetmap
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Advanced View Positioning example" +shortdesc: "This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location." +docs: > + This example demonstrates how a map's view can be + adjusted so a geometry or coordinate is positioned at a specific + pixel location. The map above has top, right, bottom, and left + padding applied inside the viewport. The view's fitGeometry method + is used to fit a geometry in the view with the same padding. The + view's centerOn method is used to position a coordinate (Lausanne) + at a specific pixel location (the center of the black box). +

Use Alt+Shift+drag to rotate the map.

+tags: "center, rotation, openstreetmap" +--- +
+
+
+
+
+
+
+
+
+
+
+
+ (best fit),
+ (respect resolution constraint).
+ (nearest),
+ (with min resolution),
+ +
+
diff --git a/examples_src/cluster.html b/examples_src/cluster.html index 13b29c0249..50a1ad3f48 100644 --- a/examples_src/cluster.html +++ b/examples_src/cluster.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Clustering example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Clustering example

-

Example of using ol.Cluster.

-
-

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

-
-
cluster vector
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Clustering example" +shortdesc: "Example of using ol.source.Cluster." +docs: > + This example shows how to do clustering on point features. +tags: "cluster, vector" +--- +
+
+
+
+
diff --git a/examples_src/d3.html b/examples_src/d3.html index aa1825d802..41499bf376 100644 --- a/examples_src/d3.html +++ b/examples_src/d3.html @@ -1,54 +1,14 @@ - - - - - - - - - - - d3 integration example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

d3 integration example

-

Example of using ol3 and d3 together.

-
-

The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.

-

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

-
-
d3
-
- -
- -
- - - - - - - - - +--- +template: "example.html" +title: "d3 integration example" +shortdesc: "Example of using ol3 and d3 together." +docs: > +

The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.

+tags: "d3" +resources: "http://d3js.org/d3.v3.min.js,http://d3js.org/topojson.v1.min.js" +--- +
+
+
+
+
diff --git a/examples_src/device-orientation.html b/examples_src/device-orientation.html index 589ddb2623..418d25cca1 100644 --- a/examples_src/device-orientation.html +++ b/examples_src/device-orientation.html @@ -1,58 +1,23 @@ - - - - - - - - - - - Device-Orientation example - - - -
-
-
- OpenLayers 3 Examples -
-
+--- +template: "example.html" +title: "Device-Orientation example" +shortdesc: "Listen to DeviceOrientation events." +docs: > + This example shows how to track changes in device orientation. +tags: "orientation, openstreetmap" +--- +
+
+
+
+

Device orientation example

+ +

α :

+

β :

+

γ :

+

heading :

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

Device orientation example

- -

α :

-

β :

-

γ :

-

heading :

-

Listen to DeviceOrientation events

-
-

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

-
-
orientation, openstreetmap
-
- -
- -
- - - - - - - +
+
diff --git a/examples_src/drag-and-drop-image-vector.html b/examples_src/drag-and-drop-image-vector.html index 422d31e648..83879d4747 100644 --- a/examples_src/drag-and-drop-image-vector.html +++ b/examples_src/drag-and-drop-image-vector.html @@ -1,56 +1,19 @@ - - - - - - - - - - - Drag-and-Drop image vector example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "Drag-and-Drop image vector example" +shortdesc: "Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client." +docs: > + Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to + an image on the client. +tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image" +--- +
+
+
+
+
+  
- -
- -
-
-
-
-
- -
- -
-

Drag-and-Drop image vector example

-

Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.

-
-

See the drag-and-drop-image-vector.js source to see how this is done.

-
-
drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image
-
-
-
-   -
-
- -
- -
- - - - - - - +
+
diff --git a/examples_src/drag-and-drop.html b/examples_src/drag-and-drop.html index eff604f539..fd8f2b9f5e 100644 --- a/examples_src/drag-and-drop.html +++ b/examples_src/drag-and-drop.html @@ -1,56 +1,19 @@ - - - - - - - - - - - Drag-and-Drop example - - - -
-
-
- OpenLayers 3 Examples -
+--- +template: "example.html" +title: "Drag-and-Drop example" +shortdesc: "Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857." +docs: > + Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will + only work with data in EPSG:4326 and EPSG:3857. +tags: "drag-and-drop, gpx, geojson, igc, kml, topojson" +--- +
+
+
+
+
+  
- -
- -
-
-
-
-
- -
- -
-

Drag-and-Drop example

-

Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.

-
-

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

-
-
drag-and-drop, gpx, geojson, igc, kml, topojson
-
-
-
-   -
-
- -
- -
- - - - - - - +
+
diff --git a/examples_src/drag-features.html b/examples_src/drag-features.html index 109afa0074..d3d9aa0d8a 100644 --- a/examples_src/drag-features.html +++ b/examples_src/drag-features.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Drag features example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Drag features example

-

Example of a drag features interaction.

-
-

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

-
-
drag, feature, vector, editing
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Drag features example" +shortdesc: "Example of a drag features interaction." +docs: > + The drag features interaction can be used to drag features to a new position. +tags: "drag, feature, vector, editing" +--- +
+
+
+
+