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

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