index.html

---
layout: default
section_id: home
---


<div class='mod modDefaultSlider'>
  <div class='sequence' data-autostop='on' data-timeout='0'>
    <a class='sequence-prev' href='javascript:void(0);'>
      <span></span>
    </a>
    <a class='sequence-next' href='javascript:void(0);'>
      <span></span>
    </a>
    <ul class='sequence-pagination'>
      {% for slide in site.data.index.slides %}
        {% if forloop.first %}
          {% assign class = 'current' %}
        {% else %}
          {% assign class = '' %}
        {% endif %}
        <li class="{{class}}"></li>
      {% endfor %}
    </ul>
    <ul class='sequence-canvas'>
      {% for slide in site.data.index.slides %}
        {% if forloop.first %}
          {% assign style = 'static' %}
        {% else %}
          {% assign style = '' %}
        {% endif %}

        <li class='frame {{style}} {{ slide.klass }}'>
          <div class='bg' style='background-image: url({{ slide.bg}});'></div>
          <div class='small-title hero-rise {{ slide.small_title.klass }} {{slide.position}}'>
            <div class='row'>
              <div class='small-8 medium-12 large-12 columns hero-padding'>
                <h2 class="{{slide.small_title.font_color}}">{{ slide.small_title.text }}</h2>
              </div>
            </div>
          </div>
          <div class='title hero-rise {{ slide.title.klass }} {{slide.position}}'>
            <div class='row'>
              <div class='small-12 medium-6 large-6 columns hero-padding'>
                <h2 class="{{slide.title.font_color}}">{{ slide.title.text }}</h2>
              </div>
            </div>
          </div>
          <div class='buttons-wrapper hero-rise {{ slide.buttons.klass }}'>
            <div class='row'>
              <div class='large-12 columns hero-button-padding'>
                <div class='two spacing'></div>
                {% for button in slide.buttons.items %}
                  <a class='button {{button.class}}' href='{{ button.link_to }}'>{{ button.text }}</a>
                {% endfor %}
              </div>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>

<div class="three spacing"></div>

<div class="row">
  {% for feature in site.data.index.omk_features %}
  <div class="medium-4 large-4 columns">
    {% include icon-text.html title=feature.title desc=feature.description icon_class=feature.icon delay='0' shape_class='icon-text-circle' %}
  </div>
  {% endfor %}
</div>

<div class='full' style='background: #f5f5f5'>
  <div class='row'>
    <div class='large-12 columns'>
      {% include section-header.html title=site.data.index.how_works.title %}
      <div class='spacing'></div>
      {% for paragraph in site.data.index.how_works.text %}
      <p class="section-padding">
        {{ paragraph }}
      </p>
      {% endfor %}
      <p class="section-padding">
        Traditional field data collection tools for OpenStreetMap have either relied on paper or are too complicated, targeted at GIS professionals, or lack an understanding of traditional survey techniques. As new projects such as <a href="http://www.missingmaps.org" target="_blank">Missing Maps</a> and other humanitarian field data collection projects focus on field data collection the need for a structured, yet simple, OpenStreetMap field data collection tool became apparent. OpenMapKit serves this need.
      </p>
    </div>
  </div>

  <div class='row'>
    <div class='large-12 columns'>
      <p class='centered-text'>
        <a class='button' href='http://posm.io/docs/'>Learn More</a>
      </p>
    </div>
  </div>

</div>

<div class='full'>
  <div class='row'>
    <div class='medium-6 columns text-center'>
      <img class="fadeinleft" alt="" src="images/large_phone.png" />
      <div class='three spacing'></div>
    </div>
    <div class='medium-6 columns service-vertical-spacing'>
      {% for service in site.data.index.services %}
      <div class='fadein mod modIconText' data-delay='{{ 300 | times:forloop.index0 }}'>
        <div class='icon-text-simple'>
          <div class='service-icon {{service.icon}}'></div>
          <h3>{{service.title}}</h3>
          <p>{{service.desc}}</p>
        </div>
        <div class='two spacing'></div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>