Gmaps Railscamp2008

Intégration de GoogleMaps dans une Application Rails 2.0 Sébastien Gruhier Xilinus Railscamp - Paris - 17 mai 2008

GoogleMaps http://code.google.com/apis/maps/ • Affichage géolocalisé d’information (point, forme vectorielle, trafic ...) • Librairie Javascript • Gratuit sous certaines conditions • Nécessite une API key

Plugin GeoKit http://geokit.rubyforge.org/ • Ajout de finder geolocalisé à ActiveRecord • MultiProvider (GoogleMap, YahooMaps...) • Calcul de distance • IP localisation via hostip.info • ...

Application de demo • Application Rails 2.0 • Visualisation des utilisateurs sur une googlemap • Plugin restful_authenticated + geokit

Initialisation • Assez parlé, codons un exemple rails gmaps_demo -d mysql; cd gmaps_demo • plugin geokit ./script/plugin install svn://rubyforge.org/var/svn/geokit/trunk git module add git://github.com/ptb/geokit.git vendor/plugins/geokit • plugin restful_authentication ./script/plugin install http://svn.techno-weenie.net/projects/plugins/ restful_authentication git submodule add git://github.com/technoweenie/restful-authentication.git vendor/plugins/restful_authentication • GIT: git submodule init

GeoKit Test ./script/console Loading development environment (Rails 2.0.2) include GeoKit::Geocoders >> include GeoKit::Geocoders => Object >> home = MultiGeocoder.geocode(\"151 rue montmartre, paris\") => #<GeoKit::GeoLoc:0x27769b8 @country_code=\"FR\", @lat=48.870519, @street_address=\"151, Rue Montmartre\", @full_address=\"151, Rue Montmartre, 75002 2ème Arrondissement Paris, Paris, France\", @precision=\"address\", @zip=\"75002\", @state=\"Ile-de-France\", @success=true, @provider=\"google\", @lng=2.342718, @city=\"Paris\"> Calcul “in memory” >> home = MultiGeocoder.geocode(\"151 rue montmartre, paris\") >> rennes = MultiGeocoder.geocode(\"rennes, france\") >> home.distance_to(rennes, :units => :kms) => 308.473068506021

Initialisation • Editer database.yml si nécessaire rake db:create • Génération de l’authentification (sans activation ni stateful) ./script/generate authenticated user sessions rake db:migrate rake db:fixtures:load

Initialisation • Supprimer public/index.html • Ajouter un layout simple <?xml version=\"1.0\" encoding=\"UTF-8\"?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"> <head> <meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\" /> <title>Google Maps Demo</title> </head> <body> <%= yield %> </body> </html>

Initialisation • Ajouter une vue users/index.html.erb User List <table border=\"0\" cellspacing=\"5\" cellpadding=\"5\"> <tr> <th>Login</th> <th>Email</th> <th>Created At</th> </tr> <%= render :partial => \"user\", :collection => @users %> </table> <br/> <%= link_to 'Add a new user', new_user_path %> • Avec un partial users/_user.html.erb <tr> <td><%= user.login %></td> <td><%= user.email %></td> <td><%= user.created_at.to_s :short %></td> </tr>

Initialisation fin! • On ajoute une route par défaut map.root :controller => 'users' • Déplacer le code de environment.rb dans config/initializers/geokit.rb avec une clé google valide • Et on peut enfin s’amuser avec GoogleMaps :)

Géolocalisation • Ajouter des attributs au model User ./script/generate migration add_geolocalisation_to_users class AddGeolocalisationToUsers < ActiveRecord::Migration def self.up add_column :users, :address, :string add_column :users, :lat, :decimal, :precision => 15, :scale => 10 add_column :users, :lng, :decimal, :precision => 15, :scale => 10 end def self.down remove_column :users, :address remove_column :users, :lat • remove_column :users, :lng end end

