ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Templetize examples starting with letters x-z

Browse Source
This commit is contained in:
Andreas Hocevar
2015-04-02 14:51:55 +02:00
parent d0d61e68c7
commit b698f1ede8
8 changed files with 160 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
examples_src/xyz-esri-4326-512.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>XYZ Esri EPSG:4326 tileSize 512 example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">XYZ Esri EPSG:4326 tileSize 512 example</h4>
<p id="shortdesc">Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.</p>
<div id="docs">
<p>See the <a href="xyz-esri-4326-512.js" target="_blank">xyz-esri-4326-512.js source</a> for details on how this is done.</p>
</div>
<div id="tags">xyz, esri, tilesize, custom projection</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=xyz-esri-4326-512" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/xyz-esri.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>XYZ Esri example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">XYZ Esri example</h4>
<p id="shortdesc">Example of a XYZ source using Esri tiles.</p>
<div id="docs">
<p>See the <a href="xyz-esri.js" target="_blank">xyz-esri.js source</a> for details on how this is done.</p>
</div>
<div id="tags">xyz, esri</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=xyz-esri" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

65
examples_src/xyz-retina.html
View File

@@ -1,52 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>XYZ Retina tiles example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">XYZ with Retina tiles example</h4>
<p id="shortdesc">Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.</p>
<div id="docs">
<p>The ol.source.XYZ must contain <code>tilePixelRatio</code> parameter. The tiles were prepared from a GeoTIFF file with <a href="http://www.maptiler.com/">MapTiler</a>.</p>
<p>See the <a href="xyz-retina.js" target="_blank">xyz-retina.js source</a> for details on how this is done.</p>
</div>
<div id="tags">retina, hidpi, xyz, maptiler, @2x, devicePixelRatio</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=xyz-retina" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/xyz.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>XYZ example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">XYZ example</h4>
<p id="shortdesc">Example of a XYZ source.</p>
<div id="docs">
<p>See the <a href="xyz.js" target="_blank">xyz.js source</a> for details on how this is done.</p>
</div>
<div id="tags">xyz</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=xyz" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

65
examples_src/zoom-constrained.html
View File

@@ -1,52 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Zoom Constrained Example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Zoom constrained example</h4>
<p id="shortdesc">Example of a zoom constrained view.</p>
<div id="docs">
<p>This map has a view that is constrained between zoom levels 9 and 13. This is done using the <code>minZoom</code> and <code>maxZoom</code> view options.</p>
<p>See the <a href="zoom-constrained.js" target="_blank">zoom-constrained.js source</a> for details.</p>
</div>
<div id="tags">bing, zoom, minZoom, maxZoom</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=zoom-constrained" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/zoomify.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Zoomify example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Zoomify example</h4>
<p id="shortdesc">Example of a Zoomify source.</p>
<div id="docs">
<p>See the <a href="zoomify.js" target="_blank">zoomify.js source</a> to see how this is done.</p>
</div>
<div id="tags">zoomify</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=zoomify" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

60
examples_src/zoomslider.css Normal file
View File

@@ -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);
}

148
examples_src/zoomslider.html
View File

@@ -1,126 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style type="text/css">
/**
* 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);
}
</style>
<title>Zoom slider example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4>Default style</h4>
<div id="map1" class="map"></div>
</div>
<div class="span4">
<h4>Placed between zoom controls</h4>
<div id="map2" class="map"></div>
</div>
<div class="span4">
<h4>Horizontal and completely re-styled</h4>
<div id="map3" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">ZoomSlider control</h4>
<p id="shortdesc">Example of various ZoomSlider controls.</p>
<div id="docs">
<p>
See the <a href="zoomslider.js" target="_blank">zoomslider.js
source</a> to see how this is done.
</p>
</div>
<div id="tags">
zoom, zoomslider, slider, style, styling, css, control
</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=zoomslider" type="text/javascript"></script>
</body>
</html>
---
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"
---
<div class="row-fluid">
<div class="span4">
<h4>Default style</h4>
<div id="map1" class="map"></div>
</div>
<div class="span4">
<h4>Placed between zoom controls</h4>
<div id="map2" class="map"></div>
</div>
<div class="span4">
<h4>Horizontal and completely re-styled</h4>
<div id="map3" class="map"></div>
</div>
</div>