Geotrek rando, public portal of Geotrek (http://geotrek.fr).
Demo instances :
- Python 2.6+
Once the OS is installed (basic installation, with OpenSSH server), with the following packages :
sudo apt-get install -y python-virtualenv libapache2-mod-wsgi python-dev build-essential unzip
| note: | Do not forget basic security packages like fail2ban or
automatic security updates. |
|---|
Copy and extract the source archive, and run install :
unzip vX.Y.Z.zip cd Geotrek-rando-vX.Y.Z/ make install deploy
Be careful to save the file with UTF-8 encoding, especially if you use accents and special characters.
Most important settings :
- GEOTREK_SERVER
- GEOTREK_USER
- GEOTREK_PASSWORD
- TITLE (in every supported language, fallback to English)
- DESCRIPTION (in every supported language, fallback to English)
If you run the application on a preproduction, it is wise to set PREPROD = True, in order
to disable Robots (Google) indexing.
Note that Apache has to be restart to apply changes in settings.
It is also wise to change the permissions of this file, in order to protect sensitive information such as Geotrek password.
Copy the virtual host example :
sudo cp rando/apache.vhost.sample /etc/apache2/sites-available/rando
Edit it and replace /PATH_TO_SOURCE/ by the correct absolute path (i.e where is this README file)
sudo nano /etc/apache2/sites-available/rando
Be careful, the sample Apache configuration assumes that you have python in version 2.7 (Default in Ubuntu 12.04+ and Debian wheezy).
If you run python 2.6 (Debian squeeze), make sure the line WSGIPythonPath points to the folder lib/python2.6/site-packages.
Activate it and restart apache :
sudo a2enmod headers sudo a2ensite rando sudo /etc/init.d/apache2 restart
Give Apache permissions in application folder :
sudo chgrp -R www-data var/ sudo chmod -R g+rw var/
And synchronize at least once !
Setup the Geotrek server you want to synchronize, using the GEOTREK_SERVER setting.
cd Geotrek-rando-X.Y.Z/ make sync
You can schedule synchronization in a crontab (e.g. every hour) :
crontab -e
Add the following line
0 * * * * cd /path/to/application && /usr/bin/make sync
Regularly (once a week), you can also notify Google that your sitemap changed, using this :
30 1 * * 0 cd /path/to/application && /usr/bin/make ping_google url=http://rando.server.com
For Geotrek-mobile, the server needs to build the ressource files (tiles, data, media) for each trek. Add the following schedule task :
15 * * * * cd /path/to/application && bin/python ./manage.py build_mobile_data http://rando.server.com
All versions are published on the Github forge.
Before upgrading, READ CAREFULLY the release notes, either from the CHANGES
files or online.
Download and extract the new version :
unzip vX.Y.Z.zip cd Geotrek-rando-X.Y.Z/
Copy the configuration and synchronized files of the previous version :
# Synchronized files cp -aR ../previous-version/var/ . # Prod settings cp ../previous-version/rando/settings/prod.py rando/settings/prod.py
Make sure the Apache virtualhost refers to the folder of this new version. In order to avoid editing Apache configuration at each upgrade, you can rename the folders.
mv /path/to/application/ /path/to/application.old/ mv /path/to/Geotrek-rando-X.Y.Z/ /path/to/application/
Deploy !
make install deploy
Restart !
sudo /etc/init.d/apache2 restart
Check the version in the web page source. Re-synchronize, just in case.
All customizations in this paragraph happen in the var/input/media/ folder.
You can setup a FTP access to this media folder.
sudo apt-get install vsftpd
Create a user editor whose $HOME will be the media folder (replace full path).
sudo adduser --home /path/to/application/var/input/media/ editor
Done !
All files available in this media folder will be available at the /media URL.
All static pages will be loaded from a pages folder.
Create a subfolder for each language (fr/, en/, it/ ...).
Create *.html files in these folders. The name of the file becomes the title of the page.
- If you want to customize the alphabetical order, you can use prefixes with numbers (for example,
pages/fr/01-Réglementation.html.)
If you want the same page if various language, make sure it has the same prefix number (for example, pages/fr/03-Accompagnateurs.html, pages/en/03-Guides.html, pages/es/03-Guias.html, ...).
| notes: | If a trek is in the park center, a link to the Park Policy (Réglementations) will
be shown in the page.
The policy page must have a prefix id (because of language switching).
You can control the id (default is 1) by changing the setting FLATPAGES_POLICY_PAGE
to the number of your choice. (e.g. FLATPAGES_POLICY_PAGE = 3). |
|---|
If you want to use special characters in pages titles, use the FLATPAGES_TITLES setting.
For example, if you have the following files
pages/fr/001-reglement.html pages/fr/002-a-votre-ecoute.html pages/de/001-Reglen.html pages/de/002-fuer-sie.html
You can set titles using this setting
FLATPAGES_TITLES = {
'reglement': u'Réglement',
'a-votre-ecoute': u'À vôtre écoute',
'fuer-sie': u'Für Sie'
}
You can hide the static pages from the navigation bar, but setting a specific target.
They be will reachable at /page/<slug> but won't be listed in the navigation.
By default only all and rando are shown in the navigation bar. In Geotrek-mobile, only
targets all and mobile will be taken into account.
- FLATPAGES_TARGETS = {
- 'avertissements': 'mobile', 'credits': 'hidden'
}
A style.css is loaded in the page, and allows to override every part of the website.
Upload your file and add a custom section in the custom CSS :
.navbar-inner {
background: url(/media/yourfile.jpg) no-repeat;
}
Content is taken from a file named footer.html, in the media/ folder.
If you wish to have a different one for each language, add a footer.html
file in every language folder of media/pages/.
To hide the footer, add in style.css:
footer {
display: none;
}
.container-content {
bottom: 0px;
}
This file can be used to inject extra Javascript code, using a <script> tag.
The feedback form is protected with the reCaptcha Antispam system.
- Go to http://www.google.com/recaptcha and create an account
- Follow the instructions to get public/private key for your domain name
- Add respective values in settings
RECAPTCHA_PUBLIC_KEYandRECAPTCHA_PRIVATE_KEY.
Ascent filter step values can be controlled with FILTER_ASCENT_VALUES, which shall be a list of integer values expressed in meters.
Duration filters labels and values can be controlled with FILTER_DURATION_VALUES,
which shall be a list of tuples ('label', value), with values expressed in hours.
The background layers can be configured from settings/prod.py. See sample.
The map elements colors can be set from the footer.html page, using a <script> block
and a custom JavaScript file :
<script type="text/javascript" src="/media/custom.js"></script>
And in custom.js :
var TREK_LAYER_OPTIONS = {
style: {'color': '#F89406', 'weight': 5, 'opacity': 0.8},
hoverstyle: {'color': '#F89406', 'weight': 5, 'opacity': 1.0},
outlinestyle: {'color': 'yellow', 'weight': 10, 'opacity': 0.8},
positionstyle: {'fillOpacity': 1.0, 'opacity': 1.0, 'fillColor': 'white', 'color': 'black', 'width': 3},
arrowstyle: {'fill': '#E97000', 'font-weight': 'bold'}
};
style is the base color; hoverstyle is for mouse over; outlinestyle is for outline effect.
arrowstyle controls the color and weight of direction arrows.
See Leaflet documentation on paths for more details.
For example, you may want to add a layer with the boundaries of the park, or infrastructures, equipments...
Using Tilemill, you can create a layer with transparency, from a local ShapeFile, PostGIS query, KML etc. You can export the layer as a MBTiles file.
You can host the resulting MBTiles yourself (with Apache), or on dedicated services like MapBox.
The tiles of this layer can then be added to the maps, using this snippet (for example) of code, placed in the footer.html page. See Leaflet API documentation if any problem.
And in custom.js :
// Add it on all maps at initialization
$(window).on('map:ready', function (e, map) {
L.tileLayer('http://livembtiles.makina-corpus.net/makina/coeur-ecrins/{z}/{x}/{y}.png')
.addTo(map)
.bringToFront();
});
| note: | The same technique could be applied using a local vectorial GeoJSON layer. Caution with the weight of the page, and performance with mobile users. |
|---|
In custom.js :
var ALTIMETRIC_PROFILE_OPTIONS = {
fillColor: '#FFD1A1',
lineColor: '#F77E00',
lineWidth: 3,
};
See Jquery sparkline options.
The following images, if placed in the media folder, will be used instead of the generic material :
img/favicon.pngimg/icon-57.pngimg/icon-72.pngimg/icon-144.pngimg/default-thumbnail.jpg(if trek has no pictures attached)img/default-preview.jpg
In order to replace an icon (ex. buttons, park center, ...), just add a file in the media folder, and override the respective CSS class in your custom style.css.
#park-center-warning {
background-image: url(/media/pn-logo.png);
}
In settings/prod.py, enable with :
POPUP_HOME_ENABLED = True
Content is taken from a file named popup_home.html, in the media/
folder, along with footer.html.
If you wish to have a different one for each language, add a popup_home.html
file in every language folder of media/pages/.
An example of HTML content can be found here : https://gist.github.com/Grsmto/8536822
| note: | In order to prevent page reload for internal links, add the class In order to open home page (main map) on saved search links when popup is shown
from another page, prefix all links with |
|---|
Main behaviour of home popup :
- Shown on first visit only (tracked using LocalStorage)
- Shown when landing on home only (no permalink, saved-search or trek detail)
- Not shown on mobile (since filters are not shown either)
In order to add a random trek section, add a data-trek attribute with random
value or trek id for specific trek. Markup example :
<div class="span4" data-trek="random">
<a class="pjax profile">
<img class="preview">
<span class="caption">Highlight</span>
</a>
</div>
Illustration images are better viewed if they have the same aspect ratio as trek illustrations.
Additional tourism layers can be added and shown as markers on maps.
- Set
TOURISM_ENABLED = Truein settings. - In Geotrek admin (>0.23), set up some datasources layers, with public among targets.
- Synchronize
It is possible to enable comment threads in detail pages, using Disqus.
- Set
DISQUS_ENABLEDto True - Go to http://disqus.com, and create an account
- Obtain a shortname for the domain name (New Website)
- Specify
DISQUS_SHORTNAMEin settings. - Configure the apparence and default language from Disqus parameters webpage.
Make sure Apache has read access to all files uploaded and created in the media folder.
/fr/image/trek-903939.png ... 404 (Failed) Failed to retrieve http://x.x.x.x/image/trek-903939.png (code: 404) Failed!
Try to access this URL manually and check the logs on the remote server.
make install ./bin/pip install -r dev-requirements.pip
make test
Use development settings :
export DJANGO_SETTINGS_MODULE=rando.settings.dev
Start development instance :
make sync make serve
This application has no database, no ORM. It basically reads files on disk, and serves views. The rest happens on client-side in Javascript.
We chose Django only because we thought that this application may evolve and require Django's ecosystem to be enriched.
Currently, we only have two Django applications as serious dependencies :
- Django-localeurl is great and provides great shortcuts.
- Django-leaflet helps a lot but is not a key stone.
- Ecology by Diego Naive from the Noun Project
- 3D Glasses by Fabio Grande from The Noun Project
- Binoculars by Creatorid'immagine from the Noun Project
- Mont Valier, Couserans, Wikimedia by Valier
- Bus-Stop by Pierre-Luc Auclair from The Noun Project
- Distance by Tommy Lau from The Noun Project
- Ascend by Michael Kussmaul from The Noun Project
- Hiking by Johana from The Noun Project
- Eagle by Steve Laing from The Noun Project
- Eye-In-The-Sky by Cédric Villain from The Noun Project
- Sylvain Beorchia
- Adrien Denat
- Yahya Mzoughi
- Gaël Utard
- Mathieu Leplatre
- Anaïs Peyrucq
- Satya Azemar
- OpenSource - BSD
- Copyright (c) Parc National des Écrins - Parc National du Mercantour - Parco delle Alpi Marittime - Makina Corpus
