dylanfprice / hutmap

The code that powers hutmap.com

This is the code that powers hutmap.com.

• Setup
• Develop
• Deploy

Setup

This section describes how to set up and run hutmap as a developer.

We assume a working knowledge of Linux, Bash, Python, and Django. You may not know Vagrant, so walk through the tutorial before setting everything up.

It should work on Windows but we've only ever used Linux and Mac so no guarantees.

Clone the Repo

Download the project code and its submodules:

git clone https://github.com/dylanfprice/hutmap.git
git submodule init
git submodule update

The project uses bower to manage front-end dependencies. Install it with npm:

npm install -g bower
bower install

Install Dependencies

Install:

• Python 2.x
• Vagrant
• Ansible

If you run a Debian based Linux distro like me this should work:

$ sudo apt-get install vagrant
$ sudo easy_install pip
$ sudo pip install ansible

Configure

Create the file ops/provisioning/group_vars/vagrant with the following in it:

---
user: 'vagrant'
virtualenv: '{{ repo_dir }}/ops/venvs/hutmap/'
mysql_root_password: 'vagrant'

hutmap:
  version: 'dev'
  db_name: 'hutmap' 
  db_user: 'hutmap'
  db_password: 'hutmap'
  db_host: ''
  db_port: ''
  secret_key: '516713f0-518b-11e2-bcfd-0800200c9a66'
  debug: 'true'
  google_api_key: 'YOUR_GOOGLE_API_KEY'
  email_host_user: ''
  email_host_password: ''

Setup Dev Environment

$ cd ops/
$ vagrant up # this will take a while

On my machine with an ~ 30MBps connection this took around 30 minutes.

Go to http://localhost:8000 in your browser and verify you see the homepage.

If you encounter any errors, run

$ vagrant provision

and make sure it finishes without errors.

When you are done working, make sure you do a

$ vagrant suspend

before turning off your machine.

Initialize Database

You will probably want to sync the database and load in some data:

$ cd ops/
$ vagrant ssh
$ workon_hutmap
$ ./manage.py syncdb
$ ./manage.py migrate
$ ./manage.py loaddata init
$ scripts/update_huts_json.sh

Got to localhost:8000/map and verify you see some data. You can now also log in to localhost:8000/admin with 'admin' for both username and password.

Develop

Developing Python (Django)

The main django app is in src/hutmap/huts/. You can run manage.py commands by logging into the vm:

$ cd ops/
$ vagrant ssh
$ workon_hutmap
$ ./manage.py <command>

Django's devserver is wrapped in an upstart service, so it should restart automatically if you crash it. But if you want to stop, start, or restart it for any reason, then while logged in to the vm you can run;

$ sudo stop django-devserver
$ sudo start django-devserver
$ sudo restart django-devserver

Developing Javascript (AngularJS)

Edit the js files in hutmap/static/js/ and add tests in src/hutmap/static/js-test/. Changes will show up when you reload the page. Note that Angular expressions are wrapped in [* *] instead of the default {{ }}, so as not to conflict with Django.

Run the tests by logging into the vm and starting a karma server:

$ cd ops/
$ vagrant ssh
$ karma start /vagrant/hutmap/static/js-test/config/karma.conf.js

Developing CSS

The css is located at hutmap/static/css/. It is written in less. The less is automatically compiled to css using django_compressor so you just need to reload the page.

Deploy

Deploy to Dreamhost

There are two types of deploys: partial and full. A partial deployment assumes the server is already successfully serving hutmap and simply updates the code and static files (css, js, images, etc.). A full deploy assumes nothing and ensures all libraries and other 'one-time setup' items are taken care of.

Partial Deploy

First step is to set up ops/group_vars/dreamhost with the following variables set to the values you want (Ethan I can send you this file):

---
user: 'me'
repo_dir: '/home/me/mysite.com'

hutmap:
  # version changes on each deploy to invalidate old files in cache
  version: '{{ lookup("pipe", "date +%s") }}'
  db_name: 'my_db_name' 
  db_user: 'my_db_user'
  db_password: 'my_db_password'
  db_host: 'my_db_host'
  db_port: 'my_db_port'
  secret_key: 'my_secret_key'
  debug: 'false'
  google_api_key: 'my_google_api_key'
  email_host_user: '' # Not implemented yet
  email_host_password: '' # Not implemented yet

Next you need to set up the dreamhost server to authorize the vagrant vm's public key:

$ cd ops/
$ vagrant ssh
$ ssh-copy-id user@host # where user@host corresponds to your dreamhost account

Then, while still logged into the vm:

$ workon_hutmap
$ scripts/deploy_dreamhost.sh

Re-run this script any time you need to deploy.

Full Deploy

Follow the same steps as Partial Deploy above, but at the last step run the following instead:

$ scripts/deploy_dreamhost.sh full

hutmap's Issues

Populate initial homepage array, adding credit fields.

Deselecting "any" should auto-activate all other choices.

Mimic bing.com behavior on homepage.

Show last item in array by default
Click left arrow to view earlier items
Arrow buttons greyed out at each end of array

Get rid of dirty hack for select fields

In order to convert data coming from a django form into a javascript object, I have hardcoded a conversion which converts null to choice 1, true to choice 2, false to choice 3. This is bad.

Idea: a custom select widget which sets its value attributes to something more amenable to javascript true/false/null values.

Map doesn't get resized correctly

