Merge pull request #4399 from openlayers/release-v3.11.0

Release v3.11.0.

.travis.yml

@@ -1,5 +1,11 @@
-language: python
+sudo: required
-sudo: false
+dist: trusty
+
+language: node_js
+
+node_js:
+  - "4"
+
 cache:
   directories:
     - node_modules
@@ -7,7 +13,8 @@ env:
   - DISPLAY=:99.0
 
 before_install:
-  - "npm install -g npm && npm install"
+  - "npm prune"
+  - "sudo pip install -r requirements.txt"
 
 before_script:
   - "rm src/ol/renderer/webgl/*shader.js"

changelog/upgrade-notes.md

@@ -46,6 +46,12 @@ but with additional css:
 
 With the introduction of true vector tile support, `ol.source.TileVector` becomes obsolete. Change your code to use `ol.layer.VectorTile` and `ol.source.VectorTile` instead of `ol.layer.Vector` and `ol.source.TileVector`.
 
+#### `ol.Map#forEachFeatureAtPixel` changes for unmanaged layers
+
+`ol.Map#forEachFeatureAtPixel` will still be called for unmanaged layers, but the 2nd argument to the callback function will be `null` instead of a reference to the unmanaged layer. This brings back the behavior of the abandoned `ol.FeatureOverlay` that was replaced by unmanaged layers.
+
+If you are affected by this change, please change your unmanaged layer to a regular layer by using e.g. `ol.Map#addLayer` instead of `ol.layer.Layer#setMap`.
+
 ### v3.10.0
 
 #### `ol.layer.Layer` changes

changelog/v3.11.0.md

