libs/js/jquery-geo-1.0a4/docs/examples/label.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>label examples</title>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
   7   <meta name="description" content="An example of drawing shapes with labels">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/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   </style>
  21 </head>
  22 <body>
  23   <div>
  24     <div id="map">
  25     </div>
  26     <div class="info">
  27       <div class="links">
  28         <a href="../" class="docLink">&lt; docs</a>
  29         <a href="http://jsfiddle.net/ryanttb/2TAzc/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>label</h1>
  32       <p class="not-mobile">This example builds on the drawing example by appending a label with shapes. Enter label text (HTML is ok), choose a tool below, and start labelling!</p>
  33       <input type="text" name="label" value="a label" autofocus />
  34       <div id="modes">
  35         <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
  36         <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
  37         <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
  38       </div>
  39     </div>
  40   </div>
  41   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  42   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  43   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  44   <script>
  45     $(function () {
  46       // create a map, setting mode to drawPoint initially
  47       var map = $("#map").geomap({
  48         center: [-71.0595678, 42.3604823],
  49         zoom: 8,
  50         mode: "drawPoint",
  51         shape: function (e, geo) {
  52           // the shape event triggers when a user draws a shape
  53           // the geo object is a simple GeoJSON object: Point, LineString or Polygon
  54           // we can append it directly to the map
  55
  56           // grab the text of the label input and send it as a label for this shape
  57           map.geomap("append", geo, $("input[name='label']").val());
  58         }
  59       });
  60
  61       // jQuery UI for pretty buttons
  62       $("#modes").buttonset();
  63
  64       $("#modes input").click(function () {
  65         // set the map's mode option based on value of the input clicked
  66         // this will change the map's mode to drawPoint, drawLineString or drawPolygon
  67         map.geomap("option", "mode", $(this).val());
  68       });
  69     });
  70   </script>
  71
  72   <script>
  73     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  74     (function (d, t) {
  75       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  76       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
  77       s.parentNode.insertBefore(g, s);
  78     } (document, 'script'));
  79   </script>
  80 </body>
  81 </html>