When clicking 'hide filter bar', huts that should show up on the right hand side of the screen do not show up, even though the map tiles show up there.

See:
http://www.hutmap.com/map/?f=%7B%22season%22%3A%7B%22winter%22%3Atrue%2C%22summer%22%3Atrue%2C%22unknown%22%3Atrue%7D%2C%22anyShelterType%22%3Atrue%2C%22shelterType%22%3A%7B%22emergency%20shelters%22%3A%7B%22include%22%3Afalse%7D%2C%22fire%20lookouts%22%3A%7B%22include%22%3Afalse%7D%2C%22huts%20%26%20yurts%22%3A%7B%22include%22%3Afalse%7D%2C%22compounds%22%3A%7B%22include%22%3Afalse%7D%7D%7D&m_center=46.596811,-120.41748&m_zoom=8

1. Hide filter bar, then show it again
2. Hut that is off the right side of the screen is loaded.
3. Click 'hide filter bar' and you see it disappear.

Migrate to Google Analytics 4

Extremely low priority, given that we aren't maintaining this project at the moment.
In any case, the Universal Analytics account currently in use will stop collecting data on 1 July 2023. This is the Analytics 4 account that would replace it:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-B6TJS8QEE3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-B6TJS8QEE3');
</script>

server generated pages

We should generate the /, /map, and /about pages separately and not use the fancy ng-view loading. It's unnecessary and then we will be able to generate better metadata for each page separately, and get sitelinks in search results, etc.

Link saving selected hut

The link to a selected hut should save the selected hut by id instead of lat,lon.

Change Angular template syntax

It conflicts with Django's and is a pta.

See http://stackoverflow.com/questions/8302928/angularjs-with-django-conflicting-template-tags

get rid of 'reset all filters' tooltip

hutmap js object

set js vars such as STATIC_URL and GOOGLE_API_KEY in a global 'hutmap' object

Refactor css

It's a big mess of spaghetti. Maybe read some stuff on good css design/organization.

http://smacss.com/

DRY up STATIC_URL

STATIC_URL is set in settings.py and variables.less. We should have a generated.less file created during the less build.

Stop updating url

Don't constantly update url on map page.

Better handling of photos

The folder structure and scheme for saving photos needs some thought and re-design.

refactor LinkCtrl

move gapi code into it's own service

reorganize Hut and Map scopes

put all HutCtrl values into $scope.h and all MapCtrl values into $scope.m

tooltips hella annoying

The tooltips in the filter bar suck.

Clickable icons don't have clicky hands in chrome

Apply migrations during deploy

The deploy script should run call migrate so the db is updated on deploy.

Refactor templates

Reorganize files:

• angular templates should go in templates/ng-templates
• only things directly {% include %}d in the partials should go in partials/components/
• remove templates not being used

scrollbar issues

1. When filters overflow on the map page, there should be a scrollbar inside the filter bar, and none for the whole page.

2. The scrollbar on the about page should not go into the navbar territory.

Adopt new Google Maps styling

google.maps.visualRefresh=true;

Allow user feedback in hut suggestions and edits

"Your Email" - allowing us to contact them with questions

"Notes on this change for the Hutmap team" - allowing them to provide us with whatever pertinent information they think we should know

Fix color profile in the navbar grey triangle image.

Check result in Safari

automatic filling of fields

Fields such as altitude_meters, country, state, etc. should be auto-filled when we create hut objects.

MSR USGS horribly slow

And sometimes makes the map unresponsive. Disable? ArcGIS USA may be better anyway for topo needs.

unnamed huts

When importing huts with a blank name, we should give it a name based on it's first type, e.g. 'Unnamed Cave'.

filters reimagining

The filter format ($scope.f in FilterCtrl) is not so great. We can do better:

$scope.f.{filter} = {
  'key': {
    include: false,
    $tooltip: 'blah',
    $position: 0
  }
}
...
$scope.position = function(filter) {
  return filter.$position;
};

and

<li ng-repeat="(type, data) in $scope.f.{filter} | orderBy:position">
  ...
</li>

mapTypeId

When switching back and forth between tabs, mapTypeId gets messed.

sitemap.xml

Generate one and make it available.
https://docs.djangoproject.com/en/1.5/ref/contrib/sitemaps/

Consolidate $location.searching

move all setting of $location search parameters into the LinkCtrl

Special message for users of IE 8 or previous

e.g.

<div class="row">
    <div class="span12">
        <!--[if lt IE 7]>
        <p class="alert alert-error">Your browser is <em>ancient!</em>
          <a href="http://browsehappy.com/">Upgrade to a different browser</a> or
          <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to
          experience this site.
        </p>
        <![endif]-->

        <!--[if lt IE 9]>
        <div class="alert">
          You are using an old version of Internet Explorer.
          For better and safer browsing experience please <a href="http://www.microsoft.com/IE9">upgrade IE</a>
          or install <a href="http://google.com/chrome">Google Chrome browser</a>.
        </div>
        <![endif]-->
    </div>
</div>

stale marker tooltips left on map

If a tooltip doesn't get closed properly, and you switch to a different tab and then back to map, the tooltip remains on the page. We should clean up old tooltips when switching from the map.

Summary when filters disabled

when disabling all filters, should say "Showing 0 of xx huts"

Navbar position not fixed

The navbar should be fixed to the top of the screen when you scroll, e.g. on the about page

Absolute position the content div

Check result on the about page. The navbar should remain fixed while the content scrolls.