diff --git a/examples/scale-line.html b/examples/scale-line.html index 3e84bb9ca5..e83fd1e49d 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -1,20 +1,16 @@ --- -layout: example.html -title: Scale line example +layout: strapless.html +title: Scale Line shortdesc: Example of a scale line. docs: > tags: "scale-line, openstreetmap" --- -
-
-
- -
-
+
+ diff --git a/examples/scale-line.js b/examples/scale-line.js index 6ad5b160e4..29ca3b947b 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -30,8 +30,9 @@ var map = new ol.Map({ }); -var unitsSelect = $('#units'); -unitsSelect.on('change', function() { - scaleLineControl.setUnits(this.value); -}); -unitsSelect.val(scaleLineControl.getUnits()); +var unitsSelect = document.getElementById('units'); +function onChange() { + scaleLineControl.setUnits(unitsSelect.value); +} +unitsSelect.addEventListener('change', onChange); +onChange(); diff --git a/examples/select-features.html b/examples/select-features.html index 84403581de..18f39ed2dd 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -1,26 +1,22 @@ --- -layout: example.html -title: Select features example +layout: strapless.html +title: Select Features shortdesc: Example of using the Select interaction. docs: > Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

-

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

-

In this example, a listener is registered for the Select interaction's select event in order to update the selection status below. -

- - -  0 selected features -
+

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

+

In this example, a listener is registered for the Select interaction's select event in order to update the selection status above. tags: "select, vector" --- -

-
-
-
-
+
+
+ + +  0 selected features +
diff --git a/examples/select-features.js b/examples/select-features.js index 1e4e5b1f71..7a05a6d8f2 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -71,9 +71,10 @@ var changeInteraction = function() { if (select !== null) { map.addInteraction(select); select.on('select', function(e) { - $('#status').html(' ' + e.target.getFeatures().getLength() + + document.getElementById('status').innerText = ' ' + + e.target.getFeatures().getLength() + ' selected features (last operation selected ' + e.selected.length + - ' and deselected ' + e.deselected.length + ' features)'); + ' and deselected ' + e.deselected.length + ' features)'; }); } }; diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html index dd7ff25acd..cf6c7e2cb4 100644 --- a/examples/semi-transparent-layer.html +++ b/examples/semi-transparent-layer.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Semi-transparent layer example +layout: strapless.html +title: Semi-Transparent Layer shortdesc: Example of a map with a semi-transparent layer. docs: > This example will display a tiled MaxBox layer semi-transparently over a MapQuest background. tags: "transparent, mapquest, tilejson" --- -
-
-
-
-
+
diff --git a/examples/semi-transparent-layer.js b/examples/semi-transparent-layer.js index 5d019a3f4b..9582046b24 100644 --- a/examples/semi-transparent-layer.js +++ b/examples/semi-transparent-layer.js @@ -22,6 +22,6 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([-77.93255, 37.9555]), - zoom: 5 + zoom: 7 }) }); diff --git a/examples/shaded-relief.html b/examples/shaded-relief.html index 2f6216992d..e2d347b43b 100644 --- a/examples/shaded-relief.html +++ b/examples/shaded-relief.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Shaded Relief shortdesc: Calculate shaded relief from elevation data docs: > @@ -25,22 +25,18 @@ docs: >

tags: "raster, shaded relief" --- -
-
-
- - - - - - - - - - - - - -
vertical exaggeration: x
sun elevation: °
sun azimuth: °
-
-
+
+ + + + + + + + + + + + + +
vertical exaggeration: x
sun elevation: °
sun azimuth: °
diff --git a/examples/shaded-relief.js b/examples/shaded-relief.js index 8cb308879a..a4751d9c2f 100644 --- a/examples/shaded-relief.js +++ b/examples/shaded-relief.js @@ -3,8 +3,8 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.layer.Image'); goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); goog.require('ol.source.Raster'); -goog.require('ol.source.TileJSON'); goog.require('ol.source.XYZ'); @@ -117,9 +117,7 @@ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ - source: new ol.source.TileJSON({ - url: 'http://api.tiles.mapbox.com/v3/tschaub.miapgppd.jsonp' - }) + source: new ol.source.OSM() }), new ol.layer.Image({ opacity: 0.3, diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 9a8eef20c5..01f288c616 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -1,25 +1,17 @@ --- -layout: example.html -title: Side-by-side example +layout: strapless.html +title: Shared Views shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. docs: > The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. tags: "side-by-side, canvas, webgl, dom, canvas, sync, object" --- -
-
-

Canvas

-
-
-
-

WebGL

-
- -
-
-

DOM

-
-
+

Canvas

+
+

WebGL

+
+ +

DOM

+
diff --git a/examples/snap.html b/examples/snap.html index 3235b159c3..4238e9ba96 100644 --- a/examples/snap.html +++ b/examples/snap.html @@ -1,38 +1,34 @@ --- -layout: example.html -title: Snap interaction example +layout: strapless.html +title: Snap Interaction shortdesc: Example of using the snap interaction together with draw and modify interactions. docs: > Example of using the snap interaction together with draw and modify interactions. The snap interaction must be added last, as it needs to be the first to handle the pointermove event.

