httemplate/search/tower-map.html

   1 <& /elements/header.html, '' &>
   2
   3 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=<% $apikey %>"></script>
   4
   5 <style>
   6 html { height: 100% }
   7 #map_canvas { margin: 0 auto; height: 100%;  }
   8 span.is_up { font-weight: bold; color: green }
   9 span.is_down { font-weight: bold; color: red }
  10 #search_location { width: 300px }
  11 </style>
  12
  13 <div id="map_canvas"></div>
  14 <input type="text" id="search_location" style="width: 180px">
  15
  16
  17 <script type="text/javascript">
  18
  19 var baseMarkerStyle = {
  20   clickable: true,
  21   icon: {
  22     path: google.maps.SymbolPath.CIRCLE,
  23     scale: 4,
  24     fillColor: 'black',
  25     fillOpacity: 1,
  26     strokeColor: 'black',
  27     strokeWeight: 1,
  28   },
  29 };
  30
  31 var baseCoverageStyle = {
  32   clickable: false,
  33   strokeWeight: 0.2,
  34 };
  35
  36 var coverageStyle = function(feature) {
  37   var s = $.extend(true, {}, baseCoverageStyle, feature.getProperty('style'));
  38   if ( feature.getProperty('low') ) {
  39     s.fillOpacity = 0.1;
  40   } else if ( feature.getProperty('high') ) {
  41     s.fillOpacity = 0.4;
  42   }
  43   return s;
  44 }
  45
  46 var markerStyle = function(feature) {
  47   return $.extend(true, {}, baseMarkerStyle, feature.getProperty('style'));
  48 }
  49
  50 var map;
  51 var infoWindow = new google.maps.InfoWindow; // shared among all users
  52
  53 var clickHandler = function(ev) {
  54   var feature = ev.feature;
  55   if ( feature.getGeometry().getType() == 'Point' ) {
  56     // then pop up an info box with the feature content
  57     infoWindow.close();
  58     infoWindow.setPosition(feature.getGeometry().get());
  59
  60     if ( feature.getProperty('content') ) {
  61       infoWindow.setContent(feature.getProperty('content'));
  62     } else {
  63       infoWindow.setContent('');
  64     }
  65
  66     if ( feature.getProperty('url') ) {
  67       $.ajax({
  68         url: feature.getProperty('url'),
  69         success: function(data) {
  70           infoWindow.setContent(data);
  71         }
  72       });
  73       infoWindow.open(map);
  74     } else {
  75       infoWindow.open(map);
  76     }
  77   }
  78 };
  79
  80 var zoomLayer = function(layer) {
  81   // takes a google.maps.Data object
  82   var bounds = new google.maps.LatLngBounds;
  83   layer.forEach(function(feature) {
  84     var g = feature.getGeometry();
  85     if (g.getType() == 'Point') {
  86       bounds.extend(g.get());
  87     } else if (g.getArray) {
  88       g.getArray().forEach(function(point) { bounds.extend(point); });
  89     }
  90   });
  91
  92   map.fitBounds(bounds);
  93 };
  94
  95 // set up the main layer
  96 var tower_data = new google.maps.Data;
  97 tower_data.addGeoJson(<% encode_json($tower_data) %>);
  98 tower_data.setStyle(markerStyle);
  99 tower_data.addListener('click', clickHandler);
 100
 101 var towernums = <% encode_json(\@towernums) %>;
 102 var tower_svc_data = {};
 103 var tower_coverage_data = {};
 104
 105 var revertLayerStyles = function() {
 106   // mostly, just to re-hide all connecting lines when something is hidden
 107   for (var t in tower_svc_data) {
 108     tower_svc_data[t].revertStyle();
 109   }
 110 };
 111
 112 towernums.forEach(function(towernum) {
 113   var layer = new google.maps.Data;
 114   tower_svc_data[towernum] = layer;
 115   layer.loadGeoJson(
 116     '<% $fsurl %>search/svc_broadband-json.cgi?towernum=' + towernum
 117   );
 118   layer.setStyle(markerStyle);
 119   layer.addListener('click', clickHandler);
 120   layer.addListener('click', function(ev) { // show connecting line
 121     var id = ev.feature.getId();
 122     var f_line = layer.getFeatureById(id + '/line');
 123     layer.overrideStyle(f_line, { visible: true});
 124   });
 125
 126   layer = new google.maps.Data;
 127   layer.loadGeoJson(
 128     '<% $fsurl %>misc/sector_coverage-json.cgi?towernum=' + towernum
 129   );
 130   layer.setStyle(coverageStyle);
 131   tower_coverage_data[towernum] = layer;
 132 });
 133
 134 function show_svc_data(towernum, show) {
 135   if (show) {
 136     tower_svc_data[towernum].setMap(window.map);
 137   } else {
 138     tower_svc_data[towernum].setMap(null);
 139   }
 140 };
 141
 142 function show_coverage_data(towernum, show) {
 143   if (show) {
 144     tower_coverage_data[towernum].setMap(window.map);
 145   } else {
 146     tower_coverage_data[towernum].setMap(null);
 147   }
 148 };
 149
 150 // toggle visibility of the services
 151 infoWindow.addListener('domready', function(ev) {
 152   var show_services_box = $('input[name=show_services]');
 153   var towernum = show_services_box.val();
 154   var is_shown = tower_svc_data[towernum].getMap() == map;
 155   show_services_box.prop('checked', is_shown);
 156   show_services_box.on('click', function(clickev) {
 157     show_svc_data(towernum, this.checked);
 158   });
 159
 160   var show_coverage_box = $('input[name=show_coverage]');
 161   var towernum = show_coverage_box.val();
 162   var is_shown = tower_coverage_data[towernum].getMap() == map;
 163   show_coverage_box.prop('checked', is_shown);
 164   show_coverage_box.on('click', function(clickev) {
 165     show_coverage_data(towernum, this.checked);
 166   });
 167 });
 168
 169 infoWindow.addListener('closeclick', revertLayerStyles);
 170 infoWindow.addListener('position_changed', revertLayerStyles);
 171
 172 var initMap = function() {
 173   var canvas = $('#map_canvas');
 174
 175   // set window height correctly
 176   canvas.css('height', window.innerHeight - (canvas.offset().top) - 30);
 177   canvas.css('width', window.innerWidth - 30);
 178
 179   map = new google.maps.Map(canvas[0], { zoom: 6 });
 180
 181   //set up search box
 182   var searchbox_input = $('#search_location')[0];
 183   var searchbox = new google.maps.places.SearchBox(searchbox_input);
 184   map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchbox_input);
 185
 186   map.addListener('bounds_changed', function() {
 187     searchbox.setBounds(map.getBounds());
 188   });
 189
 190   searchbox.addListener('places_changed', function() {
 191     var places = searchbox.getPlaces();
 192     // xxx fancy mode: find the nearest tower and estimate signal strength
 193     if (places[0]) {
 194       if (places[0].geometry.viewport) {
 195         map.fitBounds(places[0].geometry.viewport);
 196       } else {
 197         map.setCenter(places[0].geometry.location);
 198         map.setZoom(14);
 199       }
 200     }
 201   });
 202
 203   // put tower locations on map
 204   tower_data.setMap(map);
 205   zoomLayer(tower_data);
 206 };
 207
 208 $().ready(initMap);
 209
 210 </script>
 211
 212 <& /elements/footer.html &>
 213 <%init>
 214
 215 die "access denied" unless
 216   $FS::CurrentUser::CurrentUser->access_right('List services');
 217
 218 my $conf = new FS::Conf;
 219
 220 my $apikey = $conf->config('google_maps_api_key');
 221
 222 my @features; # geoJSON structure
 223
 224 my @towers = qsearch('tower', {
 225   'latitude'  => { op=>'!=', value=>''},
 226   'longitude' => { op=>'!=', value=>''},
 227 });
 228 my %sectors; # towernum => arrayref
 229 my @towernums;
 230
 231 foreach my $tower (@towers) {
 232   my $towernum = $tower->towernum;
 233   push @towernums, $towernum;
 234   my @coord = (
 235     $tower->longitude + 0,
 236     $tower->latitude + 0,
 237   );
 238   push @features,
 239   {
 240     type      => 'Feature',
 241     id        => 'tower/'.$towernum,
 242     geometry  => {
 243       type        => 'Point',
 244       coordinates => \@coord,
 245     },
 246     properties => {
 247       style     => {
 248         icon => {
 249           path        => undef,
 250           url         => $fsurl.'images/antenna-square-21x51.png',
 251           anchor      => { x => 10, y => 4 },
 252           strokeColor => ($tower->color || 'black'),
 253         },
 254       },
 255       content   => include('.tower', $tower),
 256     },
 257   };
 258
 259   $sectors{$towernum} = [ $tower->tower_sector ];
 260
 261 } # foreach $tower
 262
 263 my $tower_data = {
 264   type => 'FeatureCollection',
 265   features => \@features
 266 };
 267
 268 </%init>
 269 <%def .tower>
 270 % my $tower = shift;
 271 % my $can_edit = $FS::CurrentUser::CurrentUser->access_right('Configuration');
 272 <H3>
 273 % if ( $can_edit ) {
 274   <a target="_blank" href="<% $fsurl %>edit/tower.html?<% $tower->towernum %>">
 275 % }
 276 Tower #<% $tower->towernum %> | <% $tower->towername %>
 277 % if ( $can_edit ) {
 278   </a>
 279 % }
 280 </H3>
 281 % my $count_query = 'SELECT COUNT(*) FROM svc_broadband LEFT JOIN addr_status using (ip_addr) JOIN tower_sector USING (sectornum) WHERE tower_sector.towernum = '.$tower->towernum;
 282 % my $num_down = FS::Record->scalar_sql("$count_query AND addr_status.up IS NULL AND addr_status._date IS NOT NULL");
 283 % my $num_up = FS::Record->scalar_sql("$count_query AND addr_status.up IS NOT NULL");
 284 <input type="checkbox" name="show_services" value="<% $tower->towernum %>">
 285 <% emt('Show services') %>
 286 ( <% $num_up %> <SPAN CLASS="is_up"><% emt('UP') %></SPAN>
 287 <% $num_down %> <SPAN CLASS="is_down"><% emt('DOWN') %></SPAN> )
 288 <br>
 289 <input type="checkbox" name="show_coverage" value="<% $tower->towernum %>">
 290 <% emt('Show coverage') %>
 291 </%def>