Gmaps Railscamp2008

  • 2,463 views
Uploaded on

Slide de ma session sur l'integration d'une google map dans une application Rails. Le code est disponible sur github: http://github.com/xilinus/gmaps_demo/

Slide de ma session sur l'integration d'une google map dans une application Rails. Le code est disponible sur github: http://github.com/xilinus/gmaps_demo/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,463
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
33
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intégration de GoogleMaps dans une Application Rails 2.0 Sébastien Gruhier Xilinus Railscamp - Paris - 17 mai 2008
  • 2. 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
  • 3. Plugin GeoKit http://geokit.rubyforge.org/ • Ajout de finder geolocalisé à ActiveRecord • MultiProvider (GoogleMap, YahooMaps...) • Calcul de distance • IP localisation via hostip.info • ...
  • 4. Application de demo • Application Rails 2.0 • Visualisation des utilisateurs sur une googlemap • Plugin restful_authenticated + geokit
  • 5. 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
  • 6. GeoKit Test ./script/console Loading development environment (Rails 2.0.2) include GeoKit::Geocoders >> include GeoKit::Geocoders => Object >> home = MultiGeocoder.geocode(quot;151 rue montmartre, parisquot;) => #<GeoKit::GeoLoc:0x27769b8 @country_code=quot;FRquot;, @lat=48.870519, @street_address=quot;151, Rue Montmartrequot;, @full_address=quot;151, Rue Montmartre, 75002 2ème Arrondissement Paris, Paris, Francequot;, @precision=quot;addressquot;, @zip=quot;75002quot;, @state=quot;Ile-de-Francequot;, @success=true, @provider=quot;googlequot;, @lng=2.342718, @city=quot;Parisquot;> Calcul “in memory” >> home = MultiGeocoder.geocode(quot;151 rue montmartre, parisquot;) >> rennes = MultiGeocoder.geocode(quot;rennes, francequot;) >> home.distance_to(rennes, :units => :kms) => 308.473068506021
  • 7. 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
  • 8. Initialisation • Supprimer public/index.html • Ajouter un layout simple <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.1//ENquot; quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html;charset=UTF-8quot; /> <title>Google Maps Demo</title> </head> <body> <%= yield %> </body> </html>
  • 9. Initialisation • Ajouter une vue users/index.html.erb User List <table border=quot;0quot; cellspacing=quot;5quot; cellpadding=quot;5quot;> <tr> <th>Login</th> <th>Email</th> <th>Created At</th> </tr> <%= render :partial => quot;userquot;, :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>
  • 10. 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 :)
  • 11. 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
  • 12. Géolocalisation • Mettre la jour les deux fixtures à Utilise console !! ./script/console Loading development environment (Rails 2.0.2) >> MultiGeocoder.geocode(quot;10 rue de la republique, paris, francequot;) => #<GeoKit::GeoLoc:0x1102bdc @country_code=quot;FRquot;, @lat=48.866816, • @street_address=quot;10, Avenue De La Républiquequot;, @full_address=quot;10, Avenue de la République, 75011 11ème Arrondissement Paris, Paris, Francequot;, @precision=quot;addressquot;, @zip=quot;75011quot;, @state=quot;Ile-de-Francequot;, @success=true, @provider=quot;googlequot;, @lng=2.366405, @city=quot;Parisquot;>
  • 13. 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)
  • 14. GoogleMap • Ajouter une route users/map map.resources :users, :collection => {:map => :get} • Une action, un layout fullscreen: map.html.erb
  • 15. GoogleMap layouts/map.html.erb <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot;> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html;charset=UTF-8quot; /> <title>Google Maps Demo</title> <%= javascript_include_tag :all %> <script src=quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= GeoKit::Geocoders::google %>quot; type=quot;text/javascriptquot;></script> <style type=quot;text/cssquot;> html, body { margin:0; height:100% } #map { min-height: 100%; background-color: #DDD; } * html #map { height: 100%; } </style> </head> <body> <%= yield %> </body> </html>
  • 16. GoogleMap views/users/map.html.erb Action def map @users = User.find :all render :layout => 'map' end Vue <div id=quot;mapquot;></div> <%= javascript_tag quot;new Application('map', '#{@users.to_json(:only => [:login, :lat, :lng])}');quot; %>
  • 17. GoogleMap application.js Application = new Class.create({ initialize: function(map, users) { this.element = $(map); this.users = users.evalJSON(); document.observe(quot;dom:loadedquot;, 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, quot;clickquot;, function() { marker.openInfoWindowHtml(user.login); }); this.map.addOverlay(marker); }.bind(this)) } } } });
  • 18. 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=quot;<%= dom_id(user) %>quot; class=quot;minimapquot;></div></td> <td><%= link_to 'edit', edit_user_path(user) %></td> </tr> <%= javascript_tag quot;new MiniMap('#{dom_id(user)}', '#{user.to_json(:only => [:login, :lat, :lng])}');quot; %>
  • 19. MultiMap Classe MiniMap MiniMap = new Class.create({ initialize: function(map, user) { this.element = $(map); this.user = user.evalJSON(); document.observe(quot;dom:loadedquot;, 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); } } });
  • 20. 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
  • 21. 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=quot;FRquot;, @lat=48.0833, • @street_address=nil, @precision=quot;unknownquot;, @zip=nil, @state=nil, @success=true, @provider=quot;hostipquot;, @lng=-1.68333, @city=quot;Rennesquot;>
  • 22. 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
  • 23. 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={})
  • 24. Done!! • Code disponible sur github git://github.com/xilinus/gmaps_demo.git