-
-
- -
-
- -
-
- - -
-
tags: "draw, edit, modify, vector, snap" --- -
-
-
+
+
+
+
-
+
+ +
+
+ + +
+ diff --git a/examples/sphere-mollweide.html b/examples/sphere-mollweide.html index ebbb745555..153602971e 100644 --- a/examples/sphere-mollweide.html +++ b/examples/sphere-mollweide.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Sphere Mollweide example +layout: strapless.html +title: Sphere Mollweide shortdesc: Example of a Sphere Mollweide map with a Graticule component. docs: > Example of a Sphere Mollweide map with a Graticule component. @@ -8,8 +8,4 @@ tags: "graticule, Mollweide, projection, proj4js" resources: - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js --- -
-
-
-
-
+
diff --git a/examples/stamen.html b/examples/stamen.html index 716e0e9f5c..a26231127d 100644 --- a/examples/stamen.html +++ b/examples/stamen.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Stamen example +layout: strapless.html +title: Stamen Tiles shortdesc: Example of a Stamen tile source. docs: > Two layers are composed: the watercolor base layer with the terrain labels. tags: "stamen, watercolor, terrain-labels, two-layers" --- -
-
-
-
-
+
diff --git a/examples/static-image.html b/examples/static-image.html index 1a0cbfbf9f..33f545810b 100644 --- a/examples/static-image.html +++ b/examples/static-image.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Static image example +layout: strapless.html +title: Static Image shortdesc: Example of a static image layer. docs: >

@@ -11,8 +11,4 @@ docs: >

tags: "static image, xkcd" --- -
-
-
-
-
+
diff --git a/examples/symbol-atlas-webgl.html b/examples/symbol-atlas-webgl.html index 94e3a0387e..451b3f9210 100644 --- a/examples/symbol-atlas-webgl.html +++ b/examples/symbol-atlas-webgl.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Symbols with WebGL example +layout: strapless.html +title: Symbols with WebGL shortdesc: Using symbols in an atlas with WebGL. docs: >

When using symbol styles with WebGL, OpenLayers would render the symbol @@ -11,8 +11,4 @@ docs: > of a symbol style, will create atlases for the symbols.

tags: "webgl, symbol, atlas, vector, point" --- -
-
-
-
-
+
diff --git a/examples/synthetic-lines.html b/examples/synthetic-lines.html index 086f223f31..4392db5953 100644 --- a/examples/synthetic-lines.html +++ b/examples/synthetic-lines.html @@ -1,69 +1,66 @@ --- -layout: example.html -title: Synthetic lines example +layout: strapless.html +title: Synthetic Lines shortdesc: Synthetic lines example. docs: > -

Performance results:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Device/Browser200 lines500 lines1000 lines2000 lines5000 lines10000 lines20000 lines
Mac Book Air / Chrome 33 canary60 fps60 fps60 fps60 fps60 fps60 fps60 fps
Mac Book Air / FireFox 2560 fps60 fps60 fps60 fps60 fps22 fps6 fps
Mac Book Air / Safari 760 fps60 fps60 fps40 fps10 fpsN/AN/A
iPhone 4S / iOS 7 / Safari60 fps33 fps15 fps5 fpsN/AN/AN/A
+ tags: "vector" --- -
-
-
-
-
+
+

Performance results:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Device/Browser200 lines500 lines1000 lines2000 lines5000 lines10000 lines20000 lines
Mac Book Air / Chrome 33 canary60 fps60 fps60 fps60 fps60 fps60 fps60 fps
Mac Book Air / FireFox 2560 fps60 fps60 fps60 fps60 fps22 fps6 fps
Mac Book Air / Safari 760 fps60 fps60 fps40 fps10 fpsN/AN/A
iPhone 4S / iOS 7 / Safari60 fps33 fps15 fps5 fpsN/AN/AN/A
diff --git a/examples/synthetic-points.html b/examples/synthetic-points.html index 0ee058f7f6..974e6d73dd 100644 --- a/examples/synthetic-points.html +++ b/examples/synthetic-points.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Synthetic points example +layout: strapless.html +title: Synthetic Points shortdesc: Synthetic points example. docs: > tags: "vector" --- -
-
-
-
-
+
diff --git a/examples/teleport.html b/examples/teleport.html index c1c3a3904d..abd8898848 100644 --- a/examples/teleport.html +++ b/examples/teleport.html @@ -1,21 +1,11 @@ --- -layout: example.html -title: Teleport example +layout: strapless.html +title: Teleporting Maps shortdesc: Example of moving a map from one target to another. docs: > -

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

+

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

