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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>geomap remove test</title>
   5   <link rel="stylesheet" type="text/css" href="css/style.css" />
   6   <style type="text/css">
   7     .geomap
   8     {
   9       display: inline-block;
  10       position: relative;
  11       width: 640px;
  12       height: 480px;
  13     }
  14
  15     #point-list
  16     {
  17       display: inline-block;
  18       list-style-type: none;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23   <a href="../" class="docLink">&lt; docs</a>
  24   <h1>geomap remove test</h1>
  25   <p>Click on the buttons to the right to call geomap.remove on points one at a time.</p>
  26   <div class="geomap">
  27   </div>
  28   <ul id="point-list"></ul>
  29   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  31   <script>
  32     $(function () {
  33       var geomap = $(".geomap").geomap({
  34         center: [-71.05, 42.35],
  35         zoom: 13
  36       });
  37
  38       var points = {
  39         one: { type: "Point", coordinates: [-71.05, 42.35] },
  40         two: { type: "Point", coordinates: [-71.045, 42.355] },
  41         three: { type: "Point", coordinates: [-71.055, 42.345] },
  42         four: { type: "Point", coordinates: [-71.055, 42.355] },
  43         five: { type: "Point", coordinates: [-71.045, 42.345] }
  44       };
  45
  46       var buttons = "";
  47
  48       for (var pointKey in points) {
  49         geomap.geomap("append", points[pointKey]);
  50         buttons += '<li><button type="button" data-point-key="' + pointKey + '">' + points[pointKey].coordinates + '</button></li>';
  51       }
  52       $("#point-list").append(buttons);
  53
  54       $("#point-list button").click(function () {
  55         var pointKey = $(this).data("pointKey");
  56         $(".geomap").geomap("remove", points[pointKey]);
  57         $(this).remove();
  58       });
  59     });
  60   </script>
  61 </body>
  62 </html>