Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added google maps things

  • Loading branch information...
commit 5fbfc8f0dbb40fe7a8dbed38158521dff54f94ec 1 parent 1eb2d8e
Stephan van Eijkelenburg authored
2  Gemfile
View
@@ -21,6 +21,8 @@ gem 'kaminari'
gem 'jquery-rails'
gem 'devise'
+gem 'geocoder'
+
# Use unicorn as the web server
# gem 'unicorn'
2  Gemfile.lock
View
@@ -47,6 +47,7 @@ GEM
factory_girl_rails (1.0.1)
factory_girl (~> 1.3)
railties (>= 3.0.0)
+ geocoder (0.9.10)
haml (3.0.25)
i18n (0.5.0)
jquery-rails (0.2.7)
@@ -115,6 +116,7 @@ DEPENDENCIES
compass (>= 0.10.6)
devise
factory_girl_rails
+ geocoder
haml
jquery-rails
kaminari
5 app/controllers/maps_controller.rb
View
@@ -0,0 +1,5 @@
+class MapsController < ApplicationController
+ def show
+ @boats = Boat.all
+ end
+end
2  app/helpers/maps_helper.rb
View
@@ -0,0 +1,2 @@
+module MapsHelper
+end
2  app/models/boat.rb
View
@@ -19,6 +19,8 @@ class Boat < ActiveRecord::Base
has_many :photos
belongs_to :owner
accepts_nested_attributes_for :photos
+ geocoded_by :address
+ after_validation :geocode
mount_uploader :banner, BannerUploader
7 app/stylesheets/partials/_exposure.scss
View
@@ -0,0 +1,7 @@
+.exposureThumbs li {
+ margin: 12px 12px 12px 0;
+
+ &.last {
+ margin-right: 0;
+ }
+}
14 app/stylesheets/partials/_maps.scss
View
@@ -0,0 +1,14 @@
+.mapsInfo {
+ img {
+ }
+
+ .price {
+ float: right;
+ color: gray;
+ }
+
+ .link a {
+ color: black;
+ font-weight: bold;
+ }
+}
192 app/stylesheets/partials/_pikachoose.scss
View
@@ -1,192 +0,0 @@
-/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
-.pika-thumbs li {
- width: 144px;
- height: 74px;
-}
-
-.pikachoose {
- width: 520px;
- margin: 0
- auto;
-}
-
-.pika-stage {
- position: relative;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- padding: 10px 10px 40px 10px;
- text-align: center;
- height: 330px;
- width: 539px;
-
- .main-image {
- position: absolute;
- top: 10px;
- left: 10px;
- }
-
- .pika-aniwrap {
- position: absolute;
- top: 10px;
- left: 0px;
- width: 100%;
- }
-
- .pika-ani {
- position:relative;
- display: none;
- z-index: 2;
- margin: 0 auto;
- }
-
- img {
- border:0;
- height:100%;
- }
-
- .caption {
- position: absolute;
- background: image-url('pikachoose/75-black.png');
- border: 1px solid #141414;
- font-size: 11px;
- color: #fafafa;
- padding: 10px;
- text-align: right;
- bottom: 50px;
- right: 10px;
- }
-
- .caption p {
- padding: 0;
- margin: 0;
- line-height: 14px;
- }
-}
-
-.pika-imgnav a {
- position: absolute;
- text-indent: -5000px;
- display: block;
- z-index: 3;
-
- &.previous {
- background: image-url('pikachoose/prev.png') no-repeat left 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- left: 10px;
- cursor:pointer;
- }
-
- &.next {
- background: image-url('pikachoose/next.png') no-repeat right 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- right: 10px;
- cursor:pointer;
- }
-
- &.play {
- background: image-url('pikachoose/play.png') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top:0;
- left:50%;
- display: none;
- cursor:pointer;
- }
-
- &.pause {
- background: image-url('pikachoose/pause.png') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top:0;
- left:50%;
- display:none;
- cursor:pointer;
- }
-}
-
-.pika-textnav {
- overflow: hidden;
- margin: 10px 0 0 0;
-
- a {
- font-size: 12px;
- text-decoration: none;
- color: #333;
- padding: 4px;
- &.previous {
- float: left;
- width: auto;
- display: block;
- }
- &.next {
- float: right;
- width: auto;
- display: block;
- }
- }
-}
-
-.pika-thumbs {
- margin: 10px 0;
- padding: 0;
- overflow: hidden;
-
- li {
- float: left;
- list-style-type: none;padding: 3px;
- margin: 0 5px;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- cursor: pointer;
-
- .clip {
- position:relative;
- height:100%;
- text-align: center;
- vertical-align: center;
- overflow: hidden;
- }
- }
-}
-
-/*for the tool tips*/
-.pika-tooltip {
- font-size:12px;
- position:absolute;
- color:white;padding:3px;
- background-color: rgba(0,0,0,0.7);
- border:3px solid black;
-}
-.pika-counter{
- position: absolute;
- bottom: 45px;
- left:15px;
- color:white;
- background:rgba(0,0,0,0.7);
- font-size:11px;
- padding:3px;
- -moz-border-radius: 5px;
- border-radius:5px;
-}
-
-/* jCarousel Styles */
-/*if you're not using the carousel you can delete everything below this */
-.jcarousel-skin-pika .jcarousel-container-horizontal {
- //padding: 15px 20px;
- width: 561px;
- padding: 10px 0;
-}
-.jcarousel-skin-pika .jcarousel-clip-horizontal {
- //height: 90px; width: 485px;
- //height: 90px;
- width: 486px;
- margin: auto;
-}
-.jcarousel-skin-pika .jcarousel-item-horizontal {
- //margin-right: 10px;
- //margin-left: 10px;
-}
3  app/stylesheets/screen.scss
View
@@ -13,4 +13,5 @@
@import "partials/two_col";
-@import "partials/pikachoose"
+@import "partials/exposure";
+@import "partials/maps";
4 app/uploaders/photo_uploader.rb
View
@@ -17,10 +17,10 @@ def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
- process :resize_to_fill => [539, 330]
+ process :resize_to_fill => [560, 420]
version :thumb do
- process :resize_to_fill => [200, 150]
+ process :resize_to_fill => [131, 100]
end
# Provide a default URL as a default if there hasn't been a file uploaded:
5 app/views/boats/_form.html.haml
View
@@ -3,6 +3,11 @@
= f.label :name
.field
= f.text_field :name
+
+ .label
+ = f.label :address
+ .field
+ = f.text_area :address
.label
= f.label :slug
15 app/views/boats/new.html.haml
View
@@ -1,15 +1,2 @@
%h2 Add new boat
-= form_for @boat, :html => { :class => 'bp' } do |f|
- .label
- = f.label :name
- .field
- = f.text_field :name
- .label
- = f.label :slug
- .field
- = f.text_field :slug
- .label
- = f.label :description
- .field
- = f.text_area :description
- = f.submit
+= render 'form'
37 app/views/boats/show.html.haml
View
@@ -1,17 +1,42 @@
+- content_for :head do
+ = javascript_include_tag 'http://maps.google.com/maps/api/js?sensor=false'
+ :javascript
+ /*$(function() {
+ $('#images').exposure({
+ carouselControls: true,
+ pageSize: 4
+ });
+ });*/
+
+ var lat = #{@boat.latitude};
+ var lon = #{@boat.longitude};
+
+ $(function() {
+ var position = new google.maps.LatLng(lat, lon);
+ var options = {
+ zoom: 16,
+ center: position,
+ mapTypeId: google.maps.MapTypeId.HYBRID,
+ disableDefaultUI: true
+ };
+
+ var map = new google.maps.Map($('#map')[0], options);
+ var marker = new google.maps.Marker({position: position, map: map});
+ });
+
- content_for :menu do
%ul
%li= link_to 'Edit', :action => :edit
-:javascript
- $(function() {
- $('#gallery').PikaChoose({carousel: true});
- });
%h2= @boat.name
= image_tag @boat.banner.url
%p= @boat.description
- if @boat.photos.any?
- %ul#gallery.jcarousel-skin-pika
+ %ul#images
- @boat.photos.each do |p|
- %li= image_tag p.file.url
+ %li= link_to image_tag(p.file.url :thumb), p.file.url
+#map{ :style => 'width: 561px; height: 400px;' }
+ -#%img{:src => "http://maps.google.com/maps/api/staticmap?zoom=14&markers=#{CGI.escape @boat.address}&size=500x500&sensor=false"}
+
8 app/views/layouts/application.html.haml
View
@@ -10,8 +10,14 @@
/[if lt IE 8]
= stylesheet_link_tag 'compiled/ie.css', :media => 'screen, projection'
+ -#= stylesheet_link_tag 'colorbox/colorbox.css'
+ -#= stylesheet_link_tag 'exposure/demo.css'
+
= javascript_include_tag :defaults
- = javascript_include_tag 'pikachoose/lib/jquery.pikachoose.full.js'
+ -#= javascript_include_tag 'exposure/jquery.exposure.js'
+ -#= javascript_include_tag 'colorbox/jquery.colorbox.js'
+
+ = yield :head
%body.bp
.container
6 app/views/maps/_infobox.html.haml
View
@@ -0,0 +1,6 @@
+.mapsInfo
+ = link_to image_tag(boat.banner.url(:thumb)), boat
+ %h3= boat.name
+ %p= boat.description
+ %span.link= link_to 'More info', boat
+ %span.price 49 €
31 app/views/maps/_markers.js.erb
View
@@ -0,0 +1,31 @@
+$(function() {
+ var amsterdam = new google.maps.LatLng(52.364804, 4.897757);
+
+ // Create new map
+ var map = new google.maps.Map(document.getElementById('map'), {
+ zoom: 13,
+ center: amsterdam,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ });
+
+ var activeWindow = null
+
+ // Add marker for each boat
+ <% @boats.each do |boat| %>
+ marker = new google.maps.Marker({
+ position: new google.maps.LatLng(<%= boat.latitude %>, <%= boat.longitude %>),
+ title: '<%= boat.name %>',
+ map: map
+ });
+
+ google.maps.event.addListener(marker, 'click', function() {
+ if (activeWindow != null)
+ activeWindow.close();
+ activeWindow = new google.maps.InfoWindow({
+ content: "<%= escape_javascript render :partial => 'infobox', :locals => {:boat => boat} %>",
+ maxWidth: 227
+ });
+ activeWindow.open(map, this);
+ });
+ <% end %>
+});
6 app/views/maps/show.html.haml
View
@@ -0,0 +1,6 @@
+- content_for :head do
+ = javascript_include_tag 'http://maps.google.com/maps/api/js?sensor=false'
+ %script{ :type => 'text/javascript' }
+ = render :partial => 'markers.js'
+
+#map{ :style => 'width: 561px; height: 400px;' }
2  config/routes.rb
View
@@ -4,6 +4,8 @@
resources :boats
resources :owners
+ resource :map
+
root :to => 'boats#index'
# The priority is based upon order of creation:
# first created -> highest priority.
13 db/migrate/20110320185725_add_address_to_boat.rb
View
@@ -0,0 +1,13 @@
+class AddAddressToBoat < ActiveRecord::Migration
+ def self.up
+ add_column :boats, :address, :string
+ add_column :boats, :latitude, :float
+ add_column :boats, :longitude, :float
+ end
+
+ def self.down
+ remove_column :boats, :address
+ remove_column :boats, :latitude
+ remove_column :boats, :longitude
+ end
+end
5 db/schema.rb
View
@@ -10,7 +10,7 @@
#
# It's strongly recommended to check this file into your version control system.
-ActiveRecord::Schema.define(:version => 20110316193534) do
+ActiveRecord::Schema.define(:version => 20110320185725) do
create_table "admins", :force => true do |t|
t.string "email", :default => "", :null => false
@@ -33,6 +33,9 @@
t.text "description"
t.string "banner"
t.integer "owner_id"
+ t.string "address"
+ t.float "latitude"
+ t.float "longitude"
end
add_index "boats", ["slug"], :name => "index_boats_on_slug", :unique => true
207 public/stylesheets/compiled/screen.css
View
@@ -648,203 +648,22 @@ body.two-col #content {
overflow-x: hidden;
}
-/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
-/* line 2, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-thumbs li {
- width: 144px;
- height: 74px;
+/* line 1, ../../../app/stylesheets/partials/_exposure.scss */
+.exposureThumbs li {
+ margin: 12px 12px 12px 0;
}
-
-/* line 7, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pikachoose {
- width: 520px;
- margin: 0 auto;
-}
-
-/* line 13, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage {
- position: relative;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- padding: 10px 10px 40px 10px;
- text-align: center;
- height: 330px;
- width: 539px;
-}
-/* line 22, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage .main-image {
- position: absolute;
- top: 10px;
- left: 10px;
-}
-/* line 28, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage .pika-aniwrap {
- position: absolute;
- top: 10px;
- left: 0px;
- width: 100%;
-}
-/* line 35, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage .pika-ani {
- position: relative;
- display: none;
- z-index: 2;
- margin: 0 auto;
-}
-/* line 42, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage img {
- border: 0;
- height: 100%;
-}
-/* line 47, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage .caption {
- position: absolute;
- background: url('/images/pikachoose/75-black.png?1299400068');
- border: 1px solid #141414;
- font-size: 11px;
- color: #fafafa;
- padding: 10px;
- text-align: right;
- bottom: 50px;
- right: 10px;
-}
-/* line 59, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-stage .caption p {
- padding: 0;
- margin: 0;
- line-height: 14px;
-}
-
-/* line 66, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-imgnav a {
- position: absolute;
- text-indent: -5000px;
- display: block;
- z-index: 3;
-}
-/* line 72, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-imgnav a.previous {
- background: url('/images/pikachoose/prev.png?1299400068') no-repeat left 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- left: 10px;
- cursor: pointer;
-}
-/* line 81, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-imgnav a.next {
- background: url('/images/pikachoose/next.png?1299400068') no-repeat right 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- right: 10px;
- cursor: pointer;
-}
-/* line 90, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-imgnav a.play {
- background: url('/images/pikachoose/play.png?1299400068') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top: 0;
- left: 50%;
- display: none;
- cursor: pointer;
-}
-/* line 100, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-imgnav a.pause {
- background: url('/images/pikachoose/pause.png?1299400068') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top: 0;
- left: 50%;
- display: none;
- cursor: pointer;
+/* line 4, ../../../app/stylesheets/partials/_exposure.scss */
+.exposureThumbs li.last {
+ margin-right: 0;
}
-/* line 111, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-textnav {
- overflow: hidden;
- margin: 10px 0 0 0;
-}
-/* line 115, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-textnav a {
- font-size: 12px;
- text-decoration: none;
- color: #333;
- padding: 4px;
-}
-/* line 120, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-textnav a.previous {
- float: left;
- width: auto;
- display: block;
-}
-/* line 125, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-textnav a.next {
+/* line 5, ../../../app/stylesheets/partials/_maps.scss */
+.mapsInfo .price {
float: right;
- width: auto;
- display: block;
-}
-
-/* line 133, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-thumbs {
- margin: 10px 0;
- padding: 0;
- overflow: hidden;
-}
-/* line 138, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-thumbs li {
- float: left;
- list-style-type: none;
- padding: 3px;
- margin: 0 5px;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- cursor: pointer;
-}
-/* line 146, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-thumbs li .clip {
- position: relative;
- height: 100%;
- text-align: center;
- vertical-align: center;
- overflow: hidden;
-}
-
-/*for the tool tips*/
-/* line 157, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-tooltip {
- font-size: 12px;
- position: absolute;
- color: white;
- padding: 3px;
- background-color: rgba(0, 0, 0, 0.7);
- border: 3px solid black;
-}
-
-/* line 164, ../../../app/stylesheets/partials/_pikachoose.scss */
-.pika-counter {
- position: absolute;
- bottom: 45px;
- left: 15px;
- color: white;
- background: rgba(0, 0, 0, 0.7);
- font-size: 11px;
- padding: 3px;
- -moz-border-radius: 5px;
- border-radius: 5px;
+ color: gray;
}
-
-/* jCarousel Styles */
-/*if you're not using the carousel you can delete everything below this */
-/* line 178, ../../../app/stylesheets/partials/_pikachoose.scss */
-.jcarousel-skin-pika .jcarousel-container-horizontal {
- width: 561px;
- padding: 10px 0;
-}
-
-/* line 183, ../../../app/stylesheets/partials/_pikachoose.scss */
-.jcarousel-skin-pika .jcarousel-clip-horizontal {
- width: 486px;
- margin: auto;
+/* line 10, ../../../app/stylesheets/partials/_maps.scss */
+.mapsInfo .link a {
+ color: black;
+ font-weight: bold;
}
5 spec/controllers/maps_controller_spec.rb
View
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe MapsController do
+
+end
15 spec/helpers/maps_helper_spec.rb
View
@@ -0,0 +1,15 @@
+require 'spec_helper'
+
+# Specs in this file have access to a helper object that includes
+# the MapsHelper. For example:
+#
+# describe MapsHelper do
+# describe "string concat" do
+# it "concats two strings with spaces" do
+# helper.concat_strings("this","that").should == "this that"
+# end
+# end
+# end
+describe MapsHelper do
+ pending "add some examples to (or delete) #{__FILE__}"
+end
Please sign in to comment.
Something went wrong with that request. Please try again.