tags: "teleport, openstreetmap" --- -
-
-
-
-
-
-
-
-
-
- Teleport -
-
+
+
+ diff --git a/examples/tile-load-events.html b/examples/tile-load-events.html index 155a685ced..ead76f56ba 100644 --- a/examples/tile-load-events.html +++ b/examples/tile-load-events.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: Tile load events example +layout: strapless.html +title: Tile Load Events shortdesc: Example using tile load events. docs: > Image tile sources fire events related to tile loading. You can @@ -11,9 +11,7 @@ docs: > This example creates a "rotate to north" button. tags: "tile, events, loading" --- -
-
-
-
-
+
+
+
diff --git a/examples/tilejson.html b/examples/tilejson.html index e359bc7361..259e8b22d6 100644 --- a/examples/tilejson.html +++ b/examples/tilejson.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: TileJSON example +layout: strapless.html +title: TileJSON shortdesc: Example of a TileJSON layer. docs: > Example of a TileJSON layer. tags: "tilejson" --- -
-
-
-
-
+
diff --git a/examples/tileutfgrid.html b/examples/tileutfgrid.html index ddb943ba55..80b46eca42 100644 --- a/examples/tileutfgrid.html +++ b/examples/tileutfgrid.html @@ -1,18 +1,13 @@ --- -layout: example.html -title: TileUTFGrid example +layout: strapless.html +title: Tiled UTFGrid shortdesc: This example shows how to read data from a TileUTFGrid layer. docs: >

Point to a country to see its name and flag.

Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/). tags: "utfgrid, tileutfgrid, tilejson" --- -
-
-
-
-
- +
diff --git a/examples/tissot.html b/examples/tissot.html index 31fb8d1c80..a084195714 100644 --- a/examples/tissot.html +++ b/examples/tissot.html @@ -1,18 +1,12 @@ --- -layout: example.html -title: Tissot indicatrix example +layout: strapless.html +title: Tissot Indicatrix shortdesc: Draw Tissot's indicatrices on maps. docs: > Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857. tags: "tissot, circle" --- -
-
-

EPSG:4326

-
-
-
-

EPSG:3857

-
-
-
+

EPSG:4326

+
+

EPSG:3857

+
diff --git a/examples/topojson.html b/examples/topojson.html index 0f02055f6f..a714dcf840 100644 --- a/examples/topojson.html +++ b/examples/topojson.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: TopoJSON example +layout: strapless.html +title: TopoJSON shortdesc: Demonstrates rendering of features from a TopoJSON topology. docs: > This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki). tags: "topojson, vector, style" --- -
-
-
-
-
+
diff --git a/examples/translate-features.html b/examples/translate-features.html index 2bfab784d2..3e7ebc6ff6 100644 --- a/examples/translate-features.html +++ b/examples/translate-features.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Translate features example +layout: strapless.html +title: Translate Features shortdesc: Example of a translate features interaction. docs: > This example demonstrates how the translate and select interactions can be used together. Zoom in to an area of interest and click to select a feature. Then drag the feature around to move it elsewhere on the map. tags: "drag, translate, feature, vector, editing" --- -
-
-
-
-
+
diff --git a/examples/translate-features.js b/examples/translate-features.js index eaf62a0797..c097f0850e 100644 --- a/examples/translate-features.js +++ b/examples/translate-features.js @@ -2,8 +2,6 @@ goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.format.GeoJSON'); -goog.require('ol.geom.LineString'); -goog.require('ol.geom.Point'); goog.require('ol.interaction'); goog.require('ol.interaction.Select'); goog.require('ol.interaction.Translate'); @@ -24,17 +22,6 @@ var vector = new ol.layer.Vector({ }) }); -var pointFeature = new ol.Feature(new ol.geom.Point([0, 0])); - -var lineFeature = new ol.Feature( - new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]])); - -var vector2 = new ol.layer.Vector({ - source: new ol.source.Vector({ - features: [pointFeature, lineFeature] - }) -}); - var select = new ol.interaction.Select(); var translate = new ol.interaction.Translate({ @@ -43,7 +30,7 @@ var translate = new ol.interaction.Translate({ var map = new ol.Map({ interactions: ol.interaction.defaults().extend([select, translate]), - layers: [raster, vector, vector2], + layers: [raster, vector], target: 'map', view: new ol.View({ center: [0, 0], diff --git a/examples/turf.html b/examples/turf.html index fbff5c08b9..9e28e7c41e 100644 --- a/examples/turf.html +++ b/examples/turf.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: turf.js Example +layout: strapless.html +title: turf.js shortdesc: Example on how to use turf.js with OpenLayers 3. docs: > Example showing the integration of turf.js @@ -9,11 +9,5 @@ docs: > tags: "vector, turfjs, along, distance" resources: - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js - - --- -
-
-
-
-
+
diff --git a/examples/turf.js b/examples/turf.js index 78934e843c..5a61f42c8d 100644 --- a/examples/turf.js +++ b/examples/turf.js @@ -12,9 +12,11 @@ goog.require('ol.source.Vector'); var source = new ol.source.Vector(); -$.ajax('data/geojson/roads-seoul.geojson').then(function(response) { +fetch('data/geojson/roads-seoul.geojson').then(function(response) { + return response.json(); +}).then(function(json) { var format = new ol.format.GeoJSON(); - var features = format.readFeatures(response); + var features = format.readFeatures(json); var street = features[0]; // convert to a turf.js feature