Author: Gao Ang
Tutorial Requirements
This
tutorial requires the following technology:
- NetBeans 6.0 Ruby IDE or 6.1 Beta
- Ruby on Rails: 2.0.2
- Ruby: 1.8.6
- Database: MySQL
- Rails Gems: GeoKit, Cartographer
Objective of our application
Our Google maps Rails mashup demo will
accomplish the following tasks:
- A table will be created in the database that contents the
location description information, such as address, longitude and latitude of the
location, description.
- There will be a Google Maps with control bar in our browser, as
well as a form of us to submit new location.
- Users could input specific address location and description,
when these information submit by users, location will be translate to the
longitude and latitude and store in the backend database.
- After user adds a new location, the new point will show up in
the map.
- If user clicks the new marker, a popup tips will show up with
the submitted information.
Okay, let get started to realize these
kinds of functions.
Obtaining a Google Maps API Key
The Google Maps API lets us embed Google Maps in our own web
pages. First of all, we should have a API key to make use of the Google Maps
API. Go to the following address to sign up for the Google Maps API Key http://www.google.com/apis/maps/signup.html.
Agree with the terms and conditions of Google Maps usage. Make sure to input the
site URL and click "Generate API Key" to obtain the Google Maps API key for our
site. Then we should copy the API key generated by Google Maps and we will use
it in our configuration file later.
Creating the Ruby on Rails Project
Choose File > New Project in NetBeans.
Select Ruby in the Categories field and Ruby on Rails Application in the
Projects field and then click Next. Type 'gmaps' in the Project Name field.
Choose MySQL as the backend database and then click Finish.
In the Projects window, expand the gmaps node. We could see
that all the Rails folder has been generated by NetBeans Ruby IDE.
Then we
should create a new database called gmaps_development. We use 'mysqladmin' tools to create this
database. In the command line, input the following command:
mysqladmin -u root create
gmaps_development
After the database is created, we should
expand the 'config' node and add the database description in the database.yml
file like this:
development:
adapter: mysql
encoding: utf8
database: gmaps_development
username: root
password:
host: localhost
After the database configuration, we could use
the Rake command 'rake
db:migrate' to check whether or not our configuration is correct.
Add model for our project
Now, we are gonna add a new model
'location' for our application. In NetBeans Rails Generator, we select
'Generate->model' and input 'location' in the argument and click 'OK'. This
action will generate a new model for us.
In the generated database migration file
'db/migrate/001_create_locations.rb', add the following code:
class CreateLocations < ActiveRecord::Migration
def
self.up
create_table:locationsdo |t|
t.column:address,:string,:limit =>100
t.column:description,:string,:limit =>100
t.column:lat,:decimal,:precision =>15,:scale =>10
t.column:lng,:decimal,:precision =>15,:scale =>10
end
end
def
self.down
drop_table:locations
end
end
In the database migration file, we add
three parameters (address, description, latitude, longitude) for our model
location. And we also assign the type and precision of these parameters.
Then right click the gmaps project and
select 'Migrate Database-> To Current Version' to synchronize the database
migration task with the database scheme. We could see the feedback from the
console widow like this:
== 1
CreateLocations: migrating
=============
-- create_table(:locations)
->
0.1720s
== 1 CreateLocations: migrated (0.1720s)
=======
Then
the table locations have been created with the columns address, description,
latitude and longitude.
Installing the GeoKit and Cartographer Gem
In
the command line of our application folder, input the following command to
install the GeoKit gem:
ruby script/plugin install
svn://rubyforge.org/var/svn/geokit/trunk
After
the installation, we could test the GeoKit first in the Rails console. GeoKit
use Google, Yahoo and Geocoder.us for geo-coding (to translate the real address
to latitude and longitude). GeoKit should copy your Google Maps API Key to the
file config/envirnoment.rb, after the sentence 'GeoKit::Geocoders::google ='.
Now, right click gmaps project and then select 'Rails console' to load Rails
console in NetBeans. Type in:
>>include GeoKit::Geocoders
>> home = MultiGeocoder.geocode('100
Spear St,San Francisco, CA')
=> #<GeoKit::GeoLoc:0x 30a 23ac @state="CA", @success=true, @lng=-122.393981,
@precision="unknown", @city="San Francisco", @country_code="US", @lat=37.792528,@street_address="", @zip="94105">
We use parameter 'home' to receive the
result of real address geo-coding. In the Rails console, we will get the country
code, zip code, lng and lat information according to the address '100 Spear St,
San Francisco, CA'.
Then we will use the auto coding function
of GeoKit to store our address information in the database. In the model
app/models/location.rb, add the following sentence:
class Location <
ActiveRecord::Base
acts_as_mappable:auto_geocode =>true
end
Now we back to the Rails console, use the
following command to create the new record for the location model:
>> Location.create(:address =>
"")
=> #<Location id: 1, address:
"", lat:#<BigDecimal:3063968,'0.37792528E2',12(12)>,lng:#<BigDecimal:
306374c,'-0.122393981E3',12(16)>>
>> Location.create(:address =>
"")
=> #<Location id: 2, address:
"", lat: #<BigDecimal:2fff184,'0.37794391E2',12(12)>, lng:
#<BigDecimal:2ffef04,'-0.122394831E3',12(16)>>
Then one record has been added to the
Locations table. In the next step, we will use marker to put these record in the
locations table.
To make it easy to use Google Maps API in
our application, we need another Ruby gem and we should download the
Cartographer plugin from the project
homepage(http://cartographer.rubyforge.org/) to help us embed Google Maps API in
our pages. After download the Cartographer gem, unzip the plugin to the folder
vendor/plugins, and move the configuration file cartographer-config.yml to the
directory config in the gmaps application.
Of course, we should add the Google API Key
to cartographer-config.yml file like this:
127.0.0.1:3000:
ABQIAAAAj5cpJ2swzFT77RVZXuP73BTX2XchcwgyHzp4Xo0DHRAzt2aLjhSg2ymVlJvVjBa7kWNgtqU8xxwIAQ
Add controller for our project
Now we will
create a controller named 'location'. Open the Rails Generator dialogue and fill
the 'Name' field with location and then click 'OK'.
Then the controller file
app/controllers/location_controller.rb has been created. There
will be two methods in the controller 'index' and 'create', the code of index
method looks like:
def index
@locations = Location.find(:all)
@map
= Cartographer::Gmap.new("gmaps")
@map.controls = [ :large, :scale ]
@map.debug = true
@map.center = [37.79, -122.4]
@locations.each do |location|
@map.markers <<
Cartographer::Gmarker.new(:name => "location_" + location.id.to_s, :position
=> [location.lat, location.lng], :info_window => location.description,
:map => @map )
end
end
Here we accomplish there tasks in the index
method. First, use 'Location.find(:all)' to get all the records in the database.
Second, mark the address to the Maps with Google Maps API. And then put the
location information in the Maps with the Google Maps API.
We
use the plugin Cartographer to help us to generate the New Maps with Google
Maps, the id of the map is gmaps, and this id should be coordinate with the div
label in the pages.
Besides, we use Cartographer to define the
control bar and the scale bar of the Maps, and use @map.center to set the center
position of the map.
Then
in the next loop, we get the record from the table and use @map.markers to
generate markers of the map. And also display the description sentence in popup
windows.
After
the index controller, we will focus on the index view and location layout. The
location layout (views/layouts/location.rhtml) looks like:
<html>
<head>
<title>Map demo</title>
<%= Cartographer::Header.header_for(request) %>
</head>
<body id="map">
<div id="main">
<%= yield :layout %>
</div>
</body>
</html>
And the index view
(views/location/index.rhtml) looks like:
<h1>Add New Location</h1>
<hr />
<% @map.zoom = 14 %>
<%= @map.to_html(true) %>
<div id="gmaps" style="width: 600px; height: 400px;"></div>
We put Cartographer tag in the head label.
Cartographer plugin will interpret our code to Google Maps API JavaScript code
to load the Google Maps in the page.
Now
let's start the server and open browser to look at what we get from the above
code.
We could see a map with two point markers
in the final page. These two point markers are the record from the table that we
added just now.
More information
You
can find additional information about Ruby support in NetBeans on its wiki page:
http://wiki.netbeans.info/wiki/view/Ruby.
Various demos and tutorials are available
from the main Ruby documentation page: http://www.netbeans.org/kb/60/ruby/index.html.
Finally you can download the NetBeans IDE
for free from the following URL: http://www.netbeans.org/community/releases/60/index.html.
You can either choose to install a small version of the Ruby-only IDE (a special
bundle is provided) or full-blown Java IDE with Ruby support. It is also
possible to add Ruby support to the Java-only IDE using Tools | Plugins.
In the next part of the series, we will
discuss how to add locations in the rails project. As well as how to show up
popup window in our map.
In the meantime, make sure to try out Ruby
support in NetBeans. If you develop in Ruby a lot, you may find that NetBeans is
the IDE you have been looking for!
