Settings and Customization

There are lots of ways that you can customize your Arches-HIP application to best suit your needs.

Most of these will require comfort with modifying Python, HTML, CSS and/or Javascript files but are designed to be simple changes that can be easily applied without diving deep into the rest of the Arches or Arches-HIP code.

Note

In a production environment (using Apache), you will generally need to run collectstatic (https://docs.djangoproject.com/en/1.6/ref/contrib/staticfiles/#collectstatic) and restart Apache to apply these changes.

No action should be required when using the development server (Django).

Home Page and Branding

Modifying the home page and branding of your Arches-HIP application involves editing some simple HTML templates to modify the look and feel. A basic familiarity with HTML and CSS is assumed here.

Your application starts with templates that you can use to start modifying the home page and branding of the web application. These files are contained in the following folder:

my_hip_app/my_hip_app/templates/

You can add your own CSS style rules (applied application wide) in the following file:

my_hip_app/my_hip_app/media/css/package.css

Home Page

index.htm contains the template for the main home page content. You can modify this page to change the image slide show on the home page or modify the saved searches (more on that below).

This is the content of the first page that your users will see, so you’ll probably want to really make it your own. You should consider doing the following:

  • Update the images and text in the layer slider
  • Add you own text to the title block below the layer slider
  • Update the saved searches to suit your data (more on that below)

For example you can add or remove images to the layer slider as blocks of HTML like this:

<div class="ls-layer" style="">

    <!-- Background -->
    <img src="{% static 'img/arches_splash/slide1.jpg' %}" class="ls-s1" style="top: -450px; left: -400px; durationin: 0;" alt="Slide background">

    <!-- Text -->
    <span class="ls-s-1" style="line-height: 42px; font-size:22px; font-weight: 200; color:#fff; top:100px; left: 10px; slidedirection: top; slideoutdirection: bottom; durationin: 0; durationout: 3500;">
    {% trans 'Arches Includes' %}
    </span>

    <span class="ls-s-1" style="line-height: 42px; font-size:42px; font-weight: 200; color:#fff; top:140px; left: 10px; slidedirection: top; slideoutdirection: bottom; durationin: 0; durationout: 3500;">
    {% trans 'Activities and' %} </br>
    {% trans 'Important Historic Events' %}
    </span>

    <!-- Photo Credit -->
    <span class="ls-s-1" style="line-height: 16px; font-size:12px; color:#fff; top:470px; left: 750px; slidedirection: top; slideoutdirection: bottom; durationin: 0; durationout: 3500;">
    {% trans 'Photo: Image Caption, ' %}<a href="javascript:void(0);">{% trans 'Photographer Name' %}</a>
    </span>

</div>

Each block will create an item in the slider. You can modify the src path in the <img> tag and update the text in the tags below it to make the item show an image and message of your choosing.

Header Branding

The templates that manage site-wide branding are footer.htm, header.htm, and copyright.htm. These templates are used by default for branding on all web application pages.

You should probably keep much of the structure of these templates, and simply input your own labels, icons and information as appropriate.

For example, the header logo on all pages can be altered by modifying the following block of HTML start at line 54:

<!-- Default Logo, Replace with your own -->
<a class="navbar-brand" href="{% url 'home' %}">
    <img id="logo-header" class="arches-logo" src="{{ STATIC_URL }}img/arches_logo.png" alt="Logo">
</a>

Copy your logo to the img/ folder and just replace ‘arches_logo.png’ with the file name of your logo. Open main.css in a text editor and search for ‘arches-logo’ (in the initial Arches release its found at line 2530). You can modify:

height: 28px;
margin-top: 13px;

to set the height and position of you logo.

Footer Branding

The footer template sets your contact information (address, telephone number, email) as well as general information including a short description of your Arches implementation and recent activities.

You can modify the default “About Arches” message by opening the footer.htm file in a text editor and finding the following block of html (around line 10):

<!-- Default About Us.  Edit the <p> text below for your own message -->
<div class="col-md-3 sm-margin-bottom-40">
    <div class="heading-footer">
        <h2>About Arches</h2>
    </div>
    <p>Arches is built to create and manage rich inventories of culturally significant resources.</p>
</div>
<!-- End About Us -->

Edit the “About Arches” text to change the title of this section, and the text between the <p> and </p> tags to change the summary.

Your contact information is found here (around line 51):

<!-- Contacts -->
<div class="col-md-3">
    <div class="heading-footer"><h2>Contacts</h2></div>
    <ul class="list-unstyled contacts">
        <li>
            <i class="radius-3x fa fa-map-marker"></i>
            601 Montgomery St, Suite 1095,<br>
            San Francisco, CA 94111
        </li>
        <li>
            <i class="radius-3x fa fa-phone"></i>
            (+123) 456 7890 (main)<br>
            (+123) 456 7891 (mobile)
        </li>
        <li>
            <i class="radius-3x fa fa-globe"></i>
            <a href="#">info@arches.org</a><br>
            <a href="#">www.archesproject.org</a>
        </li>
    </ul>
</div>
<!-- End Contacts -->

Simply update the default address, phone numbers, and email/web address with your own values.

Copyright Branding

The bottom panel contains basic information about the Arches and Arches-HIP versions, as well as a link to the Arches project website. It also presents buttons that allow you to include your social media information. Open copyright.htm in a text editor to update these links (found near line 14):

<div class="col-md-4">
    <ul class="list-inline dark-social pull-right space-bottom-0">
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Facebook" href="#">
                <i class="fa fa-facebook"></i>
            </a>
        </li>
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Twitter" href="#">
                <i class="fa fa-twitter"></i>
            </a>
        </li>
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Google plus" href="#">
                <i class="fa fa-google-plus"></i>
            </a>
        </li>
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Instagram" href="#">
                <i class="fa fa-instagram"></i>
            </a>
        </li>
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Youtube" href="#">
                <i class="fa fa-youtube"></i>
            </a>
        </li>
        <li>
            <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Soundcloud" href="#">
                <i class="fa fa-soundcloud"></i>
            </a>
        </li>
    </ul>
</div>

Find the “href=”#” tag for each button and replace the “#” with the link to your site. Simply delete the buttons that you don’t use. For example, if you want to delete the Soundcloud button, delete the following block:

<li>
    <a data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Soundcloud" href="#">
        <i class="fa fa-soundcloud"></i>
    </a>
</li>

HIP Title Block

Arches-HIP places a bit of text beneath the images on the home page as a way to brief describe your use of Arches-HIP. You can edit this text by opening the index.htm page in a text editor and finding this section of html (found near line 135):

<!--=== HIP Title Block ===-->
<div class="purchase">
    <div class="container">
        <div class="row">
            <div class="col-md-9 animated fadeInLeft">
                <span>{% trans 'Survey Los Angeles' %}</span>
                <p>{% trans "Los Angeles is taking a significant step to protect its rich heritage by embarking on SurveyLA - a citywide survey to identify and document historic resources representing significant themes in the city's history. While Los Angeles has over 1,000 Historic-Cultural Monuments (local landmarks) and 29 Historic Preservation Overlay Zones (historic districts), before SurveyLA only about 15% of the city had been surveyed." %}</p>
            </div>
            <div class="col-md-3 btn-buy animated fadeInRight">
                <a href="#" class="btn-u btn-u-lg"><i class="fa fa-plus-square"></i> {% trans 'Learn More' %}</a>
            </div>
        </div>
    </div>
</div><!--/row-->
<!-- End HIP Title Block -->

To change the title of this section, simply replace ‘Survey Los Angeles’ with your own text. Similarly, replace the text following the <p> tag with your own summary. The “Learn More” button can also be modified. Change the button text if you wish, and replace the “#” with the web address of the page you want your audience to visit.

Of course, you can simply delete this entire block of html if you prefer.

Saved Searches

Saved searches are the links shown on the home and search pages by default to help users find data of particular interest. You will need to update these to be useful for your application.

To do this, start by using the Arches-HIP web application search page to execute the search that you want to save.

For example, you could do a search for the word ‘modern’. You should see the page’s URL update. Copy everything after the ? in the URL; you should get something like this:

page=1&termFilter=%5B%7B%22inverted%22%3Afalse%2C%22type%22%3A%22string%22%2C%22context%22%3A%22%22%2C%22context_label%22%3A%22%22%2C%22id%22%3A%22modern%22%2C%22text%22%3A%22modern%22%2C%22value%22%3A%22modern%22%7D%5D&temporalFilter=%7B%22year_min_max%22%3A%5B%5D%2C%22filters%22%3A%5B%5D%2C%22inverted%22%3Afalse%7D&spatialFilter=%7B%22geometry%22%3A%7B%22type%22%3A%22%22%2C%22coordinates%22%3A%5B%5D%7D%2C%22buffer%22%3A%7B%22width%22%3A%220%22%2C%22unit%22%3A%22ft%22%7D%2C%22inverted%22%3Afalse%7D&mapExpanded=false&timeExpanded=false&include_ids=true

There are two html templates in your project that contain saved searches, these files are:

my_hip_app/my_hip_app/templates/index.htm
my_hip_app/my_hip_app/templates/views/saved-searches.htm

index.htm contains the saved searches for the home page and saved-searches.htm contains the saved searches for the search page.

In both cases, you will find saved searches in blocks that look like this:

<div class="col-sm-4">
    <div class="servive-block servive-block-default">
        <i class="icon-custom rounded-x icon-bg-dark fa fa-trophy"></i>
        <a class= "" href="{% url 'search_home' %}?"><h2 class="txt-color-blue">{% trans 'Saved Search' %}</h2></a>
        <p>{% trans 'Some description here...' %}</p>
    </div>
</div>

To update that block to use the example search above for the word modern, I can simply update the label and description text and paste what I copied above after {% url 'search_home' %}? in the <a> tag’s href attribute, for example:

<div class="col-sm-4">
    <div class="servive-block servive-block-default">
        <i class="icon-custom rounded-x icon-bg-dark fa fa-trophy"></i>
        <a class= "" href="{% url 'search_home' %}?page=1&termFilter=%5B%7B%22inverted%22%3Afalse%2C%22type%22%3A%22string%22%2C%22context%22%3A%22%22%2C%22context_label%22%3A%22%22%2C%22id%22%3A%22modern%22%2C%22text%22%3A%22modern%22%2C%22value%22%3A%22modern%22%7D%5D&temporalFilter=%7B%22year_min_max%22%3A%5B%5D%2C%22filters%22%3A%5B%5D%2C%22inverted%22%3Afalse%7D&spatialFilter=%7B%22geometry%22%3A%7B%22type%22%3A%22%22%2C%22coordinates%22%3A%5B%5D%7D%2C%22buffer%22%3A%7B%22width%22%3A%220%22%2C%22unit%22%3A%22ft%22%7D%2C%22inverted%22%3Afalse%7D&mapExpanded=false&timeExpanded=false&include_ids=true"><h2 class="txt-color-blue">{% trans 'Modern' %}</h2></a>
        <p>{% trans 'Find things that are modern.' %}</p>
    </div>
</div>

Additional Content

Feel free to add additional content to the index.htm page. Simply add your content in the area provided in index.htm:

<!--=== Put Your Addition Content Here
    Use Arches' exist CSS classes or add your own with package.css ===-->
    <div class="">




    </div>
    <!-- End Additional Content -->

Google Analytics

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. It is freely available to anyone with a Google account.

To enable Google Analytics on your web application, you will need to update the GOOGLE_ANALYTICS_TRACKING_ID setting in your application’s settings.py file.

Uncomment this line (remove the starting #) if it is commented, and paste in your own Google Analytics tracking id between the single quotes at the end of the line, eg:

GOOGLE_ANALYTICS_TRACKING_ID = 'my-tracking-id'

Enabling this setting will automatically configure the web application to include the Google Analytics scripts.

Map Settings

Arches-HIP needs to be configured to properly zoom and constrain map interfaces by default. This can be done by simply modifying some settings found in your application’s settings.py file:

#DEFAULT_MAP_X = 0
#DEFAULT_MAP_Y = 0
#DEFAULT_MAP_ZOOM = 0
#MAP_MIN_ZOOM = 0
#MAP_MAX_ZOOM = 19
#MAP_EXTENT = '-13228037.69691764,3981296.0184014924,-13123624.71628009,4080358.407059081'

To use these settings, you will need to ‘uncomment’ them (remove the # at the start of each line), and then change their values to meet your needs.

DEFAULT_MAP_X and DEFAULT_MAP_Y are the x and y (respectively) coordinate values which all maps will be centered on by default. MAP_EXTENT is a string ‘bounding box’ [min x, min y, max x, max y] representing the extent to which all maps will be constrained.

All of these coordinates are expressed in the web standard Spherical Mercator projection (http://spatialreference.org/ref/sr-org/6864/). A simple converter tool to go between Lat/Long and Spherical Mercator coordinates can be found here: http://mal2.ch/stuff/latlontomercator.html

DEFAULT_MAP_ZOOM is the default zoom level that all maps will start on. MAP_MIN_ZOOM and MAP_MAX_ZOOM are the minimum and maximum zoom levels that all maps will allow a user to access. More on zoom levels can be found here: http://openlayers.org/en/v3.3.0/doc/tutorials/concepts.html

By default, Arches-HIP will use Bing services for basemaps and geocoding; if you want to use these, you will need to get a Bing Maps Key (https://msdn.microsoft.com/en-us/library/ff428642.aspx) and add it to your settings.py file like so (by default at line 21):

BING_KEY = 'my-bing-key'

Basemaps

By default, Arches-HIP will supply the application with Bing layers as basemaps, but it is easy to add more basemap layers to Arches-HIP using OpenLayers.

The basemap layers are added in the following file:

my_hip_app/my_hip_app/media/js/map/base-layers.js

You will notice that at the second to last line of this file, an array called baseLayers is returned:

return baseLayers;

You can add more baseLayers by adding an object containing an OpenLayers 3 layer instance to this array before the return statement.

The objects you add should contain the following keys:

  • id: String; a unique id for this layer
  • layer: OpenLayers3 Layer; any valid OpenLayers 3 Layer instance, for more on OpenLayers 3 and layers see: http://openlayers.org/en/v3.3.0/doc/quickstart.html
  • icon: String; a valid path to an image used as an icon in the basemap list
  • name: String; a display name for this layer used in the basemap list

For example, I can add a tile layer as a basemap layer like so:

baseLayers.push({
    id: 'mybasemap',
    name: 'My Tile Basemap',
    icon: arches.urls.media + 'img/map/my_basemap_icon.png',
    layer: new ol.layer.Tile({
        visible: false,
        source: new ol.source.XYZ({
            url: 'http://api.tiles.mapbox.com/v4/my-mapbox-map/{z}/{x}/{y}.png?access_token=my-access-token'
        })
    })
});

return baseLayers;

Overlays

Additional overlays can also be added to the Arches-HIP map interface. This is quite similar to adding basemap layers except it is done in another file and requires a little extra metadata for each layer.

Overlays are added to the following file:

my_hip_app/my_hip_app/media/js/map/layers.js

You will find, again, at the bottom of this file an array being returned, this one called layers. Additional overlay layers can be added to the layers array prior to the line where it is returned.

However, in this case a little extra metadata is passed along with the layer instance in a Javascript object called a LayerModel. The LayerModel is instantiated with an object with the following keys:

  • layer: OpenLayers3 Layer; any valid OpenLayers 3 Layer instance, for more on OpenLayers 3 and layers see: http://openlayers.org/en/v3.3.0/doc/quickstart.html
  • icon: String; a css class used for displaying an icon in the overlay list. CSS rules can be added to package.css as described above
  • name: String; a display name for this layer used in overlay list
  • description: String; an optional description for the layer used in overlay list and for searching
  • categories: Array; an optional list of categories (Strings) used as keywords for layer search
  • onMap: Boolean; true to show this layer on the map by default

For example, you could add a tile layer overlay like so:

layers.push(new LayerModel({
    name: 'My Tile Layer',
    categories: ['cool', 'fun'],
    description: 'My tile layer is very cool',
    icon: 'tile-layer-icon',
    layer: new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://api.tiles.mapbox.com/v4/my-mapbox-map/{z}/{x}/{y}.png?access_token=my-access-token'
        })
    })
}));

return layers;

Resource Map Markers

Resource map markers are shown in the web application using icon fonts for scalability and flexibility.

By default, support is provided for Octicons (https://octicons.github.com/) and Font Awesome (http://fortawesome.github.io/Font-Awesome/).

Arches-HIP provides some simple settings for managing how resource markers are displayed on the map. These settings can be found in your settings.py file and should look something like this:

RESOURCE_MARKER_ICON_UNICODE = '\uf060'
RESOURCE_MARKER_ICON_FONT = 'octicons'
RESOURCE_MARKER_DEFAULT_COLOR = '#C4171D'

These settings manage markers as follows:

  • RESOURCE_MARKER_ICON_UNICODE: the Unicode value of the icon you want to use
  • RESOURCE_MARKER_ICON_FONT: the font name you want to use (‘octicons’ or ‘FontAwesome’)
  • RESOURCE_MARKER_DEFAULT_COLOR: the hex value of the color you want to use by default

For example, if I wanted to symbolize my resource markers as pink Font Awesome house icons (http://fortawesome.github.io/Font-Awesome/icon/home/), I could adjust my settings like so:

RESOURCE_MARKER_ICON_UNICODE = '\uf015'
RESOURCE_MARKER_ICON_FONT = 'FontAwesome'
RESOURCE_MARKER_DEFAULT_COLOR = '#F423FF'

Geocoding

By default, as mentioned above, Arches-HIP uses the Bing geocoder to drive location search on the Map page. This can be customized by applying a new GEOCODING_PROVIDER in your application’s settings.py file.

This setting should point to a python module with a simple interface:

  • the module must have a method called find_candidates

  • find_candidates should accept a single argument, which is the string search query

  • find_candidates should return a list of candidate locations as dictionaries with the following keys:

    • id: a unique id for the location
    • text: a text description (i.e. name or address) of the location
    • geometry: a GeoJSON object (as a python dictionary) containing the location’s geometry
    • score: an optional score value used for sorting (descending) in results drop down

Localization

Arches-HIP has put all of the hooks in place in it’s code and UI templates to handle being localized via Django’s localization API. For more information on how to localize your application using Django, see the Django documentation: https://docs.djangoproject.com/en/1.6/topics/i18n/translation/