UNPKG

openlayers-test

Version:

Build tools and sources for developing OpenLayers based mapping applications

69 lines (59 loc) 2.61 kB
<!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>Limited Layer Extent</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">Limited layer extent</h4> <p id="shortdesc">Restricting layer rendering to a limited extent.</p> <div id="docs"> <p> This example uses the <code>layer.setExtent()</code> method to modify the extent of the overlay layer. Use the controls below to limit rendering based on an extent. </p> <p> <div class="btn-group"> <button type="button" class="btn btn-default" id="northwest">northwest</button> <button type="button" class="btn btn-default" id="northeast">northeast</button> <button type="button" class="btn btn-default" id="southeast">southeast</button> <button type="button" class="btn btn-default" id="southwest">southwest</button> <button type="button" class="btn btn-default" id="world">world</button> </div> </p> <p> See the <a href="layer-extent.js" target="_blank">layer-extent.js source</a> for details on how this is done. </p> </div> <div id="tags">extent, tilejson</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=layer-extent" type="text/javascript"></script> </body> </html>