Rails on the road

Abbiamo ultimamente avuto la necessità di utilizzare le Google Maps in una nostra applicazione, così ci siamo dedicati a cercare qualche plugin che potesse aiutarci a velocizzare lo sviluppo e cercando abbiamo trovato:

• Ym4r_gm
• Cartographer

che sono i due plugin più gettonati.

Ho provato inizialmente Cartographer ma sinceramente mi ha dato l’impressione che lo sviluppo fosse un po’ fermo, inoltre la documentazione è scarsa ed è necessario fare alcune piccole modifiche al plugin per renderlo funzionante; per questo ho deciso di utilizzare Y4mr_gm, che invece, per ora, è in continuo sviluppo.

Questo tutorial è molto semplice ed introduce l’utilizzo delle Mappe di Google. Colgo l’occasione per ringraziare Guilhem Vellut che segue il progetto ym4r.

Creare una applicazione Rails

    1 rails cityfinder

Adesso dovete installare il plugin ym4r_gm nell’applicazione cityfinder, per questo posizionatevi nella root del vostro progetto e:

    1 ruby script/plugin install svn://rubyforge.org/var/svn/ym4r/Plugins/GM/trunk/ym4r_gm

Adesso nella directory /vendor/plugins c’è ym4r_gm ed i file:

• cluster.js
• geoRssOverlay
• markerGroup.js
• wms-gs.js
• ym4r-gm.js

sono stati copiati in public/javascripts mentre il file gmaps_api_key.yml è stato copiato nella cartella config; in questo file c’è la definizione dell’api key necessaria per l’utilizzo delle Google Maps. Per ottenere una nuova Api Key andate su: http://www.google.com/apis/maps/signup.html.

Procediamo ora a realizzare il controllore che ospiterà le funzioni necessarie al funzionamento dell’applicazione:

    1 ruby script/generate controller 'site'

e questo sarà il contenuto del SiteController:

    1 class SiteController < ApplicationController
    2   layout 'site' 
    3 
    4   def index
    5     @addresses = []
    6     @map = GMap.new("map_div")
    7     @map.control_init(:large_map => true,:map_type => true)
    8     @map.center_zoom_init([38.134557,-95.537109],4)
    9   end 
   10 
   11   def find 
   12     @addresses = []
   13     @addresses = lookup_geocodes(params[:address])
   14     @map = Variable.new("map")
   15     @addresses.each do |marker|
   16       @latitude = marker[:latitude]
   17       @longitude = marker[:longitude]
   18       @marker = GMarker.new([marker[:latitude],marker[:longitude]], :title => "Aggiornamento", :info_window => "Aggiornato con Rjs")
   19     end
   20   end
   21 
   22   def lookup_geocodes(address = nil)
   23     places = [
   24       {:address => address, :description=>'search'}]
   25       places.collect do |place|
   26         geocode = get_geocode place[:address]
   27         place[:latitude]=geocode[:latitude]
   28         place[:longitude]=geocode[:longitude]    
   29       end
   30       return places
   31     end
   32 
   33 
   34     private
   35 
   36     def get_geocode(address)
   37       #uso il geocoding per trovare latitudine e longitudine di address
   38       geocode = Geocoding.get(address)
   39       return {:success=> true, :latitude=> geocode[0][:latitude], 
   40         :longitude=> geocode[0][:longitude]}
   41       end
   42     end

Due piccole spiegazioni a riguardo, allora innanzi tutto nella funzione index inizializzo la mappa e la centro su San Francisco (circa) e chiaro che la funzione index ha bisogno di una vista che sarà:

    1 <div id="main" style="clear:both">
    2   <%= form_remote_tag(:url => {:action => :find}) %>
    3   <div id="form" >
    4     <label for="address">Indirizzo:</label>
    5     <%= text_field_tag "address" %>
    6     <%= submit_tag "Find" %>
    7   </div>
    8   <%= end_form_tag %>
    9   <%= @map.div(:width => '500', :height=>'400') %>
   10 </div>

@map.div è un helper che renderizza il div che contiene la mappa. Ricordatevi di specificare sempre altezza e larghezza altrimenti non viene visualizzata la mappa.

la funzione find chiamata in Ajax consente di ricercare una città e puntare la mappa sul nuovo punto trovato.

Questa è la parte più interessante esiste infatti un servizio gratuito che consente, fornita una città, di recuperare latitudine e longitudine le coordinate spaziali necessarie per la localizzazione sulla mappa. Il plugin ym4r fornisce una funzione che sfrutta il servizio di google e la funzione è get_geocode place[:address] grazie a questa passando l’indirizzo è possibile recuperarne le coordinate.

Il passso successivo è quello di creare un Rjs find.rjs per consentire l’aggiornamento della Mappa una volta recuperato l’indirizzo

    1 page << @map.clear_overlays
    2 page << @map.add_overlay(@marker)
    3 page << "map.setCenter(new GLatLng(#{@latitude}, #{@longitude}), 4);"

Se controllate bene il codice places = [{:address => address, :description=>'search'}] consentirebbe di inserire un array di indirizzi, ma nel nostro caso ne passiamo solo uno quello cercato… è una bozza di codice per fare altro, quindi fate le modifiche necessarie per ottimizzarlo sulle vostre esigenze.

Dimenticavo perchè tutto possa funzionare dovete aggiungere gli helper necessari nell’head del layout dell’applicazione che io ho chiamato site.rhtml:

    1 <html>
    2 <head>
    3   <title>City Finder</title>
    4   <%= stylesheet_link_tag 'master' %>
    5   <%= javascript_include_tag :defaults %>
    6   <%= GMap.header(:with_vml => false) %>
    7   <%= @map.to_html %>
    8 </head>
    9 <body>
   10   <%= yield %>
   11 </body>
   12 </html>

Eccovi il master.css per avere la mappa tutta verde!!!

    1 body {background-color: #499e22;font-family:Arial;font-size: 20px;margin: 25px}
    2 #main {margin: 0;margin-bottom:10px;background-color:#94df3b;border: 2px solid #333;padding: 25px}
    3 #form {border: none;text-align: center;padding-bottom:25px}
    4 #map_div{margin: 0px auto;border: 2px solid #333;width:500px;height:400px;}
    5 .hide{display:none;}

e questo il risultato:

UPDATE

Ho visto che se nel file gmaps_api_key.yml lasciate il nome del sito con i “:” seguito dalla chiave come è nel file di esempio che il plugin vi installa nella cartella config potrebbe non partirvi l’applicazione e darvi un problema su GMap.header. Provando e riprovando non venivo a capo del perchè desse quell’errore poi… eliminando il nome del sito seguito dai “:” e lasciando solo la chiave, come in development e in test ho risolto!