e633f7f8c1
This reverts4d619d71b1(see #1527), going back to what we had aftere13075f6ff(see #881). To avoid the 404 in the hosted examples, the css is copied to the same relative path when hosted as during development.
117 lines
3.1 KiB
HTML
117 lines
3.1 KiB
HTML
<!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 a.ol-zoom-out {
|
|
margin-top: 202px;
|
|
}
|
|
#map2 .ol-zoomslider {
|
|
background-color: transparent;
|
|
top: 34px;
|
|
left: 9px;
|
|
width: 24px;
|
|
}
|
|
#map2 .ol-zoomslider-thumb {
|
|
border-radius: 2px;
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
|
|
/**
|
|
* 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>ol3 ZoomSlider demo</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="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>
|