Géolocalisation • Mettre la jour les deux fixtures à Utilise console !! ./script/console Loading development environment (Rails 2.0.2) >> MultiGeocoder.geocode(\"10 rue de la republique, paris, france\") => #<GeoKit::GeoLoc:0x1102bdc @country_code=\"FR\", @lat=48.866816, • @street_address=\"10, Avenue De La République\", @full_address=\"10, Avenue de la République, 75011 11ème Arrondissement Paris, Paris, France\", @precision=\"address\", @zip=\"75011\", @state=\"Ile-de-France\", @success=true, @provider=\"google\", @lng=2.366405, @city=\"Paris\">

Géolocalisation • Ajouter au modèle User attr_accessible ..., :address acts_as_mappable :auto_geocode => true before_validation_on_update :auto_geocode_address • Ajouter edit/update + adresse à un user (dans la vue)

GoogleMap • Ajouter une route users/map map.resources :users, :collection => {:map => :get} • Une action, un layout fullscreen: map.html.erb

GoogleMap layouts/map.html.erb <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"> <head> <meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\" /> <title>Google Maps Demo</title> <%= javascript_include_tag :all %> <script src=\"http://maps.google.com/maps?file=api&v=2&key=<%= GeoKit::Geocoders::google %>\" type=\"text/javascript\"></script> <style type=\"text/css\"> html, body { margin:0; height:100% } #map { min-height: 100%; background-color: #DDD; } * html #map { height: 100%; } </style> </head> <body> <%= yield %> </body> </html>

GoogleMap views/users/map.html.erb Action def map @users = User.find :all render :layout => 'map' end Vue <div id=\"map\"></div> <%= javascript_tag \"new Application('map', '#{@users.to_json(:only => [:login, :lat, :lng])}');\" %>

GoogleMap application.js Application = new Class.create({ initialize: function(map, users) { this.element = $(map); this.users = users.evalJSON(); document.observe(\"dom:loaded\", this.init.bind(this)); }, init: function() { if (GBrowserIsCompatible()) { // Create a google map this.map = new GMap2(this.element); // Center on France this.map.setCenter(new GLatLng(46.227638, 2.213749), 6); // Add controls this.map.addControl(new GLargeMapControl()); this.map.addControl(new GMapTypeControl()); // Add Markers if (this.users) { this.users.each(function(user) { var marker = new GMarker(new GLatLng(user.lat, user.lng)); GEvent.addListener(marker, \"click\", function() { marker.openInfoWindowHtml(user.login); }); this.map.addOverlay(marker); }.bind(this)) } } } });

MultiMap Pour le fun, ajouter un map par user sur la page index :) <tr> <td><%= user.login %></td> <td><%= user.email %></td> <td><%= user.lat %></td> <td><%= user.lng %></td> <td><%= user.created_at.to_s :short %></td> <td><div id=\"<%= dom_id(user) %>\" class=\"minimap\"></div></td> <td><%= link_to 'edit', edit_user_path(user) %></td> </tr> <%= javascript_tag \"new MiniMap('#{dom_id(user)}', '#{user.to_json(:only => [:login, :lat, :lng])}');\" %>

MultiMap Classe MiniMap MiniMap = new Class.create({ initialize: function(map, user) { this.element = $(map); this.user = user.evalJSON(); document.observe(\"dom:loaded\", this.init.bind(this)); }, init: function() { if (GBrowserIsCompatible()) { // Create a google map this.map = new GMap2(this.element); // Center on France this.map.setCenter(new GLatLng(this.user.lat, this.user.lng), 6); var marker = new GMarker(new GLatLng(this.user.lat, this.user.lng)); this.map.addOverlay(marker); } } });

GeoKit Autres fonctions • sort_by_distance_from >> u = User.find :first >> users.User.find :all >> users.sort_by_distance_from u • Column distance >> User.find :all, :origin => u, :within => 500, :order => 'distance' • GeoKit::Bounds >> bounds = GeoKit::Bounds.new(sw_point, ne_point) >> users = User.find :all, :bounds => bounds

GeoKit Autres fonctions • eager loading >> users = Users.find :all, :origin => home, :include => [:articles], • :within :order => => 5, 'distance' • IP Geocoding >> location = GeoKit::Geocoders::IpGeocoder.geocode('82.236.140.196') => #<GeoKit::GeoLoc:0x2784fe0 @country_code=\"FR\", @lat=48.0833, • @street_address=nil, @precision=\"unknown\", @zip=nil, @state=nil, @success=true, @provider=\"hostip\", @lng=-1.68333, @city=\"Rennes\">

GeoKit Autres fonctions • IP Geocoding class ApplicationController < ActionController::Base # Auto-geocode the user's ip address and store # it in the session. geocode_ip_address def loc # @location is a GeoLoc instance. @location = session[:geo_location] end end

GeoKit Autres fonctions • Et encore! # Finds within a distance radius. def find_within(distance, options={}) alias find_inside find_within # Finds beyond a distance radius. def find_beyond(distance, options={}) alias find_outside find_beyond # Finds according to a range. Accepts inclusive or exclusive ranges. def find_by_range(range, options={}) # Finds the closest to the origin. def find_closest(options={}) alias find_nearest find_closest # Finds the farthest from the origin. def find_farthest(options={}) # Finds within rectangular bounds (sw,ne). def find_within_bounds(bounds, options={})

Done!! • Code disponible sur github git://github.com/xilinus/gmaps_demo.git

Gmaps Railscamp2008

0 comments

Notes on slide 1

4 Favorites