diff --git a/config/examples/example.html b/config/examples/example.html index a72220b572..8855d43e91 100644 --- a/config/examples/example.html +++ b/config/examples/example.html @@ -8,8 +8,8 @@ - {{{ resources }}} - {{{ css_resource }}} + {{{ extraHead }}} + {{{ css.tag }}} {{ title }} @@ -29,16 +29,12 @@ {{{ contents }}}
-

{{ title }}

{{ shortdesc }}

-
- {{{ docs }}} -
+
{{ md docs }}
{{ tags }}
-
@@ -46,11 +42,11 @@
- - + + - + 
<!DOCTYPE html>
 <html>
 <head>
@@ -58,12 +54,12 @@
 <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css" type="text/css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"></script>
 {{ resources }}
-{{#if css_inline}}
+{{#if css.source}}
 <style>
-{{ css_inline }}
+{{ css.source }}
 </style>
 {{/if}}
 </head>
@@ -73,7 +69,7 @@
 {{ contents }}
 </div>
 <script>
-{{ js_inline }}
+{{ js.source }}
 </script>
 </body>
 </html>
@@ -85,7 +81,7 @@ - {{{ js_resource }}} + {{{ js.tag }}} diff --git a/examples_src/accessible.html b/examples_src/accessible.html index 7e73c824f9..eb54411eb3 100644 --- a/examples_src/accessible.html +++ b/examples_src/accessible.html @@ -1,10 +1,13 @@ --- -template: "example.html" -title: "Accessibility example" -shortdesc: "Example of an accessible map." +template: example.html +title: Accessibility example +shortdesc: Example of an accessible map. docs: > -

This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.

-

When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.

+ This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan. + + + Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action. + tags: "accessibility, tabindex" ---
diff --git a/examples_src/animation.html b/examples_src/animation.html index aebcde69d6..7aaa786d3c 100644 --- a/examples_src/animation.html +++ b/examples_src/animation.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Animation example" -shortdesc: "Demonstrates animated pan, zoom, and rotation." +template: example.html +title: Animation example +shortdesc: Demonstrates animated pan, zoom, and rotation. docs: > This example shows how to use the beforeRender function on the Map to run one or more animations. diff --git a/examples_src/arcgis-tiled.html b/examples_src/arcgis-tiled.html index 0cf5c660cd..3959a824c2 100644 --- a/examples_src/arcgis-tiled.html +++ b/examples_src/arcgis-tiled.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tiled ArcGIS MapServer example" -shortdesc: "Example of a tiled ArcGIS layer." +template: example.html +title: Tiled ArcGIS MapServer example +shortdesc: Example of a tiled ArcGIS layer. docs: > This example shows how to use an ArcGIS REST MapService as tiles. This source type supports Map and Image Services. For cached ArcGIS diff --git a/examples_src/attributions.html b/examples_src/attributions.html index d268129d88..6931cb02d6 100644 --- a/examples_src/attributions.html +++ b/examples_src/attributions.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Attributions example" -shortdesc: "Example of a attributions visibily change on map resize, to collapse them on small maps." +template: example.html +title: Attributions example +shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps. docs: > When the map gets too small because of a resize, the attribution will be collapsed. This is because the collapsible option is set to true if the width diff --git a/examples_src/bind-input.html b/examples_src/bind-input.html index cfec65e20c..c707acf809 100644 --- a/examples_src/bind-input.html +++ b/examples_src/bind-input.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Bind HTML input example" -shortdesc: "Demonstrates two-way binding of HTML input elements to OpenLayers objects." +template: example.html +title: Bind HTML input example +shortdesc: Demonstrates two-way binding of HTML input elements to OpenLayers objects. docs: > \ No newline at end of file +
diff --git a/examples_src/bing-maps.html b/examples_src/bing-maps.html index c8fb02ddb4..e7c47fb159 100644 --- a/examples_src/bing-maps.html +++ b/examples_src/bing-maps.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Bing Maps example" -shortdesc: "Example of a Bing Maps layer." +template: example.html +title: Bing Maps example +shortdesc: Example of a Bing Maps layer. docs: >

When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol.source.BingMaps.

tags: "bing, bing-maps" @@ -17,4 +17,4 @@ tags: "bing, bing-maps"
- \ No newline at end of file + diff --git a/examples_src/box-selection.html b/examples_src/box-selection.html index b727d9b35a..4ea2ba536b 100644 --- a/examples_src/box-selection.html +++ b/examples_src/box-selection.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Box selection example" -shortdesc: "Using a DragBox interaction to select features." +template: example.html +title: Box selection example +shortdesc: Using a DragBox interaction to select features. docs: >

This example shows how to use a DragBox interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.

diff --git a/examples_src/brightness-contrast.html b/examples_src/brightness-contrast.html index 7744f3320e..25ba8afb24 100644 --- a/examples_src/brightness-contrast.html +++ b/examples_src/brightness-contrast.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Brightness/contrast example" -shortdesc: "Example of brightness/contrast control on the client (WebGL only)." +template: example.html +title: Brightness/contrast example +shortdesc: Example of brightness/contrast control on the client (WebGL only). docs: > This example shows how to control brightness/contrast on the client, the example is limited to WebGL. diff --git a/examples_src/button-title.html b/examples_src/button-title.html index c932530b5c..640d168ccd 100644 --- a/examples_src/button-title.html +++ b/examples_src/button-title.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Custom tooltips example" -shortdesc: "This example shows how to customize the buttons tooltips with Bootstrap." +template: example.html +title: Custom tooltips example +shortdesc: This example shows how to customize the buttons tooltips with Bootstrap. docs: > This example shows how to customize the buttons tooltips with Bootstrap. tags: "custom, tooltip" diff --git a/examples_src/canvas-tiles.html b/examples_src/canvas-tiles.html index d4b051c9c0..b713e311a2 100644 --- a/examples_src/canvas-tiles.html +++ b/examples_src/canvas-tiles.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Canvas tiles example" -shortdesc: "Renders tiles with coordinates for debugging." +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).

diff --git a/examples_src/center.html b/examples_src/center.html index f97b0577b6..0b90d3cf0c 100644 --- a/examples_src/center.html +++ b/examples_src/center.html @@ -1,7 +1,7 @@ --- -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." +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 diff --git a/examples_src/cluster.html b/examples_src/cluster.html index 50a1ad3f48..8181c33a6b 100644 --- a/examples_src/cluster.html +++ b/examples_src/cluster.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Clustering example" -shortdesc: "Example of using ol.source.Cluster." +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/custom-controls.html b/examples_src/custom-controls.html index 5bb376751c..542b222a8c 100644 --- a/examples_src/custom-controls.html +++ b/examples_src/custom-controls.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Custom control example" -shortdesc: "Shows how to create custom controls." +template: example.html +title: Custom control example +shortdesc: Shows how to create custom controls. docs: > This example creates a "rotate to north" button. tags: "custom, control" diff --git a/examples_src/d3.html b/examples_src/d3.html index 41499bf376..c062331adc 100644 --- a/examples_src/d3.html +++ b/examples_src/d3.html @@ -1,11 +1,13 @@ --- -template: "example.html" -title: "d3 integration example" -shortdesc: "Example of using ol3 and d3 together." +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" +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 418d25cca1..d9695fa1c5 100644 --- a/examples_src/device-orientation.html +++ b/examples_src/device-orientation.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Device-Orientation example" -shortdesc: "Listen to DeviceOrientation events." +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" diff --git a/examples_src/drag-and-drop-image-vector.html b/examples_src/drag-and-drop-image-vector.html index 83879d4747..fefd7f5be3 100644 --- a/examples_src/drag-and-drop-image-vector.html +++ b/examples_src/drag-and-drop-image-vector.html @@ -1,7 +1,7 @@ --- -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." +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. diff --git a/examples_src/drag-and-drop.html b/examples_src/drag-and-drop.html index fd8f2b9f5e..eb1d06558d 100644 --- a/examples_src/drag-and-drop.html +++ b/examples_src/drag-and-drop.html @@ -1,9 +1,9 @@ --- -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." +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 + 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" --- diff --git a/examples_src/drag-features.html b/examples_src/drag-features.html index d3d9aa0d8a..c42ed33ed7 100644 --- a/examples_src/drag-features.html +++ b/examples_src/drag-features.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Drag features example" -shortdesc: "Example of a drag features interaction." +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" diff --git a/examples_src/drag-rotate-and-zoom.html b/examples_src/drag-rotate-and-zoom.html index 07928c1c7b..928d3ab2c1 100644 --- a/examples_src/drag-rotate-and-zoom.html +++ b/examples_src/drag-rotate-and-zoom.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Drag rotate and zoom example" -shortdesc: "A single interaction to drag, rotate, and zoom." +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 b0030d6f5f..22204f112d 100644 --- a/examples_src/draw-and-modify-features.html +++ b/examples_src/draw-and-modify-features.html @@ -1,7 +1,7 @@ --- -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." +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 2f00e27698..5432681c9f 100644 --- a/examples_src/draw-features.html +++ b/examples_src/draw-features.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Draw features example" -shortdesc: "Example of using the ol.interaction.Draw interaction." +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 39cddfd3ee..5bc615044c 100644 --- a/examples_src/dynamic-data.html +++ b/examples_src/dynamic-data.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Dynamic data example" -shortdesc: "Example of 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.html b/examples_src/earthquake-clusters.html index f8f414cc35..685bd1c4cf 100644 --- a/examples_src/earthquake-clusters.html +++ b/examples_src/earthquake-clusters.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Earthquake Clusters" -shortdesc: "Demonstrates the use of style geometries to render source features of a 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 diff --git a/examples_src/epsg-4326.html b/examples_src/epsg-4326.html index 13650d1d91..5c100ae083 100644 --- a/examples_src/epsg-4326.html +++ b/examples_src/epsg-4326.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "EPSG:4326 example" -shortdesc: "Example of a map in EPSG:4326." +template: example.html +title: EPSG:4326 example +shortdesc: Example of a map in EPSG:4326. docs: > This example shows how to create a map in EPSG:4326. tags: "epsg4326" diff --git a/examples_src/export-map.html b/examples_src/export-map.html index fe23c0884e..99fce67000 100644 --- a/examples_src/export-map.html +++ b/examples_src/export-map.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Export map example" -shortdesc: "Example of exporting a map as a PNG image." +template: example.html +title: Export map example +shortdesc: Example of exporting a map as a PNG image. docs: > Example of exporting a map as a PNG image. tags: "export, png, openstreetmap" diff --git a/examples_src/fractal.html b/examples_src/fractal.html index 2d624cf154..96f45e7b4a 100644 --- a/examples_src/fractal.html +++ b/examples_src/fractal.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Fractal Example" -shortdesc: "Example of a fractal." +template: example.html +title: Fractal Example +shortdesc: Example of a fractal. docs: > Example of a fractal. tags: "fractal, vector" diff --git a/examples_src/full-screen-drag-rotate-and-zoom.html b/examples_src/full-screen-drag-rotate-and-zoom.html index e6e93999e0..46560b1b21 100644 --- a/examples_src/full-screen-drag-rotate-and-zoom.html +++ b/examples_src/full-screen-drag-rotate-and-zoom.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Full screen drag rotate and zoom example" -shortdesc: "Example of drag rotate and zoom control with full screen effect." +template: example.html +title: Full screen drag rotate and zoom example +shortdesc: Example of drag rotate and zoom control with full screen effect. docs: >

Hold down Shift + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the Shift + drag thing again.

If there is no button on the map, your browser does not support the Full Screen API.

diff --git a/examples_src/full-screen.html b/examples_src/full-screen.html index 176c83b491..6a3feb5ef0 100644 --- a/examples_src/full-screen.html +++ b/examples_src/full-screen.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Full screen control example" -shortdesc: "Example of a full screen control." +template: example.html +title: Full screen control example +shortdesc: Example of a full screen control. docs: >

Click the control in the top right corner to go full screen. Click it again to exit full screen.

If there is no button on the map, your browser does not support the Full Screen API.

diff --git a/examples_src/geojson.html b/examples_src/geojson.html index a064983427..d51b33ebd4 100644 --- a/examples_src/geojson.html +++ b/examples_src/geojson.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "GeoJSON example" -shortdesc: "Example of GeoJSON features." +template: example.html +title: GeoJSON example +shortdesc: Example of GeoJSON features. docs: > Example of GeoJSON features. tags: "geojson, vector, openstreetmap" diff --git a/examples_src/geolocation.html b/examples_src/geolocation.html index 0d6b207818..6d0eb05b01 100644 --- a/examples_src/geolocation.html +++ b/examples_src/geolocation.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Geolocation example" -shortdesc: "Example of a geolocation map." +template: example.html +title: Geolocation example +shortdesc: Example of a geolocation map. docs: > Example of a geolocation map. tags: "geolocation, openstreetmap" diff --git a/examples_src/getfeatureinfo-image.html b/examples_src/getfeatureinfo-image.html index d44b7f7a7a..b0704b96ad 100644 --- a/examples_src/getfeatureinfo-image.html +++ b/examples_src/getfeatureinfo-image.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "GetFeatureInfo example (image layer)" -shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer." +template: example.html +title: GetFeatureInfo example (image layer) +shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. docs: >

Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.

tags: "getfeatureinfo, forEachLayerAtPixel" diff --git a/examples_src/getfeatureinfo-tile.html b/examples_src/getfeatureinfo-tile.html index 7743beef4d..b1173eb9ac 100644 --- a/examples_src/getfeatureinfo-tile.html +++ b/examples_src/getfeatureinfo-tile.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMS GetFeatureInfo example (tile layer)" -shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer." +template: example.html +title: WMS GetFeatureInfo example (tile layer) +shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. docs: >

Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.

tags: "getfeatureinfo, forEachLayerAtPixel" diff --git a/examples_src/gpx.html b/examples_src/gpx.html index 38729dad13..5a1b5fb180 100644 --- a/examples_src/gpx.html +++ b/examples_src/gpx.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "GPX example" -shortdesc: "Example of using the GPX source." +template: example.html +title: GPX example +shortdesc: Example of using the GPX source. docs: > Example of using the GPX source. tags: "GPX" @@ -22,4 +22,4 @@ tags: "GPX"
- \ No newline at end of file + diff --git a/examples_src/graticule.html b/examples_src/graticule.html index 3e89dfba2c..d334a67771 100644 --- a/examples_src/graticule.html +++ b/examples_src/graticule.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Graticule example" -shortdesc: "This example shows how to add a graticule overlay to a map." +template: example.html +title: Graticule example +shortdesc: This example shows how to add a graticule overlay to a map. docs: > This example shows how to add a graticule overlay to a map. tags: "graticule" diff --git a/examples_src/heatmap-earthquakes.html b/examples_src/heatmap-earthquakes.html index 473d128ca8..ecdd0813d2 100644 --- a/examples_src/heatmap-earthquakes.html +++ b/examples_src/heatmap-earthquakes.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Earthquakes heatmap" -shortdesc: "Demonstrates the use of a heatmap layer." +template: example.html +title: Earthquakes heatmap +shortdesc: Demonstrates the use of a heatmap layer. docs: > This example parses a KML file and renders the features as a ol.layer.Heatmap layer. tags: "heatmap, kml, vector, style" diff --git a/examples_src/hue-saturation.html b/examples_src/hue-saturation.html index 72b8075e37..9ecbc0ade7 100644 --- a/examples_src/hue-saturation.html +++ b/examples_src/hue-saturation.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Hue/saturation example" -shortdesc: "Example of hue/saturation control on the client (WebGL only)." +template: example.html +title: Hue/saturation example +shortdesc: Example of hue/saturation control on the client (WebGL only). docs: > Example of hue/saturation control on the client (WebGL only). tags: "custom, control" diff --git a/examples_src/icon-sprite-webgl.html b/examples_src/icon-sprite-webgl.html index f44a060ad3..42457c839b 100644 --- a/examples_src/icon-sprite-webgl.html +++ b/examples_src/icon-sprite-webgl.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Icon sprites with WebGL example" -shortdesc: "Icon sprite with WebGL" +template: example.html +title: Icon sprites with WebGL example +shortdesc: Icon sprite with WebGL docs: >

In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.

tags: "webgl, icon, sprite, vector, point" diff --git a/examples_src/icon.html b/examples_src/icon.html index 8fa391abf8..675f7cd3da 100644 --- a/examples_src/icon.html +++ b/examples_src/icon.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Vector Icon Example" -shortdesc: "Example using an icon to symbolize a point." +template: example.html +title: Vector Icon Example +shortdesc: Example using an icon to symbolize a point. docs: > Example using an icon to symbolize a point. tags: "vector, style, icon, marker, popup" diff --git a/examples_src/igc.html b/examples_src/igc.html index cffea1281d..b15a207cee 100644 --- a/examples_src/igc.html +++ b/examples_src/igc.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "IGC example" -shortdesc: "Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file." +template: example.html +title: IGC example +shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file. docs: >

The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.

tags: "complex-geometry, closest-feature, igc, opencyclemap" diff --git a/examples_src/image-filter.html b/examples_src/image-filter.html index c16e35a811..931f56b4c6 100644 --- a/examples_src/image-filter.html +++ b/examples_src/image-filter.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Image Filter Example" -shortdesc: "Apply a filter to imagery" +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. diff --git a/examples_src/image-load-events.html b/examples_src/image-load-events.html index 37125d3c73..daff7987ae 100644 --- a/examples_src/image-load-events.html +++ b/examples_src/image-load-events.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Image load events example" -shortdesc: "Example using image load events." +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, diff --git a/examples_src/image-vector-layer.html b/examples_src/image-vector-layer.html index f9eb402a97..13994e8426 100644 --- a/examples_src/image-vector-layer.html +++ b/examples_src/image-vector-layer.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Image vector layer example" -shortdesc: "Example of an image vector layer." +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 diff --git a/examples_src/kml-earthquakes.html b/examples_src/kml-earthquakes.html index 407be33860..c8719298c2 100644 --- a/examples_src/kml-earthquakes.html +++ b/examples_src/kml-earthquakes.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Earthquakes in KML" -shortdesc: "Demonstrates the use of a Shape symbolizer to render earthquake locations." +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" @@ -10,4 +10,4 @@ tags: "KML, vector, style, tooltip"

- \ No newline at end of file + diff --git a/examples_src/kml-timezones.html b/examples_src/kml-timezones.html index 3c9a4b1635..9eed45133c 100644 --- a/examples_src/kml-timezones.html +++ b/examples_src/kml-timezones.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Timezones in KML" -shortdesc: "Demonstrates rendering timezones from KML." +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. diff --git a/examples_src/kml.html b/examples_src/kml.html index bb9726a57b..d23ec7ceb3 100644 --- a/examples_src/kml.html +++ b/examples_src/kml.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "KML example" -shortdesc: "Example of using the KML source." +template: example.html +title: KML example +shortdesc: Example of using the KML source. docs: > Example of using the KML source. tags: "KML" diff --git a/examples_src/layer-clipping-webgl.html b/examples_src/layer-clipping-webgl.html index 5a76fac0f7..1b43fb038b 100644 --- a/examples_src/layer-clipping-webgl.html +++ b/examples_src/layer-clipping-webgl.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Layer WebGL clipping example" -shortdesc: "Layer WebGL clipping example." +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 31c0724a18..70866741ba 100644 --- a/examples_src/layer-clipping.html +++ b/examples_src/layer-clipping.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Layer clipping example" -shortdesc: "Layer clipping example" +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 7aaa2d3b1f..22f32e90cc 100644 --- a/examples_src/layer-extent.html +++ b/examples_src/layer-extent.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Limited Layer Extent" -shortdesc: "Restricting layer rendering to a limited extent." +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 diff --git a/examples_src/layer-group.html b/examples_src/layer-group.html index b0f34534a5..cf3104cc98 100644 --- a/examples_src/layer-group.html +++ b/examples_src/layer-group.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Layer group example" -shortdesc: "Example of a map with layer group." +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" diff --git a/examples_src/layer-spy.html b/examples_src/layer-spy.html index 4cdfa1b3ec..480acd6668 100644 --- a/examples_src/layer-spy.html +++ b/examples_src/layer-spy.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Layer Spy Example" -shortdesc: "View a portion of one layer over another" +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. diff --git a/examples_src/layer-swipe.html b/examples_src/layer-swipe.html index f704b6cfb0..cb3b3b213e 100644 --- a/examples_src/layer-swipe.html +++ b/examples_src/layer-swipe.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Layer Swipe example" -shortdesc: "Example of a Layer swipe map." +template: example.html +title: Layer Swipe example +shortdesc: Example of a Layer swipe map. docs: > Example of a Layer swipe map. tags: "swipe, openstreetmap" @@ -11,4 +11,4 @@ tags: "swipe, openstreetmap"

- \ No newline at end of file + diff --git a/examples_src/lazy-source.html b/examples_src/lazy-source.html index f8e80b744d..75a73e7aff 100644 --- a/examples_src/lazy-source.html +++ b/examples_src/lazy-source.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Lazy Source" -shortdesc: "Example of setting a layer source after construction." +template: example.html +title: Lazy Source +shortdesc: Example of setting a layer source after construction. docs: >

Typically, the source for a layer is provided to the layer constructor. If you need to set a layer source after construction, this can be @@ -17,4 +17,4 @@ tags: "source" - \ No newline at end of file + diff --git a/examples_src/line-arrows.html b/examples_src/line-arrows.html index 8e5f65d47d..3263c67c6e 100644 --- a/examples_src/line-arrows.html +++ b/examples_src/line-arrows.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "LineString arrows example" -shortdesc: "Example of drawing arrows for each line string segment." +template: example.html +title: LineString arrows example +shortdesc: Example of drawing arrows for each line string segment. docs: > Example of drawing arrows for each line string segment. tags: "draw, vector, arrow" diff --git a/examples_src/localized-openstreetmap.html b/examples_src/localized-openstreetmap.html index 9f2ba9145e..844a78dc88 100644 --- a/examples_src/localized-openstreetmap.html +++ b/examples_src/localized-openstreetmap.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Localized OpenStreetMap example" -shortdesc: "Example of a localized OpenStreetMap map with a custom tile server and a custom attribution." +template: example.html +title: Localized OpenStreetMap example +shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. docs: >

The base layer is OpenCycleMap with an overlay from OpenSeaMap. The OpenSeaMap tile server does not support CORS headers.

diff --git a/examples_src/mapguide-untiled.html b/examples_src/mapguide-untiled.html index 31a2d5d810..3bd04ee457 100644 --- a/examples_src/mapguide-untiled.html +++ b/examples_src/mapguide-untiled.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "MapGuide untiled example" -shortdesc: "Example of a untiled MapGuide map." +template: example.html +title: MapGuide untiled example +shortdesc: Example of a untiled MapGuide map. docs: > Example of a untiled MapGuide map. tags: "mapguide" diff --git a/examples_src/mapquest.html b/examples_src/mapquest.html index fad64c1621..723a087e66 100644 --- a/examples_src/mapquest.html +++ b/examples_src/mapquest.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "MapQuest example" -shortdesc: "Example of a MapQuest map.Shows how to create custom controls." +template: example.html +title: MapQuest example +shortdesc: Example of a MapQuest map.Shows how to create custom controls. docs: > Example of a MapQuest map. tags: "mapquest" @@ -15,4 +15,4 @@ tags: "mapquest" - \ No newline at end of file + diff --git a/examples_src/measure.html b/examples_src/measure.html index d4e665967a..6839a0d3c6 100644 --- a/examples_src/measure.html +++ b/examples_src/measure.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Measure example" -shortdesc: "Example of using the ol.interaction.Draw interaction for creating simple measuring application." +template: example.html +title: Measure example +shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application. docs: >

NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account

tags: "draw, edit, measure, vector" @@ -18,4 +18,4 @@ tags: "draw, edit, measure, vector" - \ No newline at end of file + diff --git a/examples_src/min-max-resolution.html b/examples_src/min-max-resolution.html index 42d8ea4c66..dbbe815f27 100644 --- a/examples_src/min-max-resolution.html +++ b/examples_src/min-max-resolution.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Min/max resolution example" -shortdesc: "Show/hide layers depending on current view resolution." +template: example.html +title: Min/max resolution example +shortdesc: Show/hide layers depending on current view resolution. docs: >

Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.

If you continue to zoom in, you'll see the OSM layer also disappear.

diff --git a/examples_src/modify-features.html b/examples_src/modify-features.html index b2f5687374..0444b51b74 100644 --- a/examples_src/modify-features.html +++ b/examples_src/modify-features.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Modify features example" -shortdesc: "Editing features with the modify interaction." +template: example.html +title: Modify features example +shortdesc: Editing features with the modify interaction. docs: >

This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).

diff --git a/examples_src/modify-test.html b/examples_src/modify-test.html index db700fd411..17e8fc8575 100644 --- a/examples_src/modify-test.html +++ b/examples_src/modify-test.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Modify features test" -shortdesc: "Example for testing feature modification." +template: example.html +title: Modify features test +shortdesc: Example for testing feature modification. docs: > Example for testing feature modification. tags: "modify, edit, vector" diff --git a/examples_src/mouse-position.html b/examples_src/mouse-position.html index ec3da34342..bf1262bc4e 100644 --- a/examples_src/mouse-position.html +++ b/examples_src/mouse-position.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Mouse position example" -shortdesc: "Example of a mouse position control, outside the map." +template: example.html +title: Mouse position example +shortdesc: Example of a mouse position control, outside the map. docs: > Example of a mouse position control, outside the map. tags: "mouse-position, openstreetmap" @@ -22,4 +22,4 @@ tags: "mouse-position, openstreetmap" -
 
\ No newline at end of file +
 
diff --git a/examples_src/moveend.html b/examples_src/moveend.html index 0010925bf1..de23bd8855 100644 --- a/examples_src/moveend.html +++ b/examples_src/moveend.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Moveend Example" -shortdesc: "Use of the moveend event." +template: example.html +title: Moveend Example +shortdesc: Use of the moveend event. docs: >

In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.

tags: "moveend, map, event" diff --git a/examples_src/navigation-controls.html b/examples_src/navigation-controls.html index 95bb614445..186ca47304 100644 --- a/examples_src/navigation-controls.html +++ b/examples_src/navigation-controls.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Navigation controls example" -shortdesc: "Shows how to add navigation controls." +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.

diff --git a/examples_src/overlay.html b/examples_src/overlay.html index 4dfda85731..eb2d181779 100644 --- a/examples_src/overlay.html +++ b/examples_src/overlay.html @@ -1,11 +1,12 @@ --- -template: "example.html" -title: "Overlay example" -shortdesc: "Demonstrates overlays." +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 +resources: + - overlay.css ---
diff --git a/examples_src/overviewmap-custom.html b/examples_src/overviewmap-custom.html index 684697018f..e82fb25c26 100644 --- a/examples_src/overviewmap-custom.html +++ b/examples_src/overviewmap-custom.html @@ -1,11 +1,12 @@ --- -template: "example.html" -title: "OverviewMap control example advanced" -shortdesc: "Example of OverviewMap control with advanced customization." +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 +resources: + - overviewmap-custom.css ---
diff --git a/examples_src/overviewmap.html b/examples_src/overviewmap.html index 7a2c2d9965..19691beeb4 100644 --- a/examples_src/overviewmap.html +++ b/examples_src/overviewmap.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "OverviewMap control example" -shortdesc: "Example of OverviewMap control." +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.html b/examples_src/polygon-styles.html index d425638295..8264727846 100644 --- a/examples_src/polygon-styles.html +++ b/examples_src/polygon-styles.html @@ -1,13 +1,14 @@ --- -template: "example.html" -title: "Custom styles for polygons" -shortdesc: "Showing the vertices of a polygon with a custom style geometry." +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 +resources: + - polygon-styles.css ---
diff --git a/examples_src/popup.html b/examples_src/popup.html index 31074d70d9..e0b13ef7c9 100644 --- a/examples_src/popup.html +++ b/examples_src/popup.html @@ -1,13 +1,14 @@ --- -template: "example.html" -title: "Popup example" -shortdesc: "Uses an overlay to create a popup." +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 +resources: + - popup.css ---
diff --git a/examples_src/preload.html b/examples_src/preload.html index 5f303faf6b..ffda2a7e6d 100644 --- a/examples_src/preload.html +++ b/examples_src/preload.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Preload example" -shortdesc: "Example of tile preloading." +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" diff --git a/examples_src/readme.md b/examples_src/readme.md index dc3ab3f354..e5cff8f570 100644 --- a/examples_src/readme.md +++ b/examples_src/readme.md @@ -7,4 +7,4 @@ The `.html` files in this folder are built by applying the templates in the `con * shortdesc: A short description for the example index * docs: Documentation of the example. Can be markdown. * tags: Tags for the example index -* resources: Additional js or css resources required by the example. This is a comma separated list of URLs. +* resources: Additional js or css resources required by the example. This is a YAML list of URLs. diff --git a/examples_src/regularshape.html b/examples_src/regularshape.html index 3f764a91b1..04597160e2 100644 --- a/examples_src/regularshape.html +++ b/examples_src/regularshape.html @@ -1,9 +1,9 @@ --- -template: "example.html" -title: "Regular Shape example" -shortdesc: "Example of some Regular Shape styles." +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 9b8f79c3f9..0b8dd1b66e 100644 --- a/examples_src/rotation.html +++ b/examples_src/rotation.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Rotation example" -shortdesc: "Example of a rotated map." +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 049f00df67..a82a14a566 100644 --- a/examples_src/scale-line.html +++ b/examples_src/scale-line.html @@ -1,9 +1,9 @@ --- -template: "example.html" -title: "Scale line example" -shortdesc: "Example of a scale line." +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 7370a9a83c..1eeae515eb 100644 --- a/examples_src/select-features.html +++ b/examples_src/select-features.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Select features example" -shortdesc: "Example of using the Select interaction." +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.

diff --git a/examples_src/semi-transparent-layer.html b/examples_src/semi-transparent-layer.html index e4c173aa49..0dc0a7497b 100644 --- a/examples_src/semi-transparent-layer.html +++ b/examples_src/semi-transparent-layer.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Semi-transparent layer example" -shortdesc: "Example of a map with a semi-transparent layer." +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 4649b85808..108e02367f 100644 --- a/examples_src/side-by-side.html +++ b/examples_src/side-by-side.html @@ -1,7 +1,7 @@ --- -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." +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" diff --git a/examples_src/simple.html b/examples_src/simple.html index b9abd1fd95..351460b663 100644 --- a/examples_src/simple.html +++ b/examples_src/simple.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Simple example" -shortdesc: "Example of a simple map." +template: example.html +title: Simple example +shortdesc: Example of a simple map. docs: > A simple map with customized Attribution control. tags: "simple, openstreetmap, attribution" diff --git a/examples_src/snap.html b/examples_src/snap.html index 69a2eb211c..bb6235d441 100644 --- a/examples_src/snap.html +++ b/examples_src/snap.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Snap interaction example" -shortdesc: "Example of using the snap interaction together with draw and modify interactions." +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 diff --git a/examples_src/sphere-mollweide.html b/examples_src/sphere-mollweide.html index e10e22637a..7da013fe3e 100644 --- a/examples_src/sphere-mollweide.html +++ b/examples_src/sphere-mollweide.html @@ -1,11 +1,12 @@ --- -template: "example.html" -title: "Sphere Mollweide example" -shortdesc: "Example of a Sphere Mollweide map with a Graticule component." +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 +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 df1deac087..2bbdb12265 100644 --- a/examples_src/stamen.html +++ b/examples_src/stamen.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Stamen example" -shortdesc: "Example of a Stamen tile source." +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 4224fa096e..6de1eb1b50 100644 --- a/examples_src/static-image.html +++ b/examples_src/static-image.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Static image example" -shortdesc: "Example of a static image layer." +template: example.html +title: Static image example +shortdesc: Example of a static image layer. docs: >

This example uses a static image diff --git a/examples_src/symbol-atlas-webgl.html b/examples_src/symbol-atlas-webgl.html index d8d3bde07b..b6bd47aa73 100644 --- a/examples_src/symbol-atlas-webgl.html +++ b/examples_src/symbol-atlas-webgl.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Symbols with WebGL example" -shortdesc: "Using symbols in an atlas with WebGL." +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 diff --git a/examples_src/synthetic-lines.html b/examples_src/synthetic-lines.html index e1ef27fa30..e1fe157ed4 100644 --- a/examples_src/synthetic-lines.html +++ b/examples_src/synthetic-lines.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Synthetic lines example" -shortdesc: "Synthetic lines example." +template: example.html +title: Synthetic lines example +shortdesc: Synthetic lines example. docs: >

Performance results:

diff --git a/examples_src/synthetic-points.html b/examples_src/synthetic-points.html index a9a59b513f..6c3b01301d 100644 --- a/examples_src/synthetic-points.html +++ b/examples_src/synthetic-points.html @@ -1,9 +1,9 @@ --- -template: "example.html" -title: "Synthetic points example" -shortdesc: "Synthetic points example." +template: example.html +title: Synthetic points example +shortdesc: Synthetic points example. docs: > - + tags: "vector" ---
diff --git a/examples_src/teleport.html b/examples_src/teleport.html index aa43a0bd14..7315598e44 100644 --- a/examples_src/teleport.html +++ b/examples_src/teleport.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Teleport example" -shortdesc: "Example of moving a map from one target to another." +template: example.html +title: Teleport example +shortdesc: Example of moving a map from one target to another. docs: >

Click on the Teleport button below the map to move the map from one target to another.

tags: "teleport, openstreetmap" diff --git a/examples_src/tile-load-events.html b/examples_src/tile-load-events.html index 75d512d4dd..1ea77a0b79 100644 --- a/examples_src/tile-load-events.html +++ b/examples_src/tile-load-events.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tile load events example" -shortdesc: "Example using tile load events." +template: example.html +title: Tile load events example +shortdesc: Example using tile load events. docs: > Image tile sources fire events related to tile loading. You can listen for tileloadstart, tileloadend, @@ -16,4 +16,4 @@ tags: "tile, events, loading"
- \ No newline at end of file + diff --git a/examples_src/tile-vector.html b/examples_src/tile-vector.html index cdee5d09d4..3fa660c722 100644 --- a/examples_src/tile-vector.html +++ b/examples_src/tile-vector.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tile vector example" -shortdesc: "Example of vector tiles from openstreetmap.us." +template: example.html +title: Tile vector example +shortdesc: Example of vector tiles from openstreetmap.us. docs: > Example of vector tiles from openstreetmap.us. tags: "custom, control" @@ -20,4 +20,4 @@ tags: "custom, control" - \ No newline at end of file + diff --git a/examples_src/tilejson.html b/examples_src/tilejson.html index e11a22f833..79ba1d85e9 100644 --- a/examples_src/tilejson.html +++ b/examples_src/tilejson.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "TileJSON example" -shortdesc: "Example of a TileJSON layer." +template: example.html +title: TileJSON example +shortdesc: Example of a TileJSON layer. docs: > Example of a TileJSON layer. tags: "tilejson" diff --git a/examples_src/tileutfgrid.html b/examples_src/tileutfgrid.html index 668fd27c33..e8010113b2 100644 --- a/examples_src/tileutfgrid.html +++ b/examples_src/tileutfgrid.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "TileUTFGrid example" -shortdesc: "This example shows how to read data from a TileUTFGrid layer." +template: example.html +title: TileUTFGrid example +shortdesc: This example shows how to read data from a TileUTFGrid layer. docs: >

Point to a country to see its name and flag.

Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/). diff --git a/examples_src/tissot.html b/examples_src/tissot.html index 4bab02205e..6995462ebc 100644 --- a/examples_src/tissot.html +++ b/examples_src/tissot.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tissot indicatrix example" -shortdesc: "Draw Tissot's indicatrices on maps." +template: example.html +title: Tissot indicatrix example +shortdesc: Draw Tissot's indicatrices on maps. docs: > Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857. tags: "tissot, circle" diff --git a/examples_src/topojson.html b/examples_src/topojson.html index 86be09dcab..c88ffe2598 100644 --- a/examples_src/topojson.html +++ b/examples_src/topojson.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "TopoJSON example" -shortdesc: "Demonstrates rendering of features from a TopoJSON topology." +template: example.html +title: TopoJSON example +shortdesc: Demonstrates rendering of features from a TopoJSON topology. docs: > This example uses a vector layer with a `ol.source.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki). tags: "topojson, vector, style" diff --git a/examples_src/vector-labels.html b/examples_src/vector-labels.html index 1dfaadbbf1..ac877e555e 100644 --- a/examples_src/vector-labels.html +++ b/examples_src/vector-labels.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Vector labels example" -shortdesc: "Example of GeoJSON features with labels." +template: example.html +title: Vector labels example +shortdesc: Example of GeoJSON features with labels. docs: > **Note:** The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping. tags: "geojson, vector, openstreetmap, label" diff --git a/examples_src/vector-layer.html b/examples_src/vector-layer.html index d98c05e545..23107a28af 100644 --- a/examples_src/vector-layer.html +++ b/examples_src/vector-layer.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Vector layer example" -shortdesc: "Example of a countries vector layer with country information." +template: example.html +title: Vector layer example +shortdesc: Example of a countries vector layer with country information. docs: > The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels. tags: "vector, osm, xml, loading, server" diff --git a/examples_src/vector-osm.html b/examples_src/vector-osm.html index 5bc7310a05..435709f83a 100644 --- a/examples_src/vector-osm.html +++ b/examples_src/vector-osm.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "OSM XML example" -shortdesc: "Example of using the OSM XML source." +template: example.html +title: OSM XML example +shortdesc: Example of using the OSM XML source. docs: > OSM XML vector data is loaded dynamically from a server using a tiling strategy. tags: "vector, osm, xml, loading, server" diff --git a/examples_src/vector-wfs.html b/examples_src/vector-wfs.html index df0d5b43f8..8c4d3fca02 100644 --- a/examples_src/vector-wfs.html +++ b/examples_src/vector-wfs.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WFS example" -shortdesc: "Example of using WFS with a BBOX strategy." +template: example.html +title: WFS example +shortdesc: Example of using WFS with a BBOX strategy. docs: > This example loads new features from GeoServer WFS when the view extent changes. tags: "vector, WFS, bbox, loading, server" diff --git a/examples_src/wkt.html b/examples_src/wkt.html index 11bfc16f69..7b481b050f 100644 --- a/examples_src/wkt.html +++ b/examples_src/wkt.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WKT example" -shortdesc: "Example of using the WKT parser." +template: example.html +title: WKT example +shortdesc: Example of using the WKT parser. docs: > Create features from geometries in WKT (Well Known Text) format. tags: "wkt, well known text" diff --git a/examples_src/wms-capabilities.html b/examples_src/wms-capabilities.html index 6bc4772fba..f7a28b37f0 100644 --- a/examples_src/wms-capabilities.html +++ b/examples_src/wms-capabilities.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMS GetCapabilities parsing example" -shortdesc: "Example of parsing a WMS GetCapabilities response." +template: example.html +title: WMS GetCapabilities parsing example +shortdesc: Example of parsing a WMS GetCapabilities response. docs: > This example shows the contents of the result object from parsing a WMS capabilities response. tags: "wms, capabilities, getcapabilities" diff --git a/examples_src/wms-custom-proj.html b/examples_src/wms-custom-proj.html index 72b00eebfb..044fa3661d 100644 --- a/examples_src/wms-custom-proj.html +++ b/examples_src/wms-custom-proj.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tiled WMS with custom projection example" -shortdesc: "Example of using custom coordinate transform functions." +template: example.html +title: Tiled WMS with custom projection example +shortdesc: Example of using custom coordinate transform functions. docs: > With `ol.proj.addCoordinateTransforms()`, custom coordinate transform functions can be added to configured projections. tags: "wms, tile, tilelayer, projection" diff --git a/examples_src/wms-image-custom-proj.html b/examples_src/wms-image-custom-proj.html index d7858ba8ab..3c8e14b879 100644 --- a/examples_src/wms-image-custom-proj.html +++ b/examples_src/wms-image-custom-proj.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Single image WMS with Proj4js projection example" -shortdesc: "Example of integrating Proj4js for coordinate transforms." +template: example.html +title: Single image WMS with Proj4js projection example +shortdesc: Example of integrating Proj4js for coordinate transforms. docs: > With transparent [Proj4js](http://proj4js.org/) integration, OpenLayers can transform coordinates between arbitrary projections. tags: "wms, single image, proj4js, projection" diff --git a/examples_src/wms-image.html b/examples_src/wms-image.html index 0ae047a1bd..c8ba7d5250 100644 --- a/examples_src/wms-image.html +++ b/examples_src/wms-image.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Single image WMS example" -shortdesc: "Example of a single image WMS layer." +template: example.html +title: Single image WMS example +shortdesc: Example of a single image WMS layer. docs: > WMS can be used as an Image layer, as shown here, or as a Tile layer, as shown in the [Tiled WMS example](wms-tiled.html) example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography. tags: "wms, image" diff --git a/examples_src/wms-no-proj.html b/examples_src/wms-no-proj.html index 9f9844df44..c011947551 100644 --- a/examples_src/wms-no-proj.html +++ b/examples_src/wms-no-proj.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMS without client projection example" -shortdesc: "Example of two WMS layers using the projection EPSG:21781, which is unknown to the client." +template: example.html +title: WMS without client projection example +shortdesc: Example of two WMS layers using the projection EPSG:21781, which is unknown to the client. docs: > As long as no coordinate transformations are required, OpenLayers 3 works fine with projections that are only configured with a `code` and `units`. tags: "wms, projection" diff --git a/examples_src/wms-tiled-wrap-180.html b/examples_src/wms-tiled-wrap-180.html index cd24112994..e9e34dfabf 100644 --- a/examples_src/wms-tiled-wrap-180.html +++ b/examples_src/wms-tiled-wrap-180.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tiled WMS wrap 180° meridian example" -shortdesc: "Example of a tiled WMS layer that wraps across the 180° meridian." +template: example.html +title: Tiled WMS wrap 180° meridian example +shortdesc: Example of a tiled WMS layer that wraps across the 180° meridian. docs: > The `wrapX` option is set to `true` here so tiles will be wrapped around the x-axis. tags: "wms, tile, dateline, wrap, 180" diff --git a/examples_src/wms-tiled.html b/examples_src/wms-tiled.html index 7b48807d52..b60448214d 100644 --- a/examples_src/wms-tiled.html +++ b/examples_src/wms-tiled.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Tiled WMS example" -shortdesc: "Example of a tiled WMS layer." +template: example.html +title: Tiled WMS example +shortdesc: Example of a tiled WMS layer. docs: > WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the [Single Image WMS example](wms-image.html) example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography. tags: "wms, tile, tilelayer" diff --git a/examples_src/wmts-capabilities.html b/examples_src/wmts-capabilities.html index dd13f220f5..d422008bf5 100644 --- a/examples_src/wmts-capabilities.html +++ b/examples_src/wmts-capabilities.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMTS GetCapabilities parsing example" -shortdesc: "Example of parsing a WMTS GetCapabilities response." +template: example.html +title: WMTS GetCapabilities parsing example +shortdesc: Example of parsing a WMTS GetCapabilities response. docs: > This example shows the contents of the result object from parsing a WMTS capabilities response. tags: "wmts, capabilities, getcapabilities" diff --git a/examples_src/wmts-hidpi.html b/examples_src/wmts-hidpi.html index 9677d896c5..40d72185a1 100644 --- a/examples_src/wmts-hidpi.html +++ b/examples_src/wmts-hidpi.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMTS HiDPI example" -shortdesc: "Example of a WMTS based HiDPI layer." +template: example.html +title: WMTS HiDPI example +shortdesc: Example of a WMTS based HiDPI layer. docs: > The WMTS source has a `tilePixelRatio` option. A HiDPI capable WMTS could provide tiles with 512x512 pixel tiles, but use them in a 256x256 pixel tile grid. In this case `tilePixelRatio` needs to be set to `2`. tags: "hidpi, retina, wmts" diff --git a/examples_src/wmts-layer-from-capabilities.html b/examples_src/wmts-layer-from-capabilities.html index f1a57fd9ac..a515ea33d2 100644 --- a/examples_src/wmts-layer-from-capabilities.html +++ b/examples_src/wmts-layer-from-capabilities.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMTS Layer from capabilities example" -shortdesc: "Example of a WMTS source created from a WMTS capabilities document." +template: example.html +title: WMTS Layer from capabilities example +shortdesc: Example of a WMTS source created from a WMTS capabilities document. docs: > This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response.. The [WMTS example](wmts.html) shows how to create the configuration manually. tags: "wmts, capabilities, getcapabilities" diff --git a/examples_src/wmts.html b/examples_src/wmts.html index 71fb109621..460d8e1fc3 100644 --- a/examples_src/wmts.html +++ b/examples_src/wmts.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "WMTS example" -shortdesc: "Example of a WMTS source." +template: example.html +title: WMTS example +shortdesc: Example of a WMTS source. docs: > This example shows how to manually create the configuration for accessing a WMTS. The [WMTS Layer from capabilities example](wmts-layer-from-capabilities.html) shows how to create the configuration from a GetCapabilities response. tags: "wmts" diff --git a/examples_src/xyz-esri-4326-512.html b/examples_src/xyz-esri-4326-512.html index cea1e526cf..7397cdd7d0 100644 --- a/examples_src/xyz-esri-4326-512.html +++ b/examples_src/xyz-esri-4326-512.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "XYZ Esri EPSG:4326 tileSize 512 example" -shortdesc: "Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles." +template: example.html +title: XYZ Esri EPSG:4326 tileSize 512 example +shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles. docs: > ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile grid and tile url function are required. tags: "xyz, esri, tilesize, custom projection" diff --git a/examples_src/xyz-esri.html b/examples_src/xyz-esri.html index e290eeaba2..0a8810c2fb 100644 --- a/examples_src/xyz-esri.html +++ b/examples_src/xyz-esri.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "XYZ Esri example" -shortdesc: "Example of a XYZ source using Esri tiles." +template: example.html +title: XYZ Esri example +shortdesc: Example of a XYZ source using Esri tiles. docs: > ArcGIS REST tile services are supported by `ol.source.XYZ`. tags: "xyz, esri, arcgis rest" diff --git a/examples_src/xyz-retina.html b/examples_src/xyz-retina.html index 0743c5a733..f6eedb06c4 100644 --- a/examples_src/xyz-retina.html +++ b/examples_src/xyz-retina.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "XYZ Retina tiles example" -shortdesc: "Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ." +template: example.html +title: XYZ Retina tiles example +shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ. docs: > The ol.source.XYZ must contain `tilePixelRatio` parameter. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/). tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio" diff --git a/examples_src/xyz.html b/examples_src/xyz.html index 3c0a0b2a8c..8229f376e4 100644 --- a/examples_src/xyz.html +++ b/examples_src/xyz.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "XYZ Example" -shortdesc: "Example of a XYZ source." +template: example.html +title: XYZ Example +shortdesc: Example of a XYZ source. docs: > The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates. tags: "xyz" diff --git a/examples_src/zoom-constrained.html b/examples_src/zoom-constrained.html index 4978953530..ec637768f6 100644 --- a/examples_src/zoom-constrained.html +++ b/examples_src/zoom-constrained.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Zoom Constrained Example" -shortdesc: "Example of a zoom constrained view." +template: example.html +title: Zoom Constrained Example +shortdesc: Example of a zoom constrained view. docs: > This map has a view that is constrained between zoom levels 9 and 13. This is done using the `minZoom` and `maxZoom` view options. tags: "bing, zoom, minZoom, maxZoom" diff --git a/examples_src/zoomify.html b/examples_src/zoomify.html index b8b77fad86..8b763ebad0 100644 --- a/examples_src/zoomify.html +++ b/examples_src/zoomify.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Zoomify example" -shortdesc: "Example of a Zoomify source." +template: example.html +title: Zoomify example +shortdesc: Example of a Zoomify source. docs: > Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. tags: "zoomify, deep zoom, pixel, projection" diff --git a/examples_src/zoomslider.html b/examples_src/zoomslider.html index 24b0c4f0a7..2ae300fdc4 100644 --- a/examples_src/zoomslider.html +++ b/examples_src/zoomslider.html @@ -1,7 +1,7 @@ --- -template: "example.html" -title: "Zoom slider example" -shortdesc: "Example of various ZoomSlider controls." +template: example.html +title: Zoom slider example +shortdesc: Example of various ZoomSlider controls. docs: > This example shows how to add a zoom slider to a map and how to customize it. tags: "zoom, zoomslider, slider, style, styling, css, control" diff --git a/tasks/.jshintrc b/tasks/.jshintrc index 143ea62260..501497c0b4 100644 --- a/tasks/.jshintrc +++ b/tasks/.jshintrc @@ -10,10 +10,12 @@ "trailing": true, "maxlen": 80, "globals": { + "Buffer": false, "__dirname": false, "exports": true, "module": false, "process": false, - "require": false + "require": false, + "setImmediate": false } } diff --git a/tasks/build-examples.js b/tasks/build-examples.js index 412324a0e3..789fa3f6fb 100644 --- a/tasks/build-examples.js +++ b/tasks/build-examples.js @@ -1,83 +1,108 @@ -/*global Buffer */ +var path = require('path'); var Metalsmith = require('metalsmith'); +var handlebars = require('handlebars'); var templates = require('metalsmith-templates'); var marked = require('marked'); -var fs = require('fs'); -var pjson = require('../package.json'); +var pkg = require('../package.json'); -var fileRegEx = /([^\/^\.]*)\.html$/; +var markupRegEx = /([^\/^\.]*)\.html$/; var cleanupJSRegEx = /.*(goog\.require(.*);|.*renderer: exampleNS\..*,?)[\n]*/g; var isCssRegEx = /\.css$/; var isJsRegEx = /\.js$/; -function main(callback) { +var srcDir = path.join(__dirname, '..', 'examples_src'); +var destDir = path.join(__dirname, '..', 'examples'); +var templatesDir = path.join(__dirname, '..', 'config', 'examples'); - function build(files) { - var file, match, str; - for (var f in files) { - file = files[f]; - match = f.match(fileRegEx); - if (match) { - if (file.template) { - if (file.docs) { - file.docs = marked(file.docs); +/** + * A Metalsmith plugin that adds metadata to the example HTML files. For each + * example HTML file, this adds metadata for related js and css resources. When + * these files are run through the example template, the extra metadata is used + * to show the complete example source in the textarea and submit the parts to + * jsFiddle. + * + * @param {Object} files The file lookup provided by Metalsmith. Property names + * are file paths relative to the source directory. The file objects + * include any existing metadata (e.g. from YAML front-matter), the file + * contents, and stats. + * @param {Object} metalsmith The metalsmith instance the plugin is being used + * with. + * @param {function(Error)} done Called when done (with any error). + */ +function augmentExamples(files, metalsmith, done) { + setImmediate(done); // all remaining code is synchronous + for (var filename in files) { + var file = files[filename]; + var match = filename.match(markupRegEx); + if (match && filename !== 'index.html') { + if (!file.template) { + throw new Error(filename + ': Missing template in YAML front-matter'); + } + var id = match[1]; + + // add js tag and source + var jsFilename = id + '.js'; + if (!(jsFilename in files)) { + throw new Error('No .js file found for ' + filename); + } + file.js = { + tag: '', + source: files[jsFilename].contents.toString().replace( + cleanupJSRegEx, '') + }; + + // add css tag and source + var cssFilename = id + '.css'; + if (cssFilename in files) { + file.css = { + tag: '', + source: files[cssFilename].contents.toString() + }; + } + + // add additional resources + if (file.resources) { + var resources = []; + for (var i = 0, ii = file.resources.length; i < ii; ++i) { + var resource = file.resources[i]; + if (isJsRegEx.test(resource)) { + resources[i] = ''; + } else if (isCssRegEx.test(resource)) { + resources[i] = ''; + } else { + throw new Error('Invalid value for resource: ' + + resource + ' is not .js or .css: ' + filename); } - if (file.contents) { - str = marked(file.contents.toString()); - file.contents = new Buffer(str); - } - file.ol_version = pjson.version; - file.js_resource = ''; - var js = fs.readFileSync(__dirname + '/../examples_src/' + - match[1] + '.js', 'utf8'); - file.js_inline = js.replace(cleanupJSRegEx, ''); - var cssFile = __dirname + '/../examples_src/' + match[1] + '.css'; - if (fs.existsSync(cssFile)) { - file.css_resource = ''; - file.css_inline = fs.readFileSync(cssFile, 'utf-8'); - } - if (file.resources) { - var resources = file.resources.split(','); - var resource; - for (var i = resources.length - 1; i >= 0; --i) { - resource = resources[i]; - if (isJsRegEx.test(resource)) { - resources[i] = ''; - } else if (isCssRegEx.test(resource)) { - resources[i] = ''; - } else { - callback(new Error(f + ': Invalid value for "resource": ' + - resource + ' is no .js or .css.')); - } - file.resources = resources.join('\n'); - } - } - } else if (f !== 'index.html'){ - callback(new Error(f + ': Invalid YAML front-matter.')); } + file.extraHead = resources.join('\n'); } } } +} - +function main(callback) { new Metalsmith('.') - .source('examples_src') - .destination('examples') - .use(build) + .source(srcDir) + .destination(destDir) + .metadata({ + olVersion: pkg.version + }) + .use(augmentExamples) .use(templates({ engine: 'handlebars', - directory: 'config/examples' + directory: templatesDir, + helpers: { + md: function(str) { + return new handlebars.SafeString(marked(str)); + } + } })) .build(function(err) { callback(err); }); } - if (require.main === module) { main(function(err) { if (err) {