In this blog post, I will show you how to insert a dynamic map into your rails project and protect your secret tokens.
1) Go to Mapbox.com - create an account & design a map (super easy). Mapbox provides users with a free 30 day trial and some amazing maps and easy to use tools that you can use to build a pretty cool map very quickly. Mapbox also provides users with information to quickly get your map displaying in your projects here: https://www.mapbox.com/mapbox.js/example/v1.0.0/. However, I think you might find the information below helpful, as you will probably want to keep your secret keys/tokens, secret.
2) Next, cd into your rails application and create a main.js file in your project
touch main.js
3) Insert "require('map box.js')" into the main.js file from you command line:
echo "require('mapbox.js');" >> main.js
4) Install mapbox
$ npm install mapbox.js —save
5) Install browserify (a bundling tool for javascript)
$ npm install -g browserify
6) Bundle your project using browserify
browserify main.js -o bundle.js
7) To access mapbox in your rails project, open your app/views/layouts/application.html.erb file and insert the following html between your head tags. This html allows you to accesses the mapbox api within your project. Note: You you will eventually want to move the style tags out into a stylesheet, but the code below will get you started.
<meta charset=utf-8 />
<title>My First Map with Mapbox</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'</script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet'/>
<style>
#map { height: 400px; width: 800px; padding:5; border: none; float:center; top: 5px; bottom:0; width:100%; }
</style>
8) In the view where you'd like to see your map displayed, insert the following html. This code accesses your mapbox account and displays your map.
<div id='map'></div>
<script>
L.mapbox.accessToken = 'PUBLIC KEY';
var map = L.mapbox.map('map', 'MAP ID')
</script>
Your PUBLIC KEY is generated by Mapbox and can be found here here: https://www.mapbox.com/account/apps/
Your MAP ID will be located in your project folders: https://www.mapbox.com/projects/
9) If you are using github or any other public site to host your repository, you will also want to hide your PUBLIC KEY, so the big bad computer hackers can't jack your mapbox maps and/or other sensitive info (I don't know much about hacking yet). In Rails 4.1, config/secrets.yml is the new default location for secretkeybase of your application. It can also be used also for storing other secret variables, like environment-specific tokens, API keys etc. Therefore, we are going to move your PUBLIC KEY into your config/secrets.yml, assigning it the name "mapbox_token", like so:
development:
mapbox_token: pk.1111111111aaaaaaaaaaa.22222222222bbbbbbbbbbbb
10) Eventually, you might want to test the JavaScript of your map and/or access your map in production. Therefore, you might as well create a default environment, which allows your mapbox_token to be accessed from all environments, like so:
default: &default
mapbox_token: pk.1111111111aaaaaaaaaaa.22222222222bbbbbbbbbbbb
development:
<<: *default
test:
<<: *default
production:
secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
# Do not keep production secrets in the repository,
# instead read values from the environment.
11) Next, go back to the view where you placed your map. Rails 4.1 provides you with methods to access your secrets with Rails.application.secrets. Because you placed the map in a view, you also need to wrap this code in erb tags like so <%= Rails.application.secrets.mapbox_token %>. The view which displays your map should now look like this:
<div id='map'></div>
<script>
L.mapbox.accessToken = '<%= Rails.application.secrets.mapbox_token %>';
var map = L.mapbox.map('map', 'MAP ID')
</script>
12) Add "config/secrets.yml" to your .gitignore file before pushing to github to ensure your secrets are safe.
13) Finally, when pushing your application up to production, specifically heroku, you will need to need to push up the secrets in your secrets.yml file. A good tool for this is the gem Heroku Secrets: https://github.com/alexpeattie/heroku_secrets. Simply add the gem to your Gemfile, like so: gem 'heroku_secrets' and from your terminal run bin/rake heroku:secrets RAILS_ENV=production. Yay! Your secret mapbox token is now hidden and safe.
Thanks for checking out my first technical blogpost :)
It would not have been possible without the help of Rachel Warbelow. Thanks so much Rachel!
Chris Luhring
Turing Student
1410 Cohort