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 foreach (@features) {
  41   $_->{type} = 'Feature';
  42   # any other per-feature massaging can go here
  43 }
  44 my $tree = {
  45   type => 'FeatureCollection',
  46   features => \@features
  47 };
  48
  49 my $apikey = FS::Conf->new->config('google_maps_api_key');
  50 </%init>
  51
  52 <div id="map_canvas"></div>
  53
  54 <style type="text/css">
  55 html { height: 100% }
  56
  57 body { height: 100%; margin: 0px; padding: 0px }
  58
  59 #map_canvas { height: 100%; }
  60 </style>
  61
  62 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3<% $apikey ? "&key=$apikey" : '' %>">
  63 </script>
  64
  65 <script type="text/javascript">
  66
  67 var data_geojson = <% encode_json($tree) %>;
  68 var data_overlays = <% encode_json(\@overlays) %>;
  69
  70 var baseStyle = {
  71   clickable: true,
  72   icon: {
  73     path: google.maps.SymbolPath.CIRCLE,
  74     scale: 4,
  75     fillColor: 'green',
  76     fillOpacity: 1,
  77     strokeColor: 'black',
  78     strokeWeight: 1,
  79   },
  80 };
  81
  82 var featureStyle = function(feature) {
  83   // jQuery.extend(): merge properties of objects
  84   // 'true' makes it a deep copy; start the merge with {} so that
  85   // baseStyle doesn't get overwritten
  86   return $.extend(true, {}, baseStyle, feature.getProperty('style'));
  87 };
  88
  89 var map;
  90 var overlays = [];
  91 function initMap() {
  92   var canvas = $('#map_canvas');
  93   map = new google.maps.Map(canvas[0], { zoom: 6 });
  94   try {
  95     map.data.addGeoJson(data_geojson);
  96   } catch(ex) {
  97     console.log(ex.toString);
  98     debugger;
  99   }
 100
 101   // construct bounds around all of the features
 102   var bounds = new google.maps.LatLngBounds;
 103   map.data.forEach(function(feature) {
 104     var b = feature.getProperty('bounds');
 105     if (b) { // if it specifies an ROI, include all of it
 106       bounds.union(b);
 107     } else {
 108       var g = feature.getGeometry();
 109       if (g.getType() == 'Point') {
 110         bounds.extend(g.get());
 111       } else if (g.getArray) {
 112         g.getArray().forEach(function(point) { bounds.extend(point); });
 113       }
 114     }
 115   });
 116
 117   map.fitBounds(bounds);
 118   map.data.setStyle(featureStyle);
 119
 120   var info = new google.maps.InfoWindow;
 121   map.data.addListener('click', function(ev) {
 122     var feature = ev.feature;
 123     if ( feature.getGeometry().getType() == 'Point' ) {
 124       // then pop up an info box with the feature content
 125       info.close();
 126       info.setPosition(feature.getGeometry().get());
 127       info.setContent(feature.getProperty('content'));
 128       info.open(map);
 129     }
 130
 131     // snap to feature ROI if it has one
 132     if ( feature.getProperty('bounds') ) {
 133       map.fitBounds( feature.getProperty('bounds') );
 134     }
 135
 136   }); // addListener()
 137
 138   data_overlays.forEach(function(x) {
 139     var url = x.url;
 140     delete x.url;
 141     var overlay = new google.maps.GroundOverlay( url, x );
 142     overlay.setMap(map);
 143     overlay.setOpacity(0.4);
 144     overlays.push(overlay);
 145   });
 146 }
 147
 148 $().ready( initMap );
 149 </script>
 150