{% extends '_base.html' %}{% load humanize partition staticfiles %}

{% block head_title %}{{ block.super }} - Discover the story behind the data{% endblock %}
{% block head_meta_description %}Wazimap provides useful facts about every place in South Africa. Compare places using tables and maps, download data, and embed charts on your site!{% endblock %}
{% block body_id %}homepage{% endblock %}

{% block head_css_extra %}
<link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.css' %}" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.ie.css' %}" />
<![endif]-->
<link href="{% static 'css/vendor/leaflet.label.css' %}" rel="stylesheet" />
{% endblock %}

{% block content_container %}
<div class="content-container clearfix tan-stripe">
    <article id="profile" class="clearfix wrapper">
        <section class="column-full clearfix big-action">
            <h1 class="article-header">Where to?</h1>

            <div id="geography-select-wrapper" class="input-wrapper">
                <input name="geography_select" id="geography-select" type="text" placeholder="Find a place in South Africa..." autocomplete="off" autofocus="on">
                <div class="geolocate-only">
                    <span class="or">or</span>
                    <a href="{% url 'locate' %}" class="action-button"><i class="fa fa-location-arrow"></i> Use your current location</a>
                </div>
                <div>
                    <span class="or">or</span>
                    <a class="action-button" href="/profiles/country-ZA/">Browse South Africa</a>
                </div>
            </div>
        </section>
    </article>
</div>

<div class="content-container clearfix">
    <article class="wrapper">
        <section class="column-full clearfix">
            <h1 class="article-header">Discover the story behind the data.</h1>
            <div id="landing-slippy-map"></div>
        </section>
        <section>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-book"></i>
                    Find facts
                </h3>
                <p>Populations and financial figures are broken down by category: Elections, Demographics, Service Delivery, Economics and Education.</p>
            </div>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-bar-chart-o"></i>
                    Visualize
                </h3>
                <p>Our library of charts gives you insight into data from the places you research. Look for them on profile pages. You can even <a href="{% url 'example_detail' 'embed-charts' %}">embed the charts</a> on your own site.</p>
            </div>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-refresh"></i>
                    Get context
                </h3>
                <p>Pre-computed statistics are presented alongside each data point, so you can see how each place fits into a larger context.</p>
            </div>
        </section>
    </article>
</div>

<div class="content-container clearfix tan-stripe">
    <article id="examples" class="clearfix wrapper">
        <header class="column-full">
            <h1 class="article-header">Using Wazimap</h1>
        </header>
        <section class="card-container clearfix">
            <h2 class="column-full subhead">Finding places</h2>
            <span class="column-half card">
                <img src="{% static 'img/examples/text_search.png' %}">
                <span class="caption">Type in the name or address of a place. Then select the location you are interested in from the dropdown.</span>
            </span>
            <span class="column-half card">
                <img src="{% static 'img/examples/map_search.png' %}">
                <span class="caption">Alternatively, click on the map area you want to go to. The <span class="zoom-in">+</span> and <span class="zoom-out">-</span> buttons zoom in an out.</span>
            </span>
            <h2 class="column-full subhead">Exploring data</h2>
            <span class="column-half card">
                <img src="{% static 'img/examples/section_overview.png' %}">
                <span class="caption">Statistics are broken down into categories, e.g. Service Delivery. Find a key figure for a sub-category on the left.</span>
            </span>
            <span class="column-half card">
                <img src="{% static 'img/examples/hover_over_graph.png' %}">
                <span class="caption">Hover over graphs to see comparisons with the province and country averages.</span>
            </span>
        </section>
    </article>
</div>

<div class="content-container clearfix">
    <article id="examples" class="clearfix wrapper">
        <header class="column-full">
            <h1 class="article-header">About Wazimap</h1>

            <p class="explainer">Wazimap, from the Xhosa word <i>ulwazi</i> for knowledge, is a joint project by <a href="http://www.mediamonitoringafrica.org/" target="_blank">Media Monitoring Africa</a> and <a href="https://www.openup.org.za/" target="_blank">OpenUp</a> that provides easy access to <a href="http://www.statssa.gov.za/" target="_blank">South African census</a> and <a href="http://www.elections.org.za/" target="_blank">elections</a> data.</p>

            <p>Read more about <a href="/about">who we are and why we built Wazimap</a>.

            <h2 class="column-full subhead">Shoulders of Giants</h2>
            <p>Wazimap is based on the amazing <a href="http://censusreporter.org/" target="_blank">Census Reporter</a> and is completely open source. You can <a href="http://wazimap.readthedocs.io/en/latest/">build a Wazimap for your own country</a>.</p>

        </header>
    </article>
</div>
{% endblock %}

{% block body_javascript_extra %}{{ block.super }}
<script src="{% static 'js/vendor/leaflet-0.6.4.js' %}"></script>
<script src="{% static 'js/vendor/topojson.v1.min.js' %}"></script>
<script src="{% static 'js/vendor/leaflet.label.js' %}"></script>
<script>
// show 'use my current location' button
if (Modernizr.geolocation) {
    $('.geolocate-only').show();
}
// geoSelect already defined by widget.geo.select.js
geoSelect.focus()

// draw a map, but only for big displays
var allowMapDrag = (browserWidth > 480) ? true : false;
if (allowMapDrag) {
    var map = L.map('landing-slippy-map', {
        scrollWheelZoom: false,
        zoomControl: false,
        doubleClickZoom: false,
        boxZoom: false,
        keyboard: false,
        dragging: allowMapDrag,
        touchZoom: allowMapDrag
    });

    map.setView({lat: -28.4796, lng: 24.698445}, 5);

    if (allowMapDrag) {
        map.addControl(new L.Control.Zoom({
            position: 'topright'
        }));
    }

    // add imagery
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      subdomains: 'abc',
      maxZoom: 17
    }).addTo(map);

    // add province boundaries
    d3.json("http://mapit.code4sa.org/areas/PR.geojson?generation=1&simplify_tolerance=" + MAPIT_LEVEL_SIMPLIFY['PR'], function(error, geojson) {
        if (!geojson)
            return;

        var featureLayer = L.geoJson(geojson, {
            style: {
                "clickable": true,
                "color": "#00d",
                "fillColor": "#ccc",
                "weight": 1.0,
                "opacity": 0.3,
                "fillOpacity": 0.3,
            },
            onEachFeature: function(feature, layer) {
                var name = feature.properties.name;
                var code = feature.properties.codes.MDB;

                layer.bindLabel(name, {direction: 'auto'});
                layer.on('mouseover', function() {
                    layer.setStyle({
                        "fillColor": "#66c2a5",
                        "fillOpacity": 0.7,
                    });
                });
                layer.on('mouseout', function() {
                    layer.setStyle({
                        "fillColor": "#ccc",
                        "fillOpacity": 0.3,
                    });
                });
                layer.on('click', function() {
                    window.location = '/profiles/province-' + code;
                });
            },
        });
        map.addLayer(featureLayer);
    });
}
</script>
{% endblock %}