index.html

---
layout: default
title: OSM GeoWeek
twitter-description: Sign up for an event near you or plan your own mapathon. You can contribute to mapping projects around the world and explore the power of maps! Get in touch, we're happy to help!
---

<!-- <script>
  const myVar = "{{ site.api }}";
  console.log('print myVar');
  console.log(myVar);  // Outputs: "Hello, Jekyll!"
</script> -->


<!-- <section class='hide-mobile contain'>
  <div class='liner clearfix center fill-darken2 dark pin-top col12'>
    <h2 class='pad2'>
      Teach, Learn and Discover Geography With <a href='http://openstreetmap.org'>OpenStreetMap</a> during <a>Geography Awareness Week</a>, Nov 15-21.
    </h2>
  </div>
  <ul class='slider clearfix pin-top col12'>
    <li><img src='img/splash/usaid.jpg' title='USAID Mapping for Resilience project to support Feed the Future programs while working with students from Khulna University, Bangladesh' /></li>
    <li><img src='img/splash/2015-cusco.png' title='Contribute to local mapping projects on the ground' /></li>
    <li><img src='img/splash/mapapalooza.jpg' title='Have Fun Learning Geography' /></li>
    <li><img src='img/splash/peace-corps-splash.png' title='Building geographic datasets with OpenStreetMap and Field Papers' /></li>
  </ul>
</section> -->

<!--counts of events and projects-->
{% assign event_counter = 0 %}
{% for event in site.categories.event %}
    {% assign event_counter = event_counter | plus: 1 %}
{% endfor %}

{% assign project_counter = 0 %}
{% for project in site.categories.project %}
    {% unless project.tags contains 'notfeatured' %}
        {% assign project_counter = project_counter | plus: 1 %}
    {% endunless %}
{% endfor %}

<div class='site-header contain clearfix'>
  <div class='pad8y dark'>
    <div class='limiter pin-bottom space-bottom8'>

     <h1 class='space-bottom1'>OSM Geography <span class='text-green'>Awareness</span> Week</h1>
    <p class='prose-big space-bottom1'>Nov 13-17, 2023</p>
    <p class='col10 margin2r'>Teachers, students, community groups, and map lovers around the world join together to celebrate geography and make maps with <a href="http://www.openstreetmap.org/about"><strong><span class='text-green'>OpenStreetMap</span></strong></a>, the free and openly editable map of the world.</p>

    <div style="display:inline" tx-content="translate_urls">
    <a tx-content="translate_urls" style="font-size: 16px" href="{{site.baseurl}}/events/" class='pad2x button fill-bold-green'>Find an event</a>
    </div>

    <div style="display:inline" tx-content="translate_urls" >
    <!-- <a tx-content="translate_urls" style="font-size: 16px" href="https://docs.google.com/forms/d/e/1FAIpQLSf6F0v1zy7HVL6OuUhpWl0bK6Rz-Bmhp6lrT_4BKZ3yFcIl3Q/viewform?usp=sf_link" class='pad2x button fill-bold-green'>Submit an event</a> -->
    <a tx-content="translate_urls" style="font-size: 16px" href="{{site.baseurl}}/form/" class='pad2x button fill-bold-green'>Submit an event</a>
    </div>

    </div>

  </div>
</div>


<div class='clearfix col12'>
  <div class='limiter'>
  <div class='pad4y'>
<p class='prose-big quiet'>A global coalition of partners are hosting mapping events at colleges, community centers and other institutions to map places around the globe.

<!--
, following the <a href="http://education.nationalgeographic.com/programs/geographyawarenessweek/">Geography Awareness Week 2015</a> theme, “Explore! The Power of Parks”</p> -->

<!--
<p>OpenStreetMap Institutions will host the flagship mapping party on Thursday, Nov. 15, from 6:30 p.m. to 9 p.m. EST at Peace Corps headquarters in Washington, D.C., with the goal of actively contributing to OpenStreetMap. Admission is free, but interested individuals should <a href="https://www.eventbrite.com/e/access-for-all-osm-geoweek-2015-tickets-19153645068">RSVP online</a>.
</p>
-->

</p>

<div style="display:inline"> On the local level, grassroots organizers around the world are holding 
</div>

<span class="notranslate" id="event_counter"></span> 

<div style="display:inline" tx-content="translate_urls">
<a href="{{site.baseurl}}/events/">events</a> at local schools and community centers or virtually during <strong>#osmgeoweek</strong>. 
If you are organizing an event, or even just thinking about it, get in touch at <a href='mailto:info@teachosm.org '>info@teachosm.org </a>.
 We are excited to host a number of career panels and skill sharing activities this year. If you are interested in sharing at either, please reach out and we’ll connect you to an organizer. If you are a young person just starting your career and you are interested in sharing your story please reach out. We’ll be hosting career panels in English, French, Spanish and Portuguese and are looking for panelists.
</div>

</p>