@@ -0,0 +1,136 @@
+# v3.11.0
+
+## Summary
+
+The v3.11.0 release includes features and fixes from 73 pull requests since the v3.10.1 release.  New features and improvements include:
+
+* Support for raster reprojection - load raster sources in one projection and view them in another.
+* Support for Mapbox Vector Tiles!
+* Improved KML support, GeoJSON & TopoJSON fixes, and much more.  See below for the full list.
+
+## Upgrade notes
+
+#### `ol.format.KML` changes
+
+KML icons are scaled 50% so that the rendering better matches Google Earth rendering.
+
+If a KML placemark has a name and is a point, an `ol.style.Text` is created with the name displayed to the right of the icon (if there is an icon).
+This can be controlled with the showPointNames option which defaults to true.
+
+To disable rendering of the point names for placemarks, use the option:
+new ol.format.KML({ showPointNames: false });
+
+#### `ol.interaction.DragBox` and `ol.interaction.DragZoom` changes
+
+Styling is no longer done with `ol.Style`, but with pure CSS. The `style` constructor option is no longer required, and no longer available. Instead, there is a `className` option for the CSS selector. The default for `ol.interaction.DragBox` is `ol-dragbox`, and `ol.interaction.DragZoom` uses `ol-dragzoom`. If you previously had
+```js
+new ol.interaction.DragZoom({
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: [255, 255, 255, 0.4]
+    })
+  })
+});
+```
+you'll now just need
+```js
+new ol.interaction.DragZoom();
+```
+but with additional css:
+```css
+.ol-dragzoom {
+  border-color: red;
+  border-width: 3px;
+  background-color: rgba(255,255,255,0.4);
+}
+```
+
+#### Removal of `ol.source.TileVector`
+
+With the introduction of true vector tile support, `ol.source.TileVector` becomes obsolete. Change your code to use `ol.layer.VectorTile` and `ol.source.VectorTile` instead of `ol.layer.Vector` and `ol.source.TileVector`.
+
+#### `ol.Map#forEachFeatureAtPixel` changes for unmanaged layers
+
+`ol.Map#forEachFeatureAtPixel` will still be called for unmanaged layers, but the 2nd argument to the callback function will be `null` instead of a reference to the unmanaged layer. This brings back the behavior of the abandoned `ol.FeatureOverlay` that was replaced by unmanaged layers.
+
+If you are affected by this change, please change your unmanaged layer to a regular layer by using e.g. `ol.Map#addLayer` instead of `ol.layer.Layer#setMap`.
+
+## Full list of changes
+
+ * [#4394](https://github.com/openlayers/ol3/pull/4394) - Allow ol.Object property update without notification. ([@DavidHequet](https://github.com/DavidHequet))
+ * [#4395](https://github.com/openlayers/ol3/pull/4395) - Flag ol.style.Text setOffsetX and Y as @api. ([@adube](https://github.com/adube))
+ * [#4393](https://github.com/openlayers/ol3/pull/4393) - Faster vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#4392](https://github.com/openlayers/ol3/pull/4392) - Update clean-css to version 3.4.7 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4391](https://github.com/openlayers/ol3/pull/4391) - Pass null as forEachFeatureAtPixel layer arg for unmanaged layers ([@ahocevar](https://github.com/ahocevar))
+ * [#4390](https://github.com/openlayers/ol3/pull/4390) - Fix usage of mocha-phantomjs-core after update ([@ahocevar](https://github.com/ahocevar))
+ * [#4387](https://github.com/openlayers/ol3/pull/4387) - Add default argument to getRendererFromQueryString ([@ahocevar](https://github.com/ahocevar))
+ * [#4376](https://github.com/openlayers/ol3/pull/4376) - Make KML format ignore image styles that aren't icons ([@elemoine](https://github.com/elemoine))
+ * [#4385](https://github.com/openlayers/ol3/pull/4385) - Don't transform the scale specified by the user ([@oterral](https://github.com/oterral))
+ * [#4388](https://github.com/openlayers/ol3/pull/4388) - Quick-fix running tests with PhantomJS ([@ahocevar](https://github.com/ahocevar))
+ * [#4378](https://github.com/openlayers/ol3/pull/4378) - Add a writeStyles option to KML format ([@elemoine](https://github.com/elemoine))
+ * [#4375](https://github.com/openlayers/ol3/pull/4375) - Fixed documentation typo (ol.source.ImageWMS) ([@simonseyock](https://github.com/simonseyock))
+ * [#4371](https://github.com/openlayers/ol3/pull/4371) - Fix typo in closure compilation tutorial ([@dtreiter](https://github.com/dtreiter))
+ * [#4370](https://github.com/openlayers/ol3/pull/4370) - Improve ol.interaction.Select#getLayer documentation. ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4365](https://github.com/openlayers/ol3/pull/4365) - Update fs-extra to version 0.26.2 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4366](https://github.com/openlayers/ol3/pull/4366) - Update resemblejs to version 2.0.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4368](https://github.com/openlayers/ol3/pull/4368) - Append KML placemark text style to existing styles ([@marcjansen](https://github.com/marcjansen))
+ * [#4361](https://github.com/openlayers/ol3/pull/4361) - Make GPX format not fail on unsupported geometries ([@elemoine](https://github.com/elemoine))
+ * [#4360](https://github.com/openlayers/ol3/pull/4360) - Update getExtent return value jsdoc tag ([@fredj](https://github.com/fredj))
+ * [#4359](https://github.com/openlayers/ol3/pull/4359) - Update closure-util to version 1.9.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4357](https://github.com/openlayers/ol3/pull/4357) - Update all dependencies. ([@openlayers](https://github.com/openlayers))
+ * [#4356](https://github.com/openlayers/ol3/pull/4356) - Update Metalsmith and layouts plugin. ([@tschaub](https://github.com/tschaub))
+ * [#4355](https://github.com/openlayers/ol3/pull/4355) - Update PhantomJS. ([@tschaub](https://github.com/tschaub))
+ * [#4353](https://github.com/openlayers/ol3/pull/4353) - Resolve path to jsdoc-fork. ([@tschaub](https://github.com/tschaub))
+ * [#3627](https://github.com/openlayers/ol3/pull/3627) - Make package.json compatible for npm frontend use. ([@ThomasG77](https://github.com/ThomasG77))
+ * [#4163](https://github.com/openlayers/ol3/pull/4163) - Fixes for building with Node 4.x. ([@tschaub](https://github.com/tschaub))
+ * [#4347](https://github.com/openlayers/ol3/pull/4347) - Use require.resolve() to find jsdoc. ([@tschaub](https://github.com/tschaub))
+ * [#4291](https://github.com/openlayers/ol3/pull/4291) - Add 'Move a feature along a line' example. ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4344](https://github.com/openlayers/ol3/pull/4344) - Allow different resolutions in x and y direction for ol.source.ImageStatic ([@bartvde](https://github.com/bartvde))
+ * [#4339](https://github.com/openlayers/ol3/pull/4339) - Make sure drawImage width and height are not too big ([@bartvde](https://github.com/bartvde))
+ * [#4334](https://github.com/openlayers/ol3/pull/4334) - Check view extent within image extent ([@ahocevar](https://github.com/ahocevar))
+ * [#4332](https://github.com/openlayers/ol3/pull/4332) - Fix write out GeoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4331](https://github.com/openlayers/ol3/pull/4331) - Allow TopoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4330](https://github.com/openlayers/ol3/pull/4330) - ol.format.TopoJSON is read only, update the jsdoc ([@openlayers](https://github.com/openlayers))
+ * [#4327](https://github.com/openlayers/ol3/pull/4327) - Allow GeoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4219](https://github.com/openlayers/ol3/pull/4219) - Support tiled vector data and Mapbox vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#4322](https://github.com/openlayers/ol3/pull/4322) - Add wrapX override support for ol.source.Cluster ([@FRizZL](https://github.com/FRizZL))
+ * [#4316](https://github.com/openlayers/ol3/pull/4316) - Render name labels if the geometry is a point in KML format (@tamarmot) ([@marcjansen](https://github.com/marcjansen))
+ * [#4313](https://github.com/openlayers/ol3/pull/4313) - Align logos nicely with attribution text ([@ahocevar](https://github.com/ahocevar))
+ * [#4297](https://github.com/openlayers/ol3/pull/4297) - Create standalone versions of ol.ext packages ([@ahocevar](https://github.com/ahocevar))
+ * [#4302](https://github.com/openlayers/ol3/pull/4302) - scale icons by 0.5 so they are not huge ([@tamarmot](https://github.com/tamarmot))
+ * [#4301](https://github.com/openlayers/ol3/pull/4301) - Remove jshint -W069 tags in source code ([@fredj](https://github.com/fredj))
+ * [#4273](https://github.com/openlayers/ol3/pull/4273) - Expand docs on ol.source url prop. ([@Barryrowe](https://github.com/Barryrowe))
+ * [#4293](https://github.com/openlayers/ol3/pull/4293) - Refine the pull request process ([@ahocevar](https://github.com/ahocevar))
+ * [#4289](https://github.com/openlayers/ol3/pull/4289) - Restrict maxZoom of the static-image example ([@ahocevar](https://github.com/ahocevar))
+ * [#4275](https://github.com/openlayers/ol3/pull/4275) - Fix ol.events.condition.mouseOnly parameter type ([@fredj](https://github.com/fredj))
+ * [#4248](https://github.com/openlayers/ol3/pull/4248) - Use Math.cosh of ES6/2015 if available ([@marcjansen](https://github.com/marcjansen))
+ * [#4286](https://github.com/openlayers/ol3/pull/4286) - Add a color manipulation example. ([@tschaub](https://github.com/tschaub))
+ * [#4122](https://github.com/openlayers/ol3/pull/4122) - Raster reprojection ([@klokantech](https://github.com/klokantech))
+ * [#4283](https://github.com/openlayers/ol3/pull/4283) - Flag ol.tilegrid.TileGrid getTileCoordExtent as @api ([@adube](https://github.com/adube))
+ * [#4280](https://github.com/openlayers/ol3/pull/4280) - Use overlay container instead of viewport for ol.render.Box ([@ahocevar](https://github.com/ahocevar))
+ * [#4278](https://github.com/openlayers/ol3/pull/4278) - Use DOM instead of map canvas for ol.render.Box ([@ahocevar](https://github.com/ahocevar))
+ * [#4277](https://github.com/openlayers/ol3/pull/4277) - Improve the box select example ([@fredj](https://github.com/fredj))
+ * [#4276](https://github.com/openlayers/ol3/pull/4276) - Better ol.events.condition.platformModifierKeyOnly documentation ([@fredj](https://github.com/fredj))
+ * [#4102](https://github.com/openlayers/ol3/pull/4102) - Export ol.Observable#dispatchEvent function ([@fredj](https://github.com/fredj))
+ * [#4261](https://github.com/openlayers/ol3/pull/4261) - ol.events.condition.mouseOnly may be wrong ([@fredj](https://github.com/fredj))
+ * [#4269](https://github.com/openlayers/ol3/pull/4269) - Fix Zoom control duration option - allow `0` as value ([@adube](https://github.com/adube))
+ * [#4268](https://github.com/openlayers/ol3/pull/4268) - Add method for retrieving ol.Overlay by id ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4257](https://github.com/openlayers/ol3/pull/4257) - Remove unused ol.math-methods ([@marcjansen](https://github.com/marcjansen))
+ * [#4270](https://github.com/openlayers/ol3/pull/4270) - Fix Keyboard zoom interation options ([@adube](https://github.com/adube))
+ * [#4272](https://github.com/openlayers/ol3/pull/4272) - Allow the DragZoom interaction created in defaults to use zoomDuration option. ([@adube](https://github.com/adube))
+ * [#4271](https://github.com/openlayers/ol3/pull/4271) - Fix DragZoom interaction duration, allow `0` value ([@adube](https://github.com/adube))
+ * [#4267](https://github.com/openlayers/ol3/pull/4267) - Example usability improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#4263](https://github.com/openlayers/ol3/pull/4263) - Add back CSSProperties.prototype.touchAction extern ([@fredj](https://github.com/fredj))
+ * [#4259](https://github.com/openlayers/ol3/pull/4259) - Remove use of toDegrees/toRadians util functions ([@marcjansen](https://github.com/marcjansen))
+ * [#4258](https://github.com/openlayers/ol3/pull/4258) - Remove usage of goog.dom.TagName enum ([@marcjansen](https://github.com/marcjansen))
+ * [#4255](https://github.com/openlayers/ol3/pull/4255) - Fix zoom slider width for retina displays ([@ahocevar](https://github.com/ahocevar))
+ * [#4249](https://github.com/openlayers/ol3/pull/4249) - Make whole example box clickable ([@ahocevar](https://github.com/ahocevar))
+ * [#4045](https://github.com/openlayers/ol3/pull/4045) - Add parser for dimension property from WMTS Capabilities.xml ([@Jenselme](https://github.com/Jenselme))
+ * [#4161](https://github.com/openlayers/ol3/pull/4161) - Add `translatestart`, `translateend` and `translating` events to `ol.interaction.Translate` ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4186](https://github.com/openlayers/ol3/pull/4186) - Do not export ol.webgl.Context ([@elemoine](https://github.com/elemoine))
+ * [#4239](https://github.com/openlayers/ol3/pull/4239) - Changing highlighted to highlight ([@austinkeeley](https://github.com/austinkeeley))
+ * [#3727](https://github.com/openlayers/ol3/pull/3727) - Added getOverviewMap getter method in overviewmapcontrol.js ([@bogdanvaduva](https://github.com/bogdanvaduva))

doc/tutorials/closure.md

@@ -312,7 +312,7 @@ directory:
 ```
 
 Note that the page includes a `script` tag referencing the `app.js` file,
-which is the file resuted from the compilation.
+which is the file resulting from the compilation.
 
 You are done!
 

examples/accessible.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Accessibility example
 shortdesc: Example of an accessible map.
 docs: >

examples/animation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Animation example
 shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >

examples/arcgis-tiled.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Tiled ArcGIS MapServer example
 shortdesc: Example of a tiled ArcGIS layer.
 docs: >

examples/attributions.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Attributions example
 shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
 docs: >

examples/bing-maps.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Bing Maps example
 shortdesc: Example of a Bing Maps layer.
 docs: >

examples/blend-modes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Blend modes example
 shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
 docs: >

examples/box-selection.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Box selection example
 shortdesc: Using a DragBox interaction to select features.
 docs: >

examples/button-title.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom tooltips example
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >

examples/canvas-tiles.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >

examples/center.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/cluster.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Clustering example
 shortdesc: Example of using <code>ol.source.Cluster</code>.
 docs: >

examples/color-manipulation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Manipulating colors with a raster source
 shortdesc: Demonstrates color manipulation with a raster source.
 docs: >

examples/custom-controls.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom control example
 shortdesc: Shows how to create custom controls.
 docs: >

examples/custom-interactions.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom interaction example
 shortdesc: Example of a custom interaction.
 docs: >

examples/d3.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: d3 integration example
 shortdesc: Example of using ol3 and d3 together.
 docs: >

examples/device-orientation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Device-Orientation example
 shortdesc: Listen to DeviceOrientation events.
 docs: >

examples/drag-and-drop-image-vector.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/drag-and-drop.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/drag-rotate-and-zoom.html

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

examples/draw-and-modify-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/draw-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Draw features example
 shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >

examples/dynamic-data.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Dynamic data example
 shortdesc: Example of dynamic data.
 docs: >

examples/earthquake-clusters.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquake Clusters
 shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
 docs: >

examples/epsg-4326.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: EPSG:4326 example
 shortdesc: Example of a map in EPSG:4326.
 docs: >

examples/export-map.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Export map example
 shortdesc: Example of exporting a map as a PNG image.
 docs: >

examples/feature-animation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Feature animation example
 shortdesc: Demonstrates how to animate features.
 docs: >

examples/feature-move-animation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Animate a feature movement
 shortdesc: Demonstrates how to move a feature along a line.
 docs: >

examples/fractal.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Fractal Example
 shortdesc: Example of a fractal.
 docs: >

examples/full-screen-drag-rotate-and-zoom.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Full screen drag rotate and zoom example
 shortdesc: Example of drag rotate and zoom control with full screen effect.
 docs: >

examples/full-screen.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Full screen control example
 shortdesc: Example of a full screen control.
 docs: >

examples/geojson.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: GeoJSON example
 shortdesc: Example of GeoJSON features.
 docs: >

examples/geolocation-orientation.html

@@ -1,5 +1,5 @@
 ---
-template: example-verbatim.html
+layout: example-verbatim.html
 title: Geolocation Tracking with Orientation
 shortdesc: Example of a geolocated and oriented map.
 tags: "fullscreen, geolocation, orientation, mobile"

examples/geolocation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Geolocation example
 shortdesc: Example of a geolocation map.
 docs: >

examples/getfeatureinfo-image.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/getfeatureinfo-tile.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/gpx.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: GPX example
 shortdesc: Example of using the GPX source.
 docs: >

examples/graticule.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Graticule example
 shortdesc: This example shows how to add a graticule overlay to a map.
 docs: >

examples/heatmap-earthquakes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquakes heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >

examples/icon-sprite-webgl.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Icon sprites with WebGL example
 shortdesc: Icon sprite with WebGL
 docs: >

examples/icon-sprite-webgl.js

@@ -78,14 +78,8 @@ var vector = new ol.layer.Vector({
   source: vectorSource
 });
 
-// Use the "webgl" renderer by default.
-var renderer = common.getRendererFromQueryString();
-if (!renderer) {
-  renderer = 'webgl';
-}
-
 var map = new ol.Map({
-  renderer: renderer,
+  renderer: common.getRendererFromQueryString('webgl'),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/icon.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Vector Icon Example
 shortdesc: Example using an icon to symbolize a point.
 docs: >

examples/igc.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: IGC example
 shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
 docs: >

examples/image-filter.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image Filter Example
 shortdesc: Apply a filter to imagery
 docs: >

examples/image-load-events.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image load events example
 shortdesc: Example using image load events.
 docs: >

examples/image-vector-layer.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image vector layer example
 shortdesc: Example of an image vector layer.
 docs: >

examples/jsts.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: JSTS Example
 shortdesc: Example on how to use JSTS with OpenLayers 3.
 docs: >

examples/kml-earthquakes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquakes in KML
 shortdesc: Demonstrates the use of a Shape symbolizer to render earthquake locations.
 docs: >

examples/kml-timezones.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Timezones in KML
 shortdesc: Demonstrates rendering timezones from KML.
 docs: >

examples/kml.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: KML example
 shortdesc: Example of using the KML source.
 docs: >

examples/layer-clipping-webgl.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer WebGL clipping example
 shortdesc: Layer WebGL clipping example.
 docs: >

examples/layer-clipping.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer clipping example
 shortdesc: Layer clipping example
 docs: >

examples/layer-extent.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Limited Layer Extent
 shortdesc: Restricting layer rendering to a limited extent.
 docs: >

examples/layer-group.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer group example
 shortdesc: Example of a map with layer group.
 docs: >

examples/layer-spy.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer Spy Example
 shortdesc: View a portion of one layer over another
 docs: >

examples/layer-swipe.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer Swipe example
 shortdesc: Example of a Layer swipe map.
 docs: >

examples/layer-z-index.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Z-index layer ordering example
 shortdesc: Example of ordering layers using Z-index.
 docs: >

examples/lazy-source.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Lazy Source
 shortdesc: Example of setting a layer source after construction.
 docs: >

examples/line-arrows.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: LineString arrows example
 shortdesc: Example of drawing arrows for each line string segment.
 docs: >

examples/localized-openstreetmap.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Localized OpenStreetMap example
 shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
 docs: >

examples/mapbox-vector-tiles-advanced.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Advanced Mapbox vector tiles example
 shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
 docs: >

examples/mapbox-vector-tiles.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Mapbox vector tiles example
 shortdesc: Example of a Mapbox vector tiles map.
 docs: >

examples/mapguide-untiled.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: MapGuide untiled example
 shortdesc: Example of a untiled MapGuide map.
 docs: >

examples/mapquest.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: MapQuest example
 shortdesc: Example of a MapQuest map.Shows how to create custom controls.
 docs: >

examples/measure.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Measure example
 shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
 docs: >

examples/min-max-resolution.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Min/max resolution example
 shortdesc: Show/hide layers depending on current view resolution.
 docs: >

examples/mobile-full-screen.html

@@ -1,5 +1,5 @@
 ---
-template: example-verbatim.html
+layout: example-verbatim.html
 title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"

examples/modify-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Modify features example
 shortdesc: Editing features with the modify interaction.
 docs: >

examples/modify-test.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Modify features test
 shortdesc: Example for testing feature modification.
 docs: >

examples/mouse-position.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Mouse position example
 shortdesc: Example of a mouse position control, outside the map.
 docs: >

examples/moveend.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Moveend Example
 shortdesc: Use of the moveend event.
 docs: >

examples/navigation-controls.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Navigation controls example
 shortdesc: Shows how to add navigation controls.
 docs: >

examples/overlay.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Overlay example
 shortdesc: Demonstrates overlays.
 docs: >

examples/overviewmap-custom.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: OverviewMap control example advanced
 shortdesc: Example of OverviewMap control with advanced customization.
 docs: >

examples/overviewmap.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: OverviewMap control example
 shortdesc: Example of OverviewMap control.
 docs: >

examples/permalink.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Permalink example
 shortdesc: Example on how to create permalinks.
 docs: >

examples/polygon-styles.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom styles for polygons
 shortdesc: Showing the vertices of a polygon with a custom style geometry.
 docs: >

examples/popup.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Popup example
 shortdesc: Uses an overlay to create a popup.
 docs: >

examples/preload.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Preload example
 shortdesc: Example of tile preloading.
 docs: >

examples/raster.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Raster Source
 shortdesc: Demonstrates pixelwise operations with a raster source.
 docs: >

examples/readme.md

@@ -2,7 +2,7 @@
 
 The `.html` files in this folder are built by applying the templates in the `config/examples/` folder. Examples have [YAML front-matter](http://www.metalsmith.io) headers with the following properties:
 
-* template: The template from the `config/examples/` directory to use for this example
+* layout: The template from the `config/examples/` directory to use for this example
 * title: The title of the example
 * shortdesc: A short description for the example index
 * docs: Documentation of the example. Can be markdown.

examples/region-growing.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Region Growing
 shortdesc: Grow a region from a seed pixel
 docs: >

examples/regularshape.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Regular Shape example
 shortdesc: Example of some Regular Shape styles.
 docs: >

examples/reprojection-by-code.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Reprojection with EPSG.io database search
 shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
 docs: >

examples/reprojection-image.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image reprojection example
 shortdesc: Demonstrates client-side reprojection of single image source.
 docs: >

examples/reprojection-wgs84.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: OpenStreetMap reprojection example
 shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84.
 docs: >

examples/reprojection.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Raster reprojection example
 shortdesc: Demonstrates client-side raster reprojection between various projections.
 docs: >

examples/resources/common.js

@@ -83,7 +83,7 @@
 
 var common = {};
 
-common.getRendererFromQueryString = function() {
+common.getRendererFromQueryString = function(opt_default) {
   var obj = {};
   var queryString = location.search.slice(1);
   var re = /([^&=]+)=([^&]*)/g;
@@ -98,6 +98,6 @@ common.getRendererFromQueryString = function() {
   } else if ('renderer' in obj) {
     return [obj['renderer']];
   } else {
-    return undefined;
+    return opt_default;
   }
 };

examples/resources/mapbox-streets-v6-style.js

@@ -53,16 +53,16 @@ function createMapboxStreetsV6Style() {
     } else if (layer == 'waterway' &&
         cls != 'river' && cls != 'stream' && cls != 'canal') {
       stroke.setColor('#a0c8f0');
-      stroke.setWidth(1.3);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'waterway' && cls == 'river') {
       stroke.setColor('#a0c8f0');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'waterway' && (cls == 'stream' ||
         cls == 'canal')) {
       stroke.setColor('#a0c8f0');
-      stroke.setWidth(1.3);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'water') {
       fill.setColor('#a0c8f0');
@@ -73,7 +73,7 @@ function createMapboxStreetsV6Style() {
     } else if (layer == 'aeroway' && geom == 'LineString' &&
         resolution <= 76.43702828517625) {
       stroke.setColor('#f0ede9');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'building') {
       fill.setColor('#f2eae2');
@@ -82,90 +82,90 @@ function createMapboxStreetsV6Style() {
       styles[length++] = strokedPolygon;
     } else if (layer == 'tunnel' && cls == 'motorway_link') {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' && cls == 'service') {
       stroke.setColor('#cfcdca');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' &&
         (cls == 'street' || cls == 'street_limited')) {
       stroke.setColor('#cfcdca');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' && cls == 'main' &&
         resolution <= 1222.99245256282) {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' && cls == 'motorway') {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' && cls == 'path') {
       stroke.setColor('#cba');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'tunnel' && cls == 'major_rail') {
       stroke.setColor('#bbb');
-      stroke.setWidth(1.4);
+      stroke.setWidth(2);
       styles[length++] = line;
     } else if (layer == 'road' && cls == 'motorway_link') {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'road' && (cls == 'street' ||
         cls == 'street_limited') && geom == 'LineString') {
       stroke.setColor('#cfcdca');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'road' && cls == 'main' &&
         resolution <= 1222.99245256282) {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'road' && cls == 'motorway' &&
         resolution <= 4891.96981025128) {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'road' && cls == 'path') {
       stroke.setColor('#cba');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'road' && cls == 'major_rail') {
       stroke.setColor('#bbb');
-      stroke.setWidth(1.4);
+      stroke.setWidth(2);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'motorway_link') {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'motorway') {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'service') {
       stroke.setColor('#cfcdca');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' &&
         (cls == 'street' || cls == 'street_limited')) {
       stroke.setColor('#cfcdca');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'main' &&
         resolution <= 1222.99245256282) {
       stroke.setColor('#e9ac77');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'path') {
       stroke.setColor('#cba');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = line;
     } else if (layer == 'bridge' && cls == 'major_rail') {
       stroke.setColor('#bbb');
-      stroke.setWidth(1.4);
+      stroke.setWidth(2);
       styles[length++] = line;
     } else if (layer == 'admin' && adminLevel >= 3 && maritime === 0) {
       stroke.setColor('#9e9cab');
@@ -227,7 +227,7 @@ function createMapboxStreetsV6Style() {
           'italic 11px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#74aee9');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(0.75);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'marine_label' && labelrank === 2 &&
         geom == 'Point') {
@@ -236,7 +236,7 @@ function createMapboxStreetsV6Style() {
           'italic 11px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#74aee9');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(0.75);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'marine_label' && labelrank === 3 &&
         geom == 'Point') {
@@ -245,7 +245,7 @@ function createMapboxStreetsV6Style() {
           'italic 10px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#74aee9');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(0.75);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'marine_label' && labelrank === 4 &&
         geom == 'Point') {
@@ -254,7 +254,7 @@ function createMapboxStreetsV6Style() {
           'italic 9px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#74aee9');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(0.75);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'place_label' && type == 'city' &&
         resolution <= 1222.99245256282) {
@@ -262,7 +262,7 @@ function createMapboxStreetsV6Style() {
       text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#333');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'place_label' && type == 'town' &&
         resolution <= 305.748113140705) {
@@ -270,7 +270,7 @@ function createMapboxStreetsV6Style() {
       text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#333');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'place_label' && type == 'village' &&
         resolution <= 38.21851414258813) {
@@ -278,7 +278,7 @@ function createMapboxStreetsV6Style() {
       text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
       fill.setColor('#333');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'place_label' &&
         resolution <= 19.109257071294063 && (type == 'hamlet' ||
@@ -287,7 +287,7 @@ function createMapboxStreetsV6Style() {
       text.getText().setFont('bold 9px "Arial Narrow"');
       fill.setColor('#633');
       stroke.setColor('rgba(255,255,255,0.8)');
-      stroke.setWidth(1.2);
+      stroke.setWidth(1);
       styles[length++] = text;
     } else if (layer == 'poi_label' && resolution <= 19.109257071294063 &&
         scalerank == 1 && maki !== 'marker') {

examples/rotation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Rotation example
 shortdesc: Example of a rotated map.
 docs: >

examples/scale-line.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Scale line example
 shortdesc: Example of a scale line.
 docs: >

examples/select-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Select features example
 shortdesc: Example of using the Select interaction.
 docs: >

examples/semi-transparent-layer.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Semi-transparent layer example
 shortdesc: Example of a map with a semi-transparent layer.
 docs: >

examples/shaded-relief.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Shaded Relief
 shortdesc: Calculate shaded relief from elevation data
 docs: >

examples/side-by-side.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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: >

examples/simple.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Simple example
 shortdesc: Example of a simple map.
 docs: >

examples/snap.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Snap interaction example
 shortdesc: Example of using the snap interaction together with draw and modify interactions.
 docs: >