libs/js/jquery-geo-1.0b2/docs/examples/insetmap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>inset map example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of inset map">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20
  21     #insetmap
  22     {
  23       border: solid 2px #444;
  24       position: fixed;
  25       right: 8px;
  26       bottom: 8px;
  27       width: 20%;
  28       height: 20%;
  29     }
  30   </style>
  31 </head>
  32 <body>
  33   <div>
  34     <div id="map">
  35       <div id="insetmap">
  36       </div>
  37     </div>
  38
  39     <div class="info">
  40       <div class="links">
  41         <a href="../" class="docLink">&lt; docs</a>
  42         <a href="http://jsfiddle.net/ryanttb/aH7kG/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  43       </div>
  44       <h1>inset map</h1>
  45     </div>
  46   </div>
  47   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  48   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
  49   <script src="../jquery.geo-test.min.js"></script>
  50   <script>
  51     $( function ( ) {
  52       // create a map
  53       var map = $( "#map" ).geomap( {
  54         center: [ -71.0595678, 42.3604823 ],
  55         zoom: 9,
  56         bboxchange: function( e, geo ) {
  57           // whenever the bbox changes, update the inset map's shape
  58           insetmap.geomap( "empty" );
  59           insetmap.geomap( "append", bboxToPolygon( geo.bbox ) );
  60         }
  61       } );
  62
  63       // create a smaller map
  64       // stop interaction (static mode) and add the default service but
  65       // without an attr property, it's on the main map
  66       var insetmap = $( "#insetmap" ).geomap( {
  67         center: [ -71.0595678, 42.3604823 ],
  68         zoom: 6,
  69         mode: "static",
  70         services: [ {
  71           type: "tiled",
  72           src: "http://tile.openstreetmap.org/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"
  73         } ]
  74       } );
  75
  76       // append a shape to the inset map to show the big map's bbox
  77       insetmap.geomap( "append", bboxToPolygon( map.geomap( "option", "bbox" ) ) );
  78
  79       function bboxToPolygon( bbox ) {
  80         // a quick function to convert a bbox into a true GeoJSON Polygon
  81         return {
  82           type: "Polygon",
  83           coordinates: [ [
  84             [ bbox[ 0 ], bbox[ 1 ] ],
  85             [ bbox[ 0 ], bbox[ 3 ] ],
  86             [ bbox[ 2 ], bbox[ 3 ] ],
  87             [ bbox[ 2 ], bbox[ 1 ] ],
  88             [ bbox[ 0 ], bbox[ 1 ] ]
  89           ] ]
  90         }
  91       }
  92     } );
  93   </script>
  94
  95   <script>
  96     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  97     (function (d, t) {
  98       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  99       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 100       s.parentNode.insertBefore(g, s);
 101     } (document, 'script'));
 102   </script>
 103 </body>
 104 </html>