index.html

---
published: true
layout: default
slideshow: 
  - slide: "frontpage-dhaka.png"
    title: Urban and Open
    subtitle: Making urban planning data better by making it more open
  - slide: "frontpage-dhaka3.png"
    title: Disaster Risk Mitigation
    subtitle: Leveraging open data sets for disaster risk mitigation modeling and rescue and relief efforts
  - slide: "frontpage-water.png"
    title: "Your World, Your Map"
    subtitle: "Adding society-critical datasets to the the free, citizen-powered <a href=\"//openstreetmap.org/?lat=19.5&lon=88&zoom=5&layers=M\">OpenStreetMap</a>, with global coverage and street level detail"
---

<div class='section dark'>
  <div class='limiter'>
    <div id='tagline' class='centered'>
      <p>Open Cities is a growing partnership that aims to catalyze the creation, management and use of open data to produce innovative solutions for urban planning and resilience challenges across South Asia.</p>
      </div>
    <h4 class='title centered'>Select Case Studies<br /> <span class='subtitle'>Discover innovative uses of open data to empower resilient communities</span></h4>
    <ul class='activities grid clearfix'>
      {% for case in site.categories.casestudy%}
        {% for tag in case.tags %}
          {% if tag == 'splash' %}
            <li>
              <a href='{{site.baseurl}}{{case.url}}' style='background-image:url("http://api.tiles.mapbox.com/v3/{{case.map}}/{{case.center[0].lon}},{{case.center[0].lat}},{{case.center[0].zoom}}/640x300.png");'>
                <div class='overlay'></div>
                <div class='label'>
                  {% for name in site.categories.cities %}
                    {% if name.city == case.city %}
                      {{name.title}}
                    {% endif %}
                  {% endfor %}
                </div>
                <h4 class='case-title'>{{case.title}}</h4>
                <p class='city-desc'>{{case.subtitle | truncate:120}}</p>
                <span class='more'>More</span>
              </a>
            </li>
          {% endif %}
        {% endfor %}
      {% endfor %}
    </ul>

    <div class='centered'>
      <a href='#' class='button toggle'>Load More</a>
    </div>

    <ul class='activities grid toggled clearfix'>
      {% for case in site.categories.casestudy offset:3 %}
      <li>
        <a href='{{site.baseurl}}{{case.url}}' style='background-image:url("http://api.tiles.mapbox.com/v3/{{case.map}}/{{case.center[0].lon}},{{case.center[0].lat}},{{case.center[0].zoom}}/640x300.png");'>
          <div class='overlay'></div>
          <div class='label'>
            {% for name in site.categories.cities %}
              {% if name.city == case.city %}
                {{name.title}}
              {% endif %}
            {% endfor %}
          </div>
          <h4 class='case-title'>
            {{case.title}}</h4>
          <p class='city-desc'>{{case.subtitle | truncate:120}}</p>
          <span class='more'>More</span>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>

<div class='section data-coverage'>
  <h4 class='title centered'>Public contributions improve OpenStreetMap's Global coverage daily</h4>
  <div class='map' id='data-coverage'>
    <small class='attribution'>Map visualizes the density of OpenStreetMap contributions.</small>
  </div>
</div>

<script>
  var map = mapbox.map('data-coverage', mapbox.layer().id('saman.map-nzxr8zw8'), null, [
        easey_handlers.DragHandler(),
        easey_handlers.DoubleClickHandler()
  ]);

  map.setZoomRange(4, 4);
  map.zoom(4).center({
    lat:22.384,
    lon:90.055
  });

  $('.toggle').click(function() {
      $('.toggled').addClass('on');
      $('.toggle').remove();
      return false;
  });

</script>