# Views
// 1. Add js and css links
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />

// 2. Create div with id "map"
<div id="map"></div>

// 3. Create script tag. Include access token, render map, and set view.
<script>
  L.mapbox.accessToken = 'YOUR PUBLIC ACCESS TOKEN HERE';
  var map = L.mapbox.map('map', 'YOUR_MAP_HERE') // default: map.streets
      .setView([40, -74.50], 2); // ([coordinates], zoom level)
</script>

// 4. Add styling to div.
#map {
  // put your custom styling here
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

# Gemfile
# 5. Add gem to Gemfile
gem 'geocoder'

# 6. Run 'bundle' in terminal

$ bundle install

# Schema
# 7. Make sure model has attributes address, latitude, and longitude.
# If you already have a model created, create a migration to add those attributes.
ActiveRecord::Schema.define(version: 20150707122109) do

  create_table "places", force: :cascade do |t|
    t.string   "name"
    t.string   "address"
    t.float    "latitude"
    t.float    "longitude"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
end

$ rake db:migrate

# Model
class Place < ActiveRecord::Base
  # 7. Add these methods to Model
  geocoded_by :address
  after_validation :geocode
end

# Controller
class PlacesController < ApplicationController
  # Make sure the corresponding view is where you want your map to render.
  # Make sure that this route exists as well.

  # 8. Create JSON array.
  def index
    @places = Place.all
    @geojson = Array.new

    @places.each do |place|
      @geojson << {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [place.longitude, place.latitude]
        },
        properties: {
          name: place.name,
          address: place.address,
          :'marker-color' => '#00607d',
          :'marker-symbol' => 'circle',
          :'marker-size' => 'medium'
        }
      }
    end
    respond_to do |format|
      format.html
      format.json { render json: @geojson }  # respond with the created JSON object
    end
  end
end

# Updated View
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />

<div id="map"></div>

<script>
  L.mapbox.accessToken = 'YOUR PUBLIC ACCESS TOKEN HERE';
  var map = L.mapbox.map('map', 'YOUR_MAP_HERE') // default: map.streets
      .setView([40, -74.50], 2); // ([coordinates], zoom level)

  // 9. Add data from JSON object to map.
  var myLocations = L.mapbox.featureLayer()
          .loadURL('JSON_URL_HERE') // example: /places.json
          .addTo(map)
</script>