From 58d22350d837b28178dca7bd78a2825ed1b2dabb Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 11:17:25 -0700 Subject: [PATCH 01/32] New template that removes Bootstrap and jQuery from code snippet --- config/examples/strapless.html | 81 ++++++++++++++++++++++++++++++++++ examples/resources/common.js | 27 ++++++------ 2 files changed, 94 insertions(+), 14 deletions(-) create mode 100644 config/examples/strapless.html diff --git a/config/examples/strapless.html b/config/examples/strapless.html new file mode 100644 index 0000000000..7f326efbe1 --- /dev/null +++ b/config/examples/strapless.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + {{{ extraHead.local }}} + {{{ css.tag }}} + + {{ title }} + + + + + +
+ +
+
+ {{{ contents }}} +
+
+ +
+
+

{{ title }}

+

{{ shortdesc }}

+
{{ md docs }}
+ +
+
+ +
+
+ Copy + Edit +
+
+ + + + + +
+ 
<!DOCTYPE html>
+<html>
+<head>
+<title>{{ title }}</title>
+<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
+<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>
+{{ extraHead.remote }}
+{{#if css.source}}
+<style>
+{{ css.source }}
+</style>
+{{/if}}
+</head>
+<body>
+{{ contents }}
+<script>
+{{ js.source }}
+</script>
+</body>
+</html>
+
+
+ + + + {{{ js.tag }}} + + diff --git a/examples/resources/common.js b/examples/resources/common.js index 799e607283..00105c61c9 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -36,8 +36,19 @@ var urlMode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i); var curMode = urlMode ? urlMode[1] : 'advanced'; - var modeChangedMethod = function() { - var newMode = this.value; + for (var mode in possibleModes) { + if (possibleModes.hasOwnProperty(mode)) { + var option = document.createElement('option'); + var modeTxt = possibleModes[mode]; + option.value = mode; + option.innerHTML = modeTxt; + option.selected = curMode === mode; + select.appendChild(option); + } + } + + select.onchange = function(event) { + var newMode = event.target.value; var search = window.location.search.substring(1); var baseUrl = window.location.href.split('?')[0]; var chunks = search ? search.split('&') : []; @@ -61,18 +72,6 @@ location.href = baseUrl + '?' + pairs.join('&'); }; - for (var mode in possibleModes) { - if (possibleModes.hasOwnProperty(mode)) { - var option = document.createElement('option'); - var modeTxt = possibleModes[mode]; - option.value = mode; - option.innerHTML = modeTxt; - option.selected = curMode === mode; - select.appendChild(option); - } - } - - $(select).change(modeChangedMethod); select.className = 'input-medium'; form.className = 'navbar-form pull-right'; From 74f2b4cb742888e773f83996b192816434f86b3e Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 12:20:50 -0700 Subject: [PATCH 02/32] Intentional indentation and newlines --- config/examples/strapless.html | 29 ++++++++++++----------------- tasks/build-examples.js | 10 ++++++++++ 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/config/examples/strapless.html b/config/examples/strapless.html index 7f326efbe1..3417c38d8f 100644 --- a/config/examples/strapless.html +++ b/config/examples/strapless.html @@ -53,23 +53,18 @@ 
<!DOCTYPE html>
 <html>
-<head>
-<title>{{ title }}</title>
-<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
-<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>
-{{ extraHead.remote }}
-{{#if css.source}}
-<style>
-{{ css.source }}
-</style>
-{{/if}}
-</head>
-<body>
-{{ contents }}
-<script>
-{{ js.source }}
-</script>
-</body>
+  <head>
+    <title>{{ title }}</title>
+    <link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
+    <script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
+{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
+    <style>
+{{ indent css.source spaces=6 }}    </style>{{/if}}
+  </head>
+  <body>
+{{ indent contents spaces=4 }}    <script>
+{{ indent js.source spaces=6 }}    </script>
+  </body>
 </html>
diff --git a/tasks/build-examples.js b/tasks/build-examples.js index 46e81e57f5..0563906e45 100644 --- a/tasks/build-examples.js +++ b/tasks/build-examples.js @@ -233,6 +233,16 @@ function main(callback) { helpers: { md: function(str) { return new handlebars.SafeString(marked(str)); + }, + indent: function(text, options) { + if (!text) { + return text; + } + var count = options.hash.spaces || 2; + var spaces = new Array(count + 1).join(' '); + return text.split('\n').map(function(line) { + return line ? spaces + line : ''; + }).join('\n'); } } })) From a2f84b144f9138fe5edef3c202de8909086c5e18 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 12:58:58 -0700 Subject: [PATCH 03/32] Avoid including bootstrap.min.css twice --- tasks/build-examples.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tasks/build-examples.js b/tasks/build-examples.js index 0563906e45..d2b3848bca 100644 --- a/tasks/build-examples.js +++ b/tasks/build-examples.js @@ -121,7 +121,9 @@ function augmentExamples(files, metalsmith, done) { remoteResources[i] = ''; } else if (isCssRegEx.test(resource)) { - resources[i] = ''; + if (resource.indexOf('bootstrap.min.css') === -1) { + resources[i] = ''; + } remoteResources[i] = ''; } else { From 734712bf9c4c910a9fe3814062413c04db156679 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 12:59:34 -0700 Subject: [PATCH 04/32] Convert A-C examples to strapless template --- examples/accessible.html | 14 ++-- examples/animation.html | 30 ++++----- examples/arcgis-tiled.html | 8 +-- examples/attributions.html | 8 +-- examples/bing-maps.html | 22 +++---- examples/blend-modes.html | 102 ++++++++++++++---------------- examples/box-selection.html | 16 ++--- examples/button-title.css | 1 - examples/button-title.html | 12 ++-- examples/canvas-tiles.html | 10 +-- examples/center.html | 32 ++++------ examples/cluster.html | 8 +-- examples/color-manipulation.html | 42 ++++++------ examples/custom-controls.html | 6 +- examples/custom-controls.js | 2 +- examples/custom-interactions.html | 6 +- examples/custom-interactions.js | 3 +- 17 files changed, 127 insertions(+), 195 deletions(-) diff --git a/examples/accessible.html b/examples/accessible.html index f60fe49cb3..273e02927a 100644 --- a/examples/accessible.html +++ b/examples/accessible.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Accessibility example shortdesc: Example of an accessible map. docs: > @@ -10,11 +10,7 @@ docs: > tags: "accessibility, tabindex" --- -
-
- -
- - -
-
+ +
+ + diff --git a/examples/animation.html b/examples/animation.html index 210922a23b..569ce8d264 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Animation example shortdesc: Demonstrates animated pan, zoom, and rotation. docs: > @@ -7,21 +7,13 @@ docs: > or more animations. tags: "animation" --- -
-
-
-
-
-
-
- - - - - - - - - -
-
+
+ + + + + + + + + diff --git a/examples/arcgis-tiled.html b/examples/arcgis-tiled.html index 0d7eb78f39..5acab14189 100644 --- a/examples/arcgis-tiled.html +++ b/examples/arcgis-tiled.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Tiled ArcGIS MapServer example shortdesc: Example of a tiled ArcGIS layer. docs: > @@ -9,8 +9,4 @@ docs: > ol.source.XYZ instead. tags: arcgis, tile, tilelayer" --- -
-
-
-
-
+
diff --git a/examples/attributions.html b/examples/attributions.html index a807c0a320..a225970d8e 100644 --- a/examples/attributions.html +++ b/examples/attributions.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Attributions example shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps. docs: > @@ -8,8 +8,4 @@ docs: > of the map gets smaller than 600 pixels. tags: "attributions, openstreetmap" --- -
-
-
-
-
+
diff --git a/examples/bing-maps.html b/examples/bing-maps.html index b75b473b02..689bdf3267 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Bing Maps example shortdesc: Example of a Bing Maps layer. docs: > @@ -8,15 +8,11 @@ tags: "bing, bing-maps" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
- -
-
+
+ diff --git a/examples/blend-modes.html b/examples/blend-modes.html index 10f027ecfb..4b395b939b 100644 --- a/examples/blend-modes.html +++ b/examples/blend-modes.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Blend modes example shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers. docs: > @@ -20,57 +20,49 @@ docs: > checkboxes.

tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector" --- -
-
-
-
-
-
-
-
- - - - -
-
-
+
+
+ + + + +
diff --git a/examples/box-selection.html b/examples/box-selection.html index b0089cb9ec..a3297df320 100644 --- a/examples/box-selection.html +++ b/examples/box-selection.html @@ -1,20 +1,12 @@ --- -layout: example.html +layout: strapless.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.

-

Use Ctrl+drag (Meta+drag on Mac) to draw boxes.

+

Use Ctrl+drag (Command+drag on Mac) to draw boxes.

tags: "DragBox, feature, selection, box" --- -
-
-
-
-
-
-   -
-
-
+
+
No countries selected
diff --git a/examples/button-title.css b/examples/button-title.css index c1f2f96c9e..894dc8157f 100644 --- a/examples/button-title.css +++ b/examples/button-title.css @@ -1,4 +1,3 @@ .tooltip-inner { white-space: nowrap; } - diff --git a/examples/button-title.html b/examples/button-title.html index 09dda1816e..ef153bce4f 100644 --- a/examples/button-title.html +++ b/examples/button-title.html @@ -1,13 +1,13 @@ --- -layout: example.html +layout: strapless.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" +resources: + - https://code.jquery.com/jquery-1.11.2.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js --- -
-
-
-
-
+
diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html index 021104ca5a..c3684386f5 100644 --- a/examples/canvas-tiles.html +++ b/examples/canvas-tiles.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Canvas tiles example shortdesc: Renders tiles with coordinates for debugging. docs: > @@ -7,11 +7,7 @@ docs: > displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme coordinates increase from top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use - `-y - 1`. + `-y - 1`. tags: "layers, openstreetmap, canvas" --- -
-
-
-
-
+
diff --git a/examples/center.html b/examples/center.html index 255572c5ab..3c0ad920df 100644 --- a/examples/center.html +++ b/examples/center.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.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: > @@ -13,22 +13,16 @@ docs: >

Use Alt+Shift+drag to rotate the map.

tags: "center, rotation, openstreetmap" --- -
-
-
-
-
-
-
-
-
-
-
-
- (best fit),
- (respect resolution constraint).
- (nearest),
- (with min resolution),
- -
+
+
+
+
+
+
+
+ (best fit),
+ (respect resolution constraint).
+ (nearest),
+ (with min resolution),
+ diff --git a/examples/cluster.html b/examples/cluster.html index b327010cf1..69cc3a78de 100644 --- a/examples/cluster.html +++ b/examples/cluster.html @@ -1,13 +1,9 @@ --- -layout: example.html +layout: strapless.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/color-manipulation.html b/examples/color-manipulation.html index 6495ab8c38..393ebd30a7 100644 --- a/examples/color-manipulation.html +++ b/examples/color-manipulation.html @@ -1,30 +1,26 @@ --- -layout: example.html +layout: strapless.html title: Manipulating colors with a raster source shortdesc: Demonstrates color manipulation with a raster source. docs: > A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering. tags: "color, hue, lightness, chroma" --- -
-
-
- - - - - - - - - - - - - - - - -
hue°
chroma %
lightness %
-
-
+
+ + + + + + + + + + + + + + + + +
hue°
chroma %
lightness %
diff --git a/examples/custom-controls.html b/examples/custom-controls.html index b1d7906714..9b25f014fe 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -6,8 +6,4 @@ docs: > This example creates a "rotate to north" button. tags: "custom, control" --- -
-
-
-
-
+
diff --git a/examples/custom-controls.js b/examples/custom-controls.js index b1bf0ad2bc..3c81d909b2 100644 --- a/examples/custom-controls.js +++ b/examples/custom-controls.js @@ -75,7 +75,7 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], - zoom: 2, + zoom: 3, rotation: 1 }) }); diff --git a/examples/custom-interactions.html b/examples/custom-interactions.html index 3da1d6d982..5113a4d54b 100644 --- a/examples/custom-interactions.html +++ b/examples/custom-interactions.html @@ -7,8 +7,4 @@ docs: > Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features. tags: "drag, feature, vector, editing, custom, interaction" --- -
-
-
-
-
+
diff --git a/examples/custom-interactions.js b/examples/custom-interactions.js index faff5ae42b..5ca3b305b4 100644 --- a/examples/custom-interactions.js +++ b/examples/custom-interactions.js @@ -19,8 +19,7 @@ goog.require('ol.style.Style'); /** * Define a namespace for the application. */ -window.app = {}; -var app = window.app; +var app = {}; From 48be3ee5729672edbdb5156df65740d081229723 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 13:08:49 -0700 Subject: [PATCH 05/32] Simplify the simple example --- examples/simple.html | 12 ++++-------- examples/simple.js | 7 ------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/examples/simple.html b/examples/simple.html index 99afe422d7..9fb6a36c47 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -1,13 +1,9 @@ --- -layout: example.html +layout: strapless.html title: Simple example shortdesc: Example of a simple map. docs: > - A simple map with customized Attribution control. -tags: "simple, openstreetmap, attribution" + A simple map with an OSM source. +tags: "simple, openstreetmap" --- -
-
-
-
-
+
diff --git a/examples/simple.js b/examples/simple.js index a2d0ca761b..6d452df233 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -1,6 +1,5 @@ goog.require('ol.Map'); goog.require('ol.View'); -goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); @@ -11,12 +10,6 @@ var map = new ol.Map({ source: new ol.source.OSM() }) ], - controls: ol.control.defaults({ - attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ - collapsible: false - }) - }), - renderer: common.getRendererFromQueryString(), target: 'map', view: new ol.View({ center: [0, 0], From 5a511c759105b92f857c34674eabde32417a46b5 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 15:48:01 -0700 Subject: [PATCH 06/32] Remove "// NOCOMPILE" lines from examples --- tasks/build-examples.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tasks/build-examples.js b/tasks/build-examples.js index d2b3848bca..31f3d3f2b5 100644 --- a/tasks/build-examples.js +++ b/tasks/build-examples.js @@ -7,7 +7,9 @@ var marked = require('marked'); var pkg = require('../package.json'); var markupRegEx = /([^\/^\.]*)\.html$/; -var cleanupJSRegEx = /.*(goog\.require(.*);|.*renderer: common\..*,?)[\n]*/g; +/* jshint -W101 */ +var cleanupJSRegEx = /.*(\/\/ NOCOMPILE|goog\.require\(.*\);|.*renderer: common\..*,?)[\n]*/g; +/* jshint +W101 */ var requiresRegEx = /.*goog\.require\('(ol\.\S*)'\);/g; var isCssRegEx = /\.css$/; var isJsRegEx = /\.js$/; From c3165252f8094d618bfc8336ac30904d99d836ca Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 15:48:24 -0700 Subject: [PATCH 07/32] Move title above map --- config/examples/strapless.html | 2 +- examples/resources/layout.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/config/examples/strapless.html b/config/examples/strapless.html index 3417c38d8f..00ee8e7a1d 100644 --- a/config/examples/strapless.html +++ b/config/examples/strapless.html @@ -26,13 +26,13 @@
+

{{ title }}

{{{ contents }}}
-

{{ title }}

{{ shortdesc }}

{{ md docs }}
diff --git a/examples/resources/layout.css b/examples/resources/layout.css index be6fa8c332..3c6151a299 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -27,6 +27,10 @@ body { display: inline-block; } +#title { + margin-top: 0; +} + ul.inline, ol.inline { margin-left: 0; From 3035bbdfd3eb9e577d41ab3a1c022cb63ceb8c66 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 16:00:35 -0700 Subject: [PATCH 08/32] Convert D-E examples to strapless template --- examples/d3.html | 10 +++---- examples/d3.js | 1 - examples/device-orientation.html | 30 +++++++++------------ examples/drag-and-drop-image-vector.html | 21 +++++---------- examples/drag-and-drop.html | 21 +++++---------- examples/drag-rotate-and-zoom.html | 12 +++------ examples/draw-and-modify-features.html | 26 ++++++++---------- examples/draw-features.html | 34 +++++++++++------------- examples/dynamic-data.html | 10 +++---- examples/earthquake-clusters.html | 8 ++---- examples/epsg-4326.html | 10 +++---- examples/export-map.html | 18 +++++-------- 12 files changed, 73 insertions(+), 128 deletions(-) diff --git a/examples/d3.html b/examples/d3.html index 5266a8fd64..f343946904 100644 --- a/examples/d3.html +++ b/examples/d3.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: d3 integration example +layout: strapless.html +title: d3 Integration 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.

@@ -9,8 +9,4 @@ resources: - http://d3js.org/d3.v3.min.js - http://d3js.org/topojson.v1.min.js --- -
-
-
-
-
+
diff --git a/examples/d3.js b/examples/d3.js index b6cbe6cf1a..2bcbf7deaf 100644 --- a/examples/d3.js +++ b/examples/d3.js @@ -1,5 +1,4 @@ // NOCOMPILE -// this example uses d3 for which we don't have an externs file. goog.require('ol'); goog.require('ol.Map'); goog.require('ol.View'); diff --git a/examples/device-orientation.html b/examples/device-orientation.html index aa84dbbe12..0156da8e65 100644 --- a/examples/device-orientation.html +++ b/examples/device-orientation.html @@ -1,23 +1,19 @@ --- -layout: example.html -title: Device-Orientation example +layout: strapless.html +title: Device Orientation shortdesc: Listen to DeviceOrientation events. docs: > This example shows how to track changes in device orientation. tags: "orientation, openstreetmap" --- -
-
-
-
-

Device orientation example

- -

α :

-

β :

-

γ :

-

heading :

-
-
-
+
+ +

+ α :    + β :    + γ :    + heading : +

diff --git a/examples/drag-and-drop-image-vector.html b/examples/drag-and-drop-image-vector.html index c810cd3e8a..74832f59b6 100644 --- a/examples/drag-and-drop-image-vector.html +++ b/examples/drag-and-drop-image-vector.html @@ -1,21 +1,12 @@ --- -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. +layout: strapless.html +title: Drag-and-Drop Image Vector +shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector. 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. + Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client. tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
-   -
-
-
-
+
+
 
diff --git a/examples/drag-and-drop.html b/examples/drag-and-drop.html index 77c843c873..c6b8cb8aac 100644 --- a/examples/drag-and-drop.html +++ b/examples/drag-and-drop.html @@ -1,21 +1,12 @@ --- -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. +layout: strapless.html +title: Drag-and-Drop +shortdesc: Example of using the drag-and-drop interaction. docs: > - Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will - only work with data in EPSG:4326 and EPSG:3857. + 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" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
-   -
-
-
-
+
+
 
diff --git a/examples/drag-rotate-and-zoom.html b/examples/drag-rotate-and-zoom.html index 5f2e8628f9..a4fe8d599f 100644 --- a/examples/drag-rotate-and-zoom.html +++ b/examples/drag-rotate-and-zoom.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Drag rotate and zoom example +layout: strapless.html +title: Drag, Rotate, and Zoom shortdesc: A single interaction to drag, rotate, and zoom. docs: > -

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

+

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

tags: "drag, rotate, zoom, interaction" --- -
-
-
-
-
+
diff --git a/examples/draw-and-modify-features.html b/examples/draw-and-modify-features.html index 4ee17680ca..bff60d2f70 100644 --- a/examples/draw-and-modify-features.html +++ b/examples/draw-and-modify-features.html @@ -1,21 +1,17 @@ --- -layout: example.html -title: Draw and modify features example +layout: strapless.html +title: Draw and Modify Features 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/draw-features.html b/examples/draw-features.html index 28f113863f..1fda0eaaa0 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Draw features example +layout: strapless.html +title: Draw Features shortdesc: Example of using the ol.interaction.Draw interaction. docs: > Example of using the Draw interaction. Select a geometry type from the @@ -12,20 +12,16 @@ docs: > points and creates a rectangular box. tags: "draw, edit, freehand, vector" --- -
-
-
-
- - -
-
-
+
+
+ + +
diff --git a/examples/dynamic-data.html b/examples/dynamic-data.html index 77919df010..ef82284148 100644 --- a/examples/dynamic-data.html +++ b/examples/dynamic-data.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Dynamic data example +layout: strapless.html +title: Dynamic Data shortdesc: Example of dynamic data. docs: > Example of dynamic data. tags: "dynamic-data" --- -
-
-
-
-
+
diff --git a/examples/earthquake-clusters.html b/examples/earthquake-clusters.html index fef9aa5be2..8c17048455 100644 --- a/examples/earthquake-clusters.html +++ b/examples/earthquake-clusters.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Earthquake Clusters shortdesc: Demonstrates the use of style geometries to render source features of a cluster. docs: > @@ -9,8 +9,4 @@ docs: >

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

tags: "KML, vector, style, geometry, cluster" --- -
-
-
-
-
+
diff --git a/examples/epsg-4326.html b/examples/epsg-4326.html index 649ca40ec7..77d9b04610 100644 --- a/examples/epsg-4326.html +++ b/examples/epsg-4326.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: EPSG:4326 example +layout: strapless.html +title: EPSG:4326 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/export-map.html b/examples/export-map.html index f1e3963bd7..f847ad6e0f 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -1,18 +1,14 @@ --- -layout: example.html -title: Export map example +layout: strapless.html +title: Map Export shortdesc: Example of exporting a map as a PNG image. docs: > Example of exporting a map as a PNG image. tags: "export, png, openstreetmap" --- -
-
-
- - Export PNG -
+
+ + Download PNG From b8cf2b213befcda0ccabaabb1f090d7972ecf013 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 16:03:13 -0700 Subject: [PATCH 09/32] Make the titles more like titles --- examples/accessible.html | 2 +- examples/animation.html | 2 +- examples/arcgis-tiled.html | 2 +- examples/attributions.html | 2 +- examples/bing-maps.html | 2 +- examples/blend-modes.html | 2 +- examples/box-selection.html | 2 +- examples/button-title.html | 2 +- examples/canvas-tiles.html | 2 +- examples/center.html | 2 +- examples/cluster.html | 2 +- examples/color-manipulation.html | 2 +- examples/custom-controls.html | 2 +- examples/custom-interactions.html | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/examples/accessible.html b/examples/accessible.html index 273e02927a..3caae42485 100644 --- a/examples/accessible.html +++ b/examples/accessible.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Accessibility example +title: Acessible Map 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. diff --git a/examples/animation.html b/examples/animation.html index 569ce8d264..58d06835ef 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Animation example +title: View Animation shortdesc: Demonstrates animated pan, zoom, and rotation. docs: > This example shows how to use the beforeRender function on the Map to run one diff --git a/examples/arcgis-tiled.html b/examples/arcgis-tiled.html index 5acab14189..6ab09bc904 100644 --- a/examples/arcgis-tiled.html +++ b/examples/arcgis-tiled.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Tiled ArcGIS MapServer example +title: Tiled ArcGIS MapServer shortdesc: Example of a tiled ArcGIS layer. docs: > This example shows how to use an ArcGIS REST MapService as tiles. diff --git a/examples/attributions.html b/examples/attributions.html index a225970d8e..a0d12df9f5 100644 --- a/examples/attributions.html +++ b/examples/attributions.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Attributions example +title: Attributions 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. diff --git a/examples/bing-maps.html b/examples/bing-maps.html index 689bdf3267..ddf1977ae6 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Bing Maps example +title: Bing Maps 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.

diff --git a/examples/blend-modes.html b/examples/blend-modes.html index 4b395b939b..30d41e8bf4 100644 --- a/examples/blend-modes.html +++ b/examples/blend-modes.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Blend modes example +title: Blend Modes shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers. docs: >

This example shows how to change the canvas compositing / blending mode in diff --git a/examples/box-selection.html b/examples/box-selection.html index a3297df320..f0e0863abc 100644 --- a/examples/box-selection.html +++ b/examples/box-selection.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Box selection example +title: Box Selection 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 diff --git a/examples/button-title.html b/examples/button-title.html index ef153bce4f..a39e331766 100644 --- a/examples/button-title.html +++ b/examples/button-title.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Custom tooltips example +title: Custom Tooltips shortdesc: This example shows how to customize the buttons tooltips with Bootstrap. docs: > This example shows how to customize the buttons tooltips with Bootstrap. diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html index c3684386f5..c2d05a81ce 100644 --- a/examples/canvas-tiles.html +++ b/examples/canvas-tiles.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Canvas tiles example +title: Canvas Tiles shortdesc: Renders tiles with coordinates for debugging. docs: > The black grid tiles are generated on the client with an HTML5 canvas. The diff --git a/examples/center.html b/examples/center.html index 3c0ad920df..ab335337d8 100644 --- a/examples/center.html +++ b/examples/center.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Advanced View Positioning example +title: Advanced View Positioning 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 diff --git a/examples/cluster.html b/examples/cluster.html index 69cc3a78de..c14e44f1db 100644 --- a/examples/cluster.html +++ b/examples/cluster.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Clustering example +title: Clustered Features shortdesc: Example of using ol.source.Cluster. docs: > This example shows how to do clustering on point features. diff --git a/examples/color-manipulation.html b/examples/color-manipulation.html index 393ebd30a7..01259ccf30 100644 --- a/examples/color-manipulation.html +++ b/examples/color-manipulation.html @@ -1,6 +1,6 @@ --- layout: strapless.html -title: Manipulating colors with a raster source +title: Color Manipulation shortdesc: Demonstrates color manipulation with a raster source. docs: > A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering. diff --git a/examples/custom-controls.html b/examples/custom-controls.html index 9b25f014fe..8d4e00350a 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Custom control example +title: Custom Controls shortdesc: Shows how to create custom controls. docs: > This example creates a "rotate to north" button. diff --git a/examples/custom-interactions.html b/examples/custom-interactions.html index 5113a4d54b..d73a85aaa8 100644 --- a/examples/custom-interactions.html +++ b/examples/custom-interactions.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Custom interaction example +title: Custom Interactions shortdesc: Example of a custom interaction. docs: > This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`. From 2e8f4806d236750a3529ef5d9a932dd4e3a13e36 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 16:05:11 -0700 Subject: [PATCH 10/32] Give the docs some breathing room --- examples/resources/layout.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/resources/layout.css b/examples/resources/layout.css index 3c6151a299..b9960c3a7b 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -31,6 +31,10 @@ body { margin-top: 0; } +#docs { + margin-top: 1em; +} + ul.inline, ol.inline { margin-left: 0; From 88ec3b9f6cc9170f4bcbb35eb79e875f9979feb7 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 14 Nov 2015 16:33:58 -0700 Subject: [PATCH 11/32] Convert F-G examples to strapless template --- examples/feature-animation.html | 10 ++--- examples/feature-move-animation.html | 24 ++++-------- examples/fractal.html | 22 +++++------ .../full-screen-drag-rotate-and-zoom.html | 10 ++--- examples/full-screen.html | 10 ++--- examples/geojson.html | 10 ++--- examples/geolocation.html | 37 +++++++++---------- examples/getfeatureinfo-image.html | 22 +++-------- examples/getfeatureinfo-image.js | 2 +- examples/getfeatureinfo-tile.html | 22 +++-------- examples/getfeatureinfo-tile.js | 2 +- examples/gpx.html | 16 ++------ examples/graticule.html | 10 ++--- 13 files changed, 67 insertions(+), 130 deletions(-) diff --git a/examples/feature-animation.html b/examples/feature-animation.html index 6b8092ec02..f9340b91ca 100644 --- a/examples/feature-animation.html +++ b/examples/feature-animation.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Feature animation example +layout: strapless.html +title: Custom Animation shortdesc: Demonstrates how to animate features. docs: > This example shows how to use postcompose and vectorContext to @@ -8,8 +8,4 @@ docs: > is added to the layer. tags: "animation, vector, feature, flash" --- -

-
-
-
-
+
diff --git a/examples/feature-move-animation.html b/examples/feature-move-animation.html index 2974ca7317..0f615df835 100644 --- a/examples/feature-move-animation.html +++ b/examples/feature-move-animation.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Animate a feature movement +layout: strapless.html +title: Marker Animation shortdesc: Demonstrates how to move a feature along a line. docs: > This example shows how to use postcompose and vectorContext to @@ -8,17 +8,9 @@ docs: > is being used. tags: "animation, feature, postcompose, polyline" --- -
-
-
-
-
-
-
- - -
-
+
+ + diff --git a/examples/fractal.html b/examples/fractal.html index 882563d452..dcfd96626b 100644 --- a/examples/fractal.html +++ b/examples/fractal.html @@ -1,18 +1,14 @@ --- -layout: example.html -title: Fractal Example +layout: strapless.html +title: Fractal Rendering shortdesc: Example of a fractal. docs: > - Example of a fractal. + This example demonstrates how features with many vertices can be efficiently rendered. tags: "fractal, vector" --- -
-
-
- -
-
+
+ diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html index 3eb2513d60..956f92cf2c 100644 --- a/examples/full-screen-drag-rotate-and-zoom.html +++ b/examples/full-screen-drag-rotate-and-zoom.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Full screen drag rotate and zoom example +layout: strapless.html +title: Full Screen Drag, Rotate, and Zoom 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.

@@ -9,8 +9,4 @@ tags: "full-screen, drag, rotate, zoom, bing, bing-maps" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
+
diff --git a/examples/full-screen.html b/examples/full-screen.html index d06294e476..546eeb35ff 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Full screen control example +layout: strapless.html +title: Full Screen Control 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.

@@ -9,8 +9,4 @@ tags: "full-screen, bing, bing-maps" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
+
diff --git a/examples/geojson.html b/examples/geojson.html index 7e1316b3e2..275b4f9537 100644 --- a/examples/geojson.html +++ b/examples/geojson.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: GeoJSON example +layout: strapless.html +title: GeoJSON shortdesc: Example of GeoJSON features. docs: > Example of GeoJSON features. tags: "geojson, vector, openstreetmap" --- -
-
-
-
-
+
diff --git a/examples/geolocation.html b/examples/geolocation.html index d8c86d69a4..221b668dc6 100644 --- a/examples/geolocation.html +++ b/examples/geolocation.html @@ -1,24 +1,21 @@ --- -layout: example.html -title: Geolocation example -shortdesc: Example of a geolocation map. +layout: strapless.html +title: Geolocation +shortdesc: Using geolocation to control a map view. docs: > - Example of a geolocation map. + This example uses the Geolocation API to control the view. tags: "geolocation, openstreetmap" --- -
-
-
-
- -
- -

position accuracy :

-

altitude :

-

altitude accuracy :

-

heading :

-

speed :

-
-
+
+ + +

+ position accuracy :    + altitude :    + altitude accuracy :    + heading :    + speed : +

diff --git a/examples/getfeatureinfo-image.html b/examples/getfeatureinfo-image.html index 004d5c2151..1fe2eda6d2 100644 --- a/examples/getfeatureinfo-image.html +++ b/examples/getfeatureinfo-image.html @@ -1,20 +1,10 @@ --- -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. +layout: strapless.html +title: WMS GetFeatureInfo (Image Layer) +shortdesc: Using an image WMS source with GetFeatureInfo requests docs: > -

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

+ This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. 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/getfeatureinfo-image.js b/examples/getfeatureinfo-image.js index 5f71f9acb5..f3e6ac3434 100644 --- a/examples/getfeatureinfo-image.js +++ b/examples/getfeatureinfo-image.js @@ -8,7 +8,7 @@ var wmsSource = new ol.source.ImageWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: {'LAYERS': 'ne:ne'}, serverType: 'geoserver', - crossOrigin: '' + crossOrigin: 'anonymous' }); var wmsLayer = new ol.layer.Image({ diff --git a/examples/getfeatureinfo-tile.html b/examples/getfeatureinfo-tile.html index 9dd47c9d6e..f293b2a935 100644 --- a/examples/getfeatureinfo-tile.html +++ b/examples/getfeatureinfo-tile.html @@ -1,20 +1,10 @@ --- -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. +layout: strapless.html +title: WMS GetFeatureInfo (Tile Layer) +shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source docs: > -

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

+ This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. 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/getfeatureinfo-tile.js b/examples/getfeatureinfo-tile.js index 7119136b40..1f6fcbf170 100644 --- a/examples/getfeatureinfo-tile.js +++ b/examples/getfeatureinfo-tile.js @@ -8,7 +8,7 @@ var wmsSource = new ol.source.TileWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: {'LAYERS': 'ne:ne'}, serverType: 'geoserver', - crossOrigin: '' + crossOrigin: 'anonymous' }); var wmsLayer = new ol.layer.Tile({ diff --git a/examples/gpx.html b/examples/gpx.html index 281ee986d3..f5f1518351 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: GPX example +layout: strapless.html +title: GPX Data shortdesc: Example of using the GPX source. docs: > Example of using the GPX source. @@ -8,13 +8,5 @@ tags: "GPX" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
-
-
-
-
-   -
-
-
-
+
+
 
diff --git a/examples/graticule.html b/examples/graticule.html index 5813bdfa32..d1b6dc0dbd 100644 --- a/examples/graticule.html +++ b/examples/graticule.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Graticule example +layout: strapless.html +title: Map Graticule 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" --- -
-
-
-
-
+
From 91a772a952a80cd090eea1998afe5a5f0b247445 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 15 Nov 2015 14:58:10 -0700 Subject: [PATCH 12/32] Convert H-I examples to strapless template --- examples/heatmap-earthquakes.html | 24 +++++++++--------------- examples/icon-sprite-webgl.html | 16 ++++------------ examples/icon.html | 14 +++++++------- examples/igc.html | 18 +++++------------- examples/image-filter.html | 10 +++------- examples/image-load-events.html | 12 +++++------- examples/image-vector-layer.html | 16 ++++------------ 7 files changed, 37 insertions(+), 73 deletions(-) diff --git a/examples/heatmap-earthquakes.html b/examples/heatmap-earthquakes.html index 6b76020226..a84e13ac6c 100644 --- a/examples/heatmap-earthquakes.html +++ b/examples/heatmap-earthquakes.html @@ -1,21 +1,15 @@ --- -layout: example.html -title: Earthquakes heatmap +layout: strapless.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/icon-sprite-webgl.html b/examples/icon-sprite-webgl.html index 83be6b4010..0487483b3f 100644 --- a/examples/icon-sprite-webgl.html +++ b/examples/icon-sprite-webgl.html @@ -1,18 +1,10 @@ --- -layout: example.html -title: Icon sprites with WebGL example +layout: strapless.html +title: Icon Sprites with WebGL 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/icon.html b/examples/icon.html index b8368ac304..2c7aaa7f30 100644 --- a/examples/icon.html +++ b/examples/icon.html @@ -1,13 +1,13 @@ --- -layout: example.html -title: Vector Icon Example +layout: strapless.html +title: Icon Symbolizer shortdesc: Example using an icon to symbolize a point. docs: > Example using an icon to symbolize a point. tags: "vector, style, icon, marker, popup" +resources: + - https://code.jquery.com/jquery-1.11.2.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js --- -
-
-
-
-
+
diff --git a/examples/igc.html b/examples/igc.html index 121c1246ee..6d4e5f8386 100644 --- a/examples/igc.html +++ b/examples/igc.html @@ -1,19 +1,11 @@ --- -layout: example.html -title: IGC example +layout: strapless.html +title: IGC Data 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/image-filter.html b/examples/image-filter.html index da4bddb9a2..7cd603d120 100644 --- a/examples/image-filter.html +++ b/examples/image-filter.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Image Filter Example +layout: strapless.html +title: Image Filters shortdesc: Apply a filter to imagery docs: >

Layer rendering can be manipulated in precompose and postcompose event listeners. @@ -10,11 +10,7 @@ tags: "filter, image manipulation" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -

-
-
-
-
+
visibility - - - - - -
  • Layer group -
    - - - -
    -
      -
    • Food insecurity layer -
      - - - -
      -
      • -
    • World borders layer -
      - - - -
      -
      • -
    -
    • - -
    +
    +
    +
    Click on layer nodes below to change their properties.
    +
      +
    • OpenAerial layer +
      + + + +
      +
      • +
    • Layer group +
      + + + +
      +
        +
      • Food insecurity layer +
        + + + +
        +
        • +
      • World borders layer +
        + + + +
        +
        • +
      +
      • +
    diff --git a/examples/layer-spy.html b/examples/layer-spy.html index 6d74ee822e..bf651e0a2c 100644 --- a/examples/layer-spy.html +++ b/examples/layer-spy.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Layer Spy Example +layout: strapless.html +title: Layer Spy shortdesc: View a portion of one layer over another docs: >

    Layer rendering can be manipulated in precompose and postcompose event listeners. @@ -12,8 +12,4 @@ tags: "spy, image manipulation" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -

    -
    -
    -
    -
    +
    diff --git a/examples/layer-spy.js b/examples/layer-spy.js index d1a55cd20e..6a06b804b6 100644 --- a/examples/layer-spy.js +++ b/examples/layer-spy.js @@ -14,9 +14,11 @@ var imagery = new ol.layer.Tile({ source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'}) }); +var container = document.getElementById('map'); + var map = new ol.Map({ layers: [roads, imagery], - target: 'map', + target: container, view: new ol.View({ center: ol.proj.fromLonLat([-109, 46.5]), zoom: 6 @@ -24,22 +26,27 @@ var map = new ol.Map({ }); var radius = 75; -$(document).keydown(function(evt) { +document.addEventListener('keydown', function(evt) { if (evt.which === 38) { radius = Math.min(radius + 5, 150); map.render(); + evt.preventDefault(); } else if (evt.which === 40) { radius = Math.max(radius - 5, 25); map.render(); + evt.preventDefault(); } }); // get the pixel position with every move var mousePosition = null; -$(map.getViewport()).on('mousemove', function(evt) { - mousePosition = map.getEventPixel(evt.originalEvent); + +container.addEventListener('mousemove', function(event) { + mousePosition = map.getEventPixel(event); map.render(); -}).on('mouseout', function() { +}); + +container.addEventListener('mouseout', function() { mousePosition = null; map.render(); }); diff --git a/examples/layer-swipe.html b/examples/layer-swipe.html index 5ef41e5217..ed92196577 100644 --- a/examples/layer-swipe.html +++ b/examples/layer-swipe.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Layer Swipe example +layout: strapless.html +title: Layer Swipe shortdesc: Example of a Layer swipe map. docs: > Example of a Layer swipe map. @@ -8,9 +8,5 @@ tags: "swipe, openstreetmap" cloak: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here --- -
    -
    -
    - -
    -
    +
    + diff --git a/examples/layer-z-index.html b/examples/layer-z-index.html index b9a61c4938..801514e85b 100644 --- a/examples/layer-z-index.html +++ b/examples/layer-z-index.html @@ -1,20 +1,14 @@ --- -layout: example.html -title: Z-index layer ordering example +layout: strapless.html +title: Layer Z-Index shortdesc: Example of ordering layers using Z-index. docs: > + There are are two managed layers (square and triangle) and one unmanaged layer (star).
    + The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top. tags: "layer, ordering, z-index" --- -
    -
    -
    -
    -
    -
    - There are are two managed layers (square and triangle) and one unmanaged layer (star).
    - The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top. -
    +