diff --git a/examples_src/xyz-esri-4326-512.html b/examples_src/xyz-esri-4326-512.html index 584d04608e..cea1e526cf 100644 --- a/examples_src/xyz-esri-4326-512.html +++ b/examples_src/xyz-esri-4326-512.html @@ -1,51 +1,13 @@ - - - - - - - - - - - XYZ Esri EPSG:4326 tileSize 512 example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

XYZ Esri EPSG:4326 tileSize 512 example

-

Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.

-
-

See the xyz-esri-4326-512.js source for details on how this is done.

-
-
xyz, esri, tilesize, custom projection
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "XYZ Esri EPSG:4326 tileSize 512 example" +shortdesc: "Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles." +docs: > + ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile grid and tile url function are required. +tags: "xyz, esri, tilesize, custom projection" +--- +
+
+
+
+
diff --git a/examples_src/xyz-esri.html b/examples_src/xyz-esri.html index 31f21a082a..e290eeaba2 100644 --- a/examples_src/xyz-esri.html +++ b/examples_src/xyz-esri.html @@ -1,51 +1,13 @@ - - - - - - - - - - - XYZ Esri example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

XYZ Esri example

-

Example of a XYZ source using Esri tiles.

-
-

See the xyz-esri.js source for details on how this is done.

-
-
xyz, esri
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "XYZ Esri example" +shortdesc: "Example of a XYZ source using Esri tiles." +docs: > + ArcGIS REST tile services are supported by `ol.source.XYZ`. +tags: "xyz, esri, arcgis rest" +--- +
+
+
+
+
diff --git a/examples_src/xyz-retina.html b/examples_src/xyz-retina.html index acc25a45b8..0743c5a733 100644 --- a/examples_src/xyz-retina.html +++ b/examples_src/xyz-retina.html @@ -1,52 +1,13 @@ - - - - - - - - - - - XYZ Retina tiles example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

XYZ with Retina tiles example

-

Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.

-
-

The ol.source.XYZ must contain tilePixelRatio parameter. The tiles were prepared from a GeoTIFF file with MapTiler.

-

See the xyz-retina.js source for details on how this is done.

-
-
retina, hidpi, xyz, maptiler, @2x, devicePixelRatio
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "XYZ Retina tiles example" +shortdesc: "Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ." +docs: > + The ol.source.XYZ must contain `tilePixelRatio` parameter. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/). +tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio" +--- +
+
+
+
+
diff --git a/examples_src/xyz.html b/examples_src/xyz.html index ed08aeec4c..3c0a0b2a8c 100644 --- a/examples_src/xyz.html +++ b/examples_src/xyz.html @@ -1,51 +1,13 @@ - - - - - - - - - - - XYZ example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

XYZ example

-

Example of a XYZ source.

-
-

See the xyz.js source for details on how this is done.

-
-
xyz
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "XYZ Example" +shortdesc: "Example of a XYZ source." +docs: > + The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates. +tags: "xyz" +--- +
+
+
+
+
diff --git a/examples_src/zoom-constrained.html b/examples_src/zoom-constrained.html index e1ccbab1e3..4978953530 100644 --- a/examples_src/zoom-constrained.html +++ b/examples_src/zoom-constrained.html @@ -1,52 +1,13 @@ - - - - - - - - - - - Zoom Constrained Example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Zoom constrained example

-

Example of a zoom constrained view.

-
-

This map has a view that is constrained between zoom levels 9 and 13. This is done using the minZoom and maxZoom view options.

-

See the zoom-constrained.js source for details.

-
-
bing, zoom, minZoom, maxZoom
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Zoom Constrained Example" +shortdesc: "Example of a zoom constrained view." +docs: > + This map has a view that is constrained between zoom levels 9 and 13. This is done using the `minZoom` and `maxZoom` view options. +tags: "bing, zoom, minZoom, maxZoom" +--- +
+
+
+
+
diff --git a/examples_src/zoomify.html b/examples_src/zoomify.html index f6be63b091..b8b77fad86 100644 --- a/examples_src/zoomify.html +++ b/examples_src/zoomify.html @@ -1,51 +1,13 @@ - - - - - - - - - - - Zoomify example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-
-
-
- -
- -
-

Zoomify example

-

Example of a Zoomify source.

-
-

See the zoomify.js source to see how this is done.

-
-
zoomify
-
- -
- -
- - - - - - - +--- +template: "example.html" +title: "Zoomify example" +shortdesc: "Example of a Zoomify source." +docs: > + Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. +tags: "zoomify, deep zoom, pixel, projection" +--- +
+
+
+
+
diff --git a/examples_src/zoomslider.css b/examples_src/zoomslider.css new file mode 100644 index 0000000000..91eaa3c2b5 --- /dev/null +++ b/examples_src/zoomslider.css @@ -0,0 +1,60 @@ +/** + * The zoomslider in the second map shall be placed between the zoom-in and + * zoom-out buttons. + */ +#map2 .ol-zoom .ol-zoom-out { + margin-top: 204px; +} +#map2 .ol-zoomslider { + background-color: transparent; + top: 2.3em; +} + +#map2 .ol-touch .ol-zoom .ol-zoom-out { + margin-top: 212px; +} +#map2 .ol-touch .ol-zoomslider { + top: 2.75em; +} + +#map2 .ol-zoom-in.ol-has-tooltip:hover [role=tooltip], +#map2 .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] { + top: 3px; +} + +#map2 .ol-zoom-out.ol-has-tooltip:hover [role=tooltip], +#map2 .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] { + top: 232px; +} + +/** + * The zoomslider in the third map shall be horizontal, placed in the top-right + * corner, smaller and orange. + */ +#map3 .ol-zoomslider { + top: 8px; + left: auto; + right: 8px; + background-color: rgba(255,69,0,0.2); + width: 200px; + height: 15px; + padding: 0; + box-shadow: 0 0 5px rgb(255,69,0); + border-radius: 20px; +} + +#map3 .ol-zoomslider:hover { + background-color: rgba(255,69,0,0.3); +} + +#map3 .ol-zoomslider-thumb { + height: 15px; + width: 15px; + margin: 0; + filter: none; + background-color: rgba(255,69,0,0.6); + border-radius: 20px; +} +#map3 a.ol-zoomslider-handle:hover { + background-color: rgba(255,69,0,0.7); +} diff --git a/examples_src/zoomslider.html b/examples_src/zoomslider.html index f5da737e26..24b0c4f0a7 100644 --- a/examples_src/zoomslider.html +++ b/examples_src/zoomslider.html @@ -1,126 +1,22 @@ - - - - - - - - - - - - Zoom slider example - - - -
-
-
- OpenLayers 3 Examples -
-
-
- -
- -
-
-

Default style

-
-
-
-

Placed between zoom controls

-
-
-
-

Horizontal and completely re-styled

-
-
-
- -
- -
-

ZoomSlider control

-

Example of various ZoomSlider controls.

-
-

- See the zoomslider.js - source to see how this is done. -

-
-
- zoom, zoomslider, slider, style, styling, css, control -
-
-
-
- - - - - - - - +--- +template: "example.html" +title: "Zoom slider example" +shortdesc: "Example of various ZoomSlider controls." +docs: > + This example shows how to add a zoom slider to a map and how to customize it. +tags: "zoom, zoomslider, slider, style, styling, css, control" +--- +
+
+

Default style

+
+
+
+

Placed between zoom controls

+
+
+
+

Horizontal and completely re-styled

+
+
+