<!-- There are a collection of <a href="{{site.baseurl}}/projects/"> {{project_counter}} featured Mapping Projects</a> to work on during the week. Organizers and participants can choose projects that strike their interest, most all on the theme ,"Explore! The Power of Maps". As the week progresses, we'll add animations and stats to visualize progress.
</p>

The <a href="{{site.baseurl}}/plan/">Guides</a> are a collection of resources for planning and hosting a local event, and for participants at the event to learn and contribute to OSM. We are also supporting <a href="http://teachosm.org/">TeachOSM</a>, a resource for educators to bring OSM into the classroom.
</p> -->

<p>Follow <a href="https://twitter.com/search?q=%23osmgeoweek&src=typd"><strong>#osmgeoweek</strong></a> on twitter for updates during the week, and share your experiences using the <strong>#osmgeoweek</strong> hashtag. When editing in OpenStreetMap add the <strong>#osmgeoweek2023</strong> hashtag to your changesets to be included in the metrics. For more details about the program and history of Geography Awareness Week, visit the <a href="https://www.nationalgeographic.org/idea/celebrate-geography-awareness-week/">National Geographic Education page</a>. 

</div>
  <div class='col12'>



    <div class='col12 clearfix'>
    <div class='col5 margin1r'>
       <a href='{{site.baseurl}}/events/'><h2>Events</h2></a>
        <p>Find an event near you. Or, let us know if you are planning an event, submit the details or get in touch! Events can be anything that promotes the good use of OpenStreetMap. Consider planning a mapathon, a webinar to show off your latest project, a career panel to talk about how your organization uses OSM, or a skills sharing session to teach others what you know.</p>
    </div>
      <div class='col6 fill-light round pad2 space-bottom4' id='insert3events'>

      </div>
    </div>

    <div class='col12 clearfix space-bottom4'>
      <div class='col5 margin1r'>
         <a href='{{site.baseurl}}/guides/'><h2>Guides</h2></a>
        <p>We have guides that can help you to get started mapping and plan your own event! We have a new <a href='{{site.baseurl}}/guides/mapsme/'>Maps.me guide</a> this year that makes it easy to map your local community.</p>
        </div>
        <div class='col6 fill-light round pad2'>
        {% for post in site.categories.guide limit:3 %}

          {% assign display = null %}
          {% assign ready = null %}
          {% for tag in post.tags %}
            {% if tag == "planner" or tag == "mapper" %}
              {% assign display = true %}
            {% elsif tag == "notfeatured" %}
              {% assign display = false %}
            {% endif %}
          {% endfor %}
          {% if display == true %}

            <h3><a href="{{site.baseurl}}/{{post.permalink}}">{{ post.title }}</a></h3>
            <p class='small'>{{ post.excerpt | markdownify | strip_html | remove: '<p>' | remove: '</p>' }}</p>
          {% endif %}

        {% endfor %}
      </div>
    </div>


  </div>

  </div>


</div>

{% include map.html %}


<script>
$(function(){
    $('.slider').bxSlider({
        pager: false,
        controls: true,
        auto: true,
        captions: true
    });
});
</script>


<script type="text/javascript">

var events;

// use fetch to retrieve it, and report any errors that occur in the fetch operation
// once the products have been successfully loaded and formatted as a JSON object
// using response.json(), run the initialize() function
fetch('{{ site.api }}').then(function(response) {
    if (response.ok) {
        response.json().then(function(json) {
            console.log('response is ok');
            events = json;
            console.log('print events');
            console.log(events);
            console.log(events.length);
            //initialize();

            const filter = events.filter(checkDates);

            function checkDates(a) {
                return new Date(a.date).getTime() > 0;
            }

            console.log('print filter');
            console.log(filter);

            filter.sort(function(a,b){

              if(isNaN(new Date(a.date).getTime())) { 
                return 1-isNaN(new Date(b.date).getTime());
              } else {
                return (new Date(b.date).getTime()) - (new Date(a.date).getTime()); 
              }
              // Turn your strings into dates, and then subtract them
              // to get a value that is either negative, positive, or zero.
              
            });

            document.querySelector('#event_counter').textContent = events.length;

          for (i = 0; i < 3; i++) {

                console.log(filter[i]);

                var t = document.querySelector('#mytemplate');

                t.content.querySelector('#title').textContent = filter[i].name;

                const date = new Date(filter[i].date);
                console.log('print new date');
                console.log(date);

                const year = date.getUTCFullYear();
                console.log('print year');
                console.log(year);
                const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                const monthName = months[date.getUTCMonth()];
                const day = date.getUTCDate();

                const formattedDate = `${monthName} ${day}, ${year}`;
                console.log('print formattedDate');
                console.log(formattedDate);

                t.content.querySelector('#date').textContent = formattedDate;

                // add to document DOM
                var clone = document.importNode(t.content, true); // where true means deep copy
                document.querySelector('#insert3events').appendChild(clone);

            }

        });
    } else {
        console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
    }
});
</script>


<template id="mytemplate">

      <h3 id="title"></h3>
      <p class='small' id="date"></p>

</template>