diff --git a/config/examples/example.html b/config/examples/example.html index 457efb51d5..dd568a12b7 100644 --- a/config/examples/example.html +++ b/config/examples/example.html @@ -1,8 +1,8 @@ - - + + - - + + @@ -11,6 +11,7 @@ {{{ extraHead.local }}} {{{ css.tag }}} + {{ title }} @@ -24,14 +25,17 @@
- {{{ contents }}} -

{{ title }}

+ {{{ contents }}} +
+
+ +
+

{{ shortdesc }}

{{ md docs }}
-
{{ tags }}
@@ -41,47 +45,33 @@ Copy Edit
-
+ - + 
<!DOCTYPE html>
 <html>
-<head>
-<title>{{ title }}</title>
-<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-<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>
-<div class="container-fluid">
-
-{{ contents }}
-</div>
-<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>
- - {{{ js.tag }}} - diff --git a/config/examples/readme.md b/config/examples/readme.md index e3bf64c9db..8159182b08 100644 --- a/config/examples/readme.md +++ b/config/examples/readme.md @@ -16,6 +16,4 @@ To enable this, examples have the following, not needed in application code: * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these - * in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish - At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application. diff --git a/examples/accessible.html b/examples/accessible.html index f60fe49cb3..fdf02233f8 100644 --- a/examples/accessible.html +++ b/examples/accessible.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Accessibility example +title: Accessible 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. @@ -10,11 +10,7 @@ docs: > tags: "accessibility, tabindex" --- -
-
- -
- - -
-
+ +
+ + diff --git a/examples/animation.html b/examples/animation.html index 210922a23b..e0de6e10a9 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -1,27 +1,19 @@ --- layout: example.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 or more animations. tags: "animation" --- -
-
-
-
-
-
-
- - - - - - - - - -
-
+
+ + + + + + + + + diff --git a/examples/arcgis-tiled.html b/examples/arcgis-tiled.html index 0d7eb78f39..72ec115b97 100644 --- a/examples/arcgis-tiled.html +++ b/examples/arcgis-tiled.html @@ -1,6 +1,6 @@ --- layout: example.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. @@ -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..0721e74edc 100644 --- a/examples/attributions.html +++ b/examples/attributions.html @@ -1,6 +1,6 @@ --- layout: example.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. @@ -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..e724a07a1b 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -1,6 +1,6 @@ --- layout: example.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.

@@ -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..5a4009bf53 100644 --- a/examples/blend-modes.html +++ b/examples/blend-modes.html @@ -1,6 +1,6 @@ --- layout: example.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 @@ -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..28e8d121c3 100644 --- a/examples/box-selection.html +++ b/examples/box-selection.html @@ -1,20 +1,12 @@ --- layout: example.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 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..065929fc5e 100644 --- a/examples/button-title.html +++ b/examples/button-title.html @@ -1,13 +1,13 @@ --- layout: example.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. 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..dcf081a2f1 100644 --- a/examples/canvas-tiles.html +++ b/examples/canvas-tiles.html @@ -1,17 +1,13 @@ --- layout: example.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 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..34d6b8c4e3 100644 --- a/examples/center.html +++ b/examples/center.html @@ -1,6 +1,6 @@ --- layout: example.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 @@ -10,25 +10,19 @@ docs: > is used to fit a geometry in the view with the same padding. The view's centerOn method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box). -

Use Alt+Shift+drag to rotate the map.

