unRob/explore.rb

## explore.rb
# encoding: utf-8

require 'sinatra'
require 'mongo'
require 'json'


$mongo = Mongo::MongoClient.new
$db = $mongo['wifi']

get '/' do
  erb :index
end


get '/access-points' do
  lat = params[:lat]
  lng = params[:lng]

  where = {
    geometry: {
      '$near' => {
        '$geometry' => {type: 'Point', coordinates: [lng, lat].map(&:to_f)},
        '$maxDistance' => 1000
      }
    }
  }

  response.headers['Content-type'] = 'application/json';
  {type: 'FeatureCollection', features: $db['puntos'].find(where).to_a}.to_json
end


__END__
@@ index
<!DOCTYPE html>
<html>
<head>
  <title>Wifises</title>

  <style>
  html {
    height: 100%;
  }
  #me {
    padding: 0;
    margin: 0;
    height: 100%;
  }

  #map {
    width: 100%;
    min-height: 400px;
    height: 100%;
  }
  </style>
</head>
<body id="me">

<div id="map"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
  document.addEventListener('DOMContentLoaded', function DOMReady(){

    var map = new google.maps.Map(document.querySelector('#map'), {
      zoom: 15,
      draggable: true,
      streetViewControl: false,
      center: {
        lat: 19.432479,
        lng: -99.133192
      }
    });

    window.map = map;

    var pos = map.getCenter();
    map.data.loadGeoJson('/access-points?lat='+pos.lat()+'&lng='+pos.lng());[]

    google.maps.event.addListener(map, 'center_changed', function center_changed(){
      var pos = map.getCenter();
      map.data.loadGeoJson('/access-points?lat='+pos.lat()+'&lng='+pos.lng());
    });

    var infowindow = new google.maps.InfoWindow({
      content: ''
    });

    map.data.addListener('click', function(evt) {
      data = evt.feature.k
      rows = []
      for (k in data) {
        rows.push('<tr><td>'+k+'</td><td>'+data[k]+'</td></tr>');
      }
      infowindow.setContent('<table>'+rows.join()+'</table>');
      var anchor = new google.maps.MVCObject();
      anchor.set("position",evt.latLng);
      infowindow.open(map, anchor);
    });

    map.data.addListener(map, 'dragstart', function(event) {
      console.log(evt.latLng);
    });

  });
</script>
</body>
</html>

## wifises.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              wifises.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## wifises.rb

      
    Raw
  

              wifises.rb
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	# encoding: utf-8

	require 'sinatra'
	require 'mongo'
	require 'json'


	$mongo = Mongo::MongoClient.new
	$db = $mongo['wifi']

	get '/' do
	erb :index
	end


	get '/access-points' do
	lat = params[:lat]
	lng = params[:lng]

	where = {
	geometry: {
	'$near' => {
	'$geometry' => {type: 'Point', coordinates: [lng, lat].map(&:to_f)},
	'$maxDistance' => 1000
	}
	}
	}

	response.headers['Content-type'] = 'application/json';
	{type: 'FeatureCollection', features: $db['puntos'].find(where).to_a}.to_json
	end


	__END__
	@@ index
	<!DOCTYPE html>
	<html>
	<head>
	<title>Wifises</title>

	<style>
	html {
	height: 100%;
	}
	#me {
	padding: 0;
	margin: 0;
	height: 100%;
	}

	#map {
	width: 100%;
	min-height: 400px;
	height: 100%;
	}
	</style>
	</head>
	<body id="me">

	<div id="map"></div>

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function DOMReady(){

	var map = new google.maps.Map(document.querySelector('#map'), {
	zoom: 15,
	draggable: true,
	streetViewControl: false,
	center: {
	lat: 19.432479,
	lng: -99.133192
	}
	});

	window.map = map;

	var pos = map.getCenter();
	map.data.loadGeoJson('/access-points?lat='+pos.lat()+'&lng='+pos.lng());[]

	google.maps.event.addListener(map, 'center_changed', function center_changed(){
	var pos = map.getCenter();
	map.data.loadGeoJson('/access-points?lat='+pos.lat()+'&lng='+pos.lng());
	});

	var infowindow = new google.maps.InfoWindow({
	content: ''
	});

	map.data.addListener('click', function(evt) {
	data = evt.feature.k
	rows = []
	for (k in data) {
	rows.push('<tr><td>'+k+'</td><td>'+data[k]+'</td></tr>');
	}
	infowindow.setContent('<table>'+rows.join()+'</table>');
	var anchor = new google.maps.MVCObject();
	anchor.set("position",evt.latLng);
	infowindow.open(map, anchor);
	});

	map.data.addListener(map, 'dragstart', function(event) {
	console.log(evt.latLng);
	});

	});
	</script>
	</body>
	</html>