diff --git a/examples/layer-clipping-webgl.html b/examples/layer-clipping-webgl.html index e1efb09b0b..4ca23024fb 100644 --- a/examples/layer-clipping-webgl.html +++ b/examples/layer-clipping-webgl.html @@ -1,16 +1,12 @@ --- -layout: example.html -title: Layer WebGL clipping example +layout: strapless.html +title: Layer Clipping with WebGL shortdesc: Layer WebGL clipping example. docs: > This example shows how to use the precompose and postcompose rendering hooks to clip layers using WebGL. tags: "clipping, webgl, openstreetmap" --- -
-
-
-
-
+
diff --git a/examples/layer-clipping.css b/examples/layer-clipping.css new file mode 100644 index 0000000000..3d35756e41 --- /dev/null +++ b/examples/layer-clipping.css @@ -0,0 +1,3 @@ +#map { + background: transparent; +} diff --git a/examples/layer-clipping.html b/examples/layer-clipping.html index ca7f1af343..4c43a8aefe 100644 --- a/examples/layer-clipping.html +++ b/examples/layer-clipping.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: Layer clipping example +layout: strapless.html +title: Layer Clipping shortdesc: Layer clipping example docs: > Layer clipping example tags: "clipping, openstreetmap" --- -
-
-
-
-
+
diff --git a/examples/layer-extent.html b/examples/layer-extent.html index 020474b8bc..d8873f1725 100644 --- a/examples/layer-extent.html +++ b/examples/layer-extent.html @@ -1,5 +1,5 @@ --- -layout: example.html +layout: strapless.html title: Limited Layer Extent shortdesc: Restricting layer rendering to a limited extent. docs: > @@ -8,15 +8,9 @@ docs: > to limit rendering based on an extent. tags: "extent, tilejson" --- -
-
-
-
-
-
- - - - - -
+
+ + + + + diff --git a/examples/layer-group.html b/examples/layer-group.html index 8beddb6789..f668237b5d 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -1,56 +1,54 @@ --- -layout: example.html -title: Layer group example +layout: strapless.html +title: Layer Groups shortdesc: Example of a map with layer group. docs: > Example of a map with layer group. tags: "tilejson, input, bind, group, layergroup" +resources: + - https://code.jquery.com/jquery-1.11.2.min.js --- -
-
-
-
-
-
Click on layer nodes below to change their properties.
- -
+
+
+
Click on layer nodes below to change their properties.
+
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. -
+