+

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..005d124f8a 100644 --- a/examples/cluster.html +++ b/examples/cluster.html @@ -1,13 +1,9 @@ --- layout: example.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. tags: "cluster, vector" --- -
-
-
-
-
+
diff --git a/examples/color-manipulation.html b/examples/color-manipulation.html index 6495ab8c38..d857128525 100644 --- a/examples/color-manipulation.html +++ b/examples/color-manipulation.html @@ -1,30 +1,26 @@ --- layout: example.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. 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..8d4e00350a 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -1,13 +1,9 @@ --- 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. 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..d73a85aaa8 100644 --- a/examples/custom-interactions.html +++ b/examples/custom-interactions.html @@ -1,14 +1,10 @@ --- 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`. 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 = {}; diff --git a/examples/d3.html b/examples/d3.html index 5266a8fd64..fb0d6a2123 100644 --- a/examples/d3.html +++ b/examples/d3.html @@ -1,6 +1,6 @@ --- layout: example.html -title: d3 integration example +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..159591ee42 100644 --- a/examples/device-orientation.html +++ b/examples/device-orientation.html @@ -1,23 +1,19 @@ --- layout: example.html -title: Device-Orientation example +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..4f0d3ecca3 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. +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..505927ef82 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. +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..8d9ce51c45 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 +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..c2da444e95 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 +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..038a644a5a 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Draw features example +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..d2cc882e60 100644 --- a/examples/dynamic-data.html +++ b/examples/dynamic-data.html @@ -1,13 +1,9 @@ --- layout: example.html -title: Dynamic data example +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..667b829683 100644 --- a/examples/earthquake-clusters.html +++ b/examples/earthquake-clusters.html @@ -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..311751c059 100644 --- a/examples/epsg-4326.html +++ b/examples/epsg-4326.html @@ -1,13 +1,9 @@ --- layout: example.html -title: EPSG:4326 example +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..aea92bb3f7 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -1,18 +1,14 @@ --- layout: example.html -title: Export map example +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 diff --git a/examples/feature-animation.html b/examples/feature-animation.html index 6b8092ec02..be37779a7c 100644 --- a/examples/feature-animation.html +++ b/examples/feature-animation.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Feature animation example +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..460193d01b 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 +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/flight-animation.html b/examples/flight-animation.html index 072abaa7ca..b0c54dc875 100644 --- a/examples/flight-animation.html +++ b/examples/flight-animation.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Flight animation example +title: Flight Animation shortdesc: Demonstrates how to animate flights with ´postcompose´. docs: > This example shows how to use postcompose and vectorContext to @@ -14,8 +14,4 @@ tags: "animation, vector, feature, flights, arc" resources: - https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js --- -
-
-
-
-
+
diff --git a/examples/flight-animation.js b/examples/flight-animation.js index b2a2714c50..6a47e9e43b 100644 --- a/examples/flight-animation.js +++ b/examples/flight-animation.js @@ -1,10 +1,8 @@ // NOCOMPILE -// this example uses arc.js for which we don't have an externs file. goog.require('ol.Attribution'); goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.View'); -goog.require('ol.control'); goog.require('ol.geom.LineString'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); @@ -22,12 +20,6 @@ var map = new ol.Map({ }) }) ], - controls: ol.control.defaults({ - attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ - collapsible: false - }) - }), - renderer: 'canvas', target: 'map', view: new ol.View({ center: [0, 0], @@ -89,8 +81,10 @@ var flightsSource = new ol.source.Vector({ })], loader: function(extent, resolution, projection) { var url = 'data/openflights/flights.json'; - $.ajax({url: url, dataType: 'json', success: function(response) { - var flightsData = response.flights; + fetch(url).then(function(response) { + return response.json(); + }).then(function(json) { + var flightsData = json.flights; for (var i = 0; i < flightsData.length; i++) { var flight = flightsData[i]; var from = flight[0]; @@ -116,7 +110,7 @@ var flightsSource = new ol.source.Vector({ } } map.on('postcompose', animateFlights); - }}); + }); } }); diff --git a/examples/fractal.html b/examples/fractal.html index 882563d452..f0e09ea369 100644 --- a/examples/fractal.html +++ b/examples/fractal.html @@ -1,18 +1,14 @@ --- layout: example.html -title: Fractal Example +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..10e0f1d0b5 100644 --- a/examples/full-screen-drag-rotate-and-zoom.html +++ b/examples/full-screen-drag-rotate-and-zoom.html @@ -1,16 +1,12 @@ --- layout: example.html -title: Full screen drag rotate and zoom example +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.

+

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

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

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..395096fec5 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Full screen control example +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..0ea3b32508 100644 --- a/examples/geojson.html +++ b/examples/geojson.html @@ -1,13 +1,9 @@ --- layout: example.html -title: GeoJSON example +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..54b89425d4 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. +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..55bd672071 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. +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..fb41153e60 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. +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..52dd6f87d0 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -1,6 +1,6 @@ --- layout: example.html -title: GPX example +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..82e8c08eb3 100644 --- a/examples/graticule.html +++ b/examples/graticule.html @@ -1,13 +1,9 @@ --- layout: example.html -title: Graticule example +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" --- -
-
-
-
-
+
diff --git a/examples/heatmap-earthquakes.html b/examples/heatmap-earthquakes.html index 6b76020226..d670888d12 100644 --- a/examples/heatmap-earthquakes.html +++ b/examples/heatmap-earthquakes.html @@ -1,21 +1,15 @@ --- layout: example.html -title: Earthquakes heatmap +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..006c763611 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 +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..3714ab58df 100644 --- a/examples/icon.html +++ b/examples/icon.html @@ -1,13 +1,13 @@ --- layout: example.html -title: Vector Icon Example +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..59e6c084de 100644 --- a/examples/igc.html +++ b/examples/igc.html @@ -1,19 +1,11 @@ --- layout: example.html -title: IGC example +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..d007a5824e 100644 --- a/examples/image-filter.html +++ b/examples/image-filter.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Image Filter Example +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.
    +
    diff --git a/examples/layer-spy.html b/examples/layer-spy.html index 6d74ee822e..37900b1bf7 100644 --- a/examples/layer-spy.html +++ b/examples/layer-spy.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Layer Spy Example +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..4cb5ba8fb8 100644 --- a/examples/layer-swipe.html +++ b/examples/layer-swipe.html @@ -1,6 +1,6 @@ --- layout: example.html -title: Layer Swipe example +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..3ba0936442 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 +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. -
    +