httemplate/search/elements/gmap.html

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