httemplate/search/elements/gmap.html

   1 <%args>
   2 @features
   3 </%args>
   4 <%doc>
   5 Generic Google Maps front end.
   6
   7 <& /elements/gmap.html,
   8   features => [
   9     { id => 'svc_acct/12',
  10       geometry => {
  11         type        => 'Point',
  12         coordinates => [ -86, 40 ], # optionally altitude as the third coord
  13       },
  14       properties => {
  15         # see https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data.StyleOptions
  16         style => {
  17           icon => {
  18             scale => 4,
  19             fillColor => 'orange',
  20           }
  21         },
  22         # content of popup info box (might AJAX this later)
  23         content => '<a href="view/svc_acct.cgi?12">username@example.com</a>',
  24       }
  25     }, # end of feature
  26   ],
  27 &>
  28
  29 </%doc>
  30 <%init>
  31 foreach (@features) {
  32   $_->{type} = 'Feature';
  33   # any other per-feature massaging can go here
  34 }
  35 my $tree = {
  36   type => 'FeatureCollection',
  37   features => \@features
  38 };
  39
  40 </%init>
  41 <div id="map_canvas"></div>
  42
  43 <style type="text/css">
  44 html { height: 100% }
  45
  46 body { height: 100%; margin: 0px; padding: 0px }
  47
  48 #map_canvas { height: 100%; }
  49 </style>
  50
  51 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
  52 </script>
  53
  54 <script type="text/javascript">
  55
  56 var data_geojson = <% encode_json($tree) %>;
  57
  58 var baseStyle = {
  59   clickable: true,
  60   icon: {
  61     path: google.maps.SymbolPath.CIRCLE,
  62     scale: 4,
  63     fillColor: 'green',
  64     fillOpacity: 1,
  65     strokeColor: 'black',
  66     strokeWeight: 1,
  67   },
  68 };
  69
  70 var featureStyle = function(feature) {
  71   // jQuery.extend(): merge properties of objects
  72   // 'true' makes it a deep copy; start the merge with {} so that
  73   // baseStyle doesn't get overwritten
  74   return $.extend(true, {}, baseStyle, feature.getProperty('style'));
  75 };
  76
  77 var map;
  78 function initMap() {
  79   var canvas = $('#map_canvas');
  80   map = new google.maps.Map(canvas[0], { zoom: 6 });
  81   try {
  82     map.data.addGeoJson(data_geojson);
  83   } catch(ex) {
  84     console.log(ex.toString);
  85     debugger;
  86   }
  87
  88   // construct bounds around all of the features
  89   var bounds = new google.maps.LatLngBounds;
  90   map.data.forEach(function(feature) {
  91     var g = feature.getGeometry();
  92     if (g.getType() == 'Point') {
  93       bounds.extend(g.get());
  94     } else if (g.getArray) {
  95       g.getArray().forEach(function(point) { bounds.extend(point); });
  96     }
  97   });
  98
  99   map.fitBounds(bounds);
 100   map.data.setStyle(featureStyle);
 101
 102   var info = new google.maps.InfoWindow;
 103   map.data.addListener('click', function(ev) {
 104     var feature = ev.feature;
 105     if ( feature.getGeometry().getType() == 'Point' ) {
 106       // then pop up an info box with the feature content
 107       info.close();
 108       info.setPosition(feature.getGeometry().get());
 109       info.setContent(feature.getProperty('content'));
 110       info.open(map);
 111     }
 112
 113     // snap to feature ROI if it has one
 114     if ( feature.getProperty('bounds') ) {
 115       map.fitBounds( feature.getProperty('bounds') );
 116     }
 117
 118   }); // addListener()
 119 }
 120
 121 $().ready( initMap );
 122 </script>
 123