index.html

  <!DOCTYPE html>
  <html>

  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <title>OpenStreetMap India</title>

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js">
    </script>
    <link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
      rel="stylesheet" />

    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/css/uikit.min.css" />

    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit-icons.min.js"></script>

    <!-- Mastodon Embed -->
    <!-- https://gitlab.com/idotj/mastodon-embed-feed-timeline -->
    <link rel="stylesheet" href="src/mastodon-timeline.min.css" />
    <script async src="src/mastodon-timeline.min.js"></script>

    <style>
      #map {
        height: 100vh;
      }

      @media only screen and (max-width: 960px) {
        #map {
          height: 80vh;
          margin: 20px;
        }
      }

      #sidebar {
        max-height: 100vh;
        overflow: auto;
      }

      @media only screen and (max-width: 960px) {
        #sidebar {
          max-height: inherit;
          /* overflow: auto; */
        }
      }

      #map-overlay {
        z-index: 10;
        visibility: hidden;
      }

      .mapboxgl-ctrl-styles button {
        width: auto;
        display: flex;
        align-items: center;
        padding: 0 8px;
      }
    </style>
  </head>

  <body>


    <div class="uk-grid uk-grid-collapse">
      <div id="sidebar" class="uk-width-1-3@m">

        <div class="uk-padding-small">

          <div>
            <h2 class='uk-margin-remove-bottom'><img style='width:40px'
                src='https://wiki.openstreetmap.org/w/images/0/07/OpenStreetMap-India.svg'>OpenStreetMap <b>India</b></h2>
          </div>
          <p>Join the volunteer community of citizens crowdsourcing a free and open source map of India using the <a
              href='https://www.openstreetmap.org/export#map=15/18.9325/72.8407' taget="_blank">OpenStreetMap Project</a>.
          </p>
          <p>
            <button id='edit-map' class="uk-button uk-button-primary uk-button-small" type="button"><span
                uk-icon="pencil"></span> Edit the
              map</button>
            <a href="https://wiki.openstreetmap.org/wiki/India"><button
                class="uk-button uk-button-default uk-button-small" type="button"><span uk-icon="file-edit"></span>
                Mapping wiki</button></a>
            <a href="https://community.osm.be/resources/asia/india" taget="_blank"><button
                class="uk-button uk-button-default uk-button-small" type="button"><span uk-icon="users"></span> Join
                community</button></a>

          </p>
          <p>
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/d6n29CU2-Sg" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen uk-responsive></iframe>
          </p>
          <p> <button class="uk-button uk-button-default uk-button-small" type="button"
              uk-toggle="target: #modal-about">About OpenStreetMap</button>

            <button class="uk-button uk-button-default uk-button-small" type="button"
              uk-toggle="target: #modal-download">Download India Data</button>
          </p>
          <div class="uk-card uk-card-primary uk-card-body uk-width-1-1 uk-padding-small">
            <p>
              Explore recent mapping activity in India<br>
              <a href='https://osmlab.github.io/show-me-the-way/#bounds=6.7,67.7,36.4,97.4'><button
                  class="uk-button uk-button-default uk-button-small">Live map edits</button></a>
              <a href='http://resultmaps.neis-one.org/osm-discussions?c=India#4/21.17/78.63'><button
                  class="uk-button uk-button-default uk-button-small">Map discussion</button></a>
              <a
                href='https://resultmaps.neis-one.org/osm-suspicious?country=124&hours=48&tsearch=&mappingdays=50&comp=%3E&value=10&action=d&obj=n&filterkey=#5/18.646/77.124'><button
                  class="uk-button uk-button-default uk-button-small">Recent edits</button></a>
              <a
                href='https://metrics.improveosm.org/navigable-roads/total-metrics-per-interval?duration=monthly&locationType=country&locationId=99&unit=km&from=2016-02-14&to=2021-10-03'><button
                  class="uk-button uk-button-default uk-button-small">Data metrics</button></a>
            </p>

            <div class="mt-container">
              <div id="mt-body" class="mt-body" role="feed">
                <div class="loading-spinner"></div>
              </div>
            </div>
          </div>

          <footer>
            <p>
              <a href='https://wiki.openstreetmap.org/wiki/India' target="_blank">Wiki</a> |
              <a href='https://t.me/OSMIndia' target="_blank">Telegram</a> |
              <a href='https://matrix.to/#/#osm-in-general:matrix.org' target="_blank">Matrix</a> |
              <a href='https://github.com/osm-in/openstreetmap.in/' target="_blank">Github</a> |
              <a href='https://en.osm.town/@OSMIndia' rel='me' target="_blank">Mastodon</a> |
              <a href='https://twitter.com/osm_in' target="_blank">Twitter</a>
            </p>
          </footer>

        </div>

      </div>
      <div class="uk-width-2-3@m uk-inline">
        <div id='map' class='uk-height-1-1 '></div>
        <div id="map-overlay" class="uk-overlay uk-position-bottom">
          <div id="map-overlay-content" class="uk-card uk-card-body uk-card-default uk-width-1-2@m">
            <h3 class="uk-card-title">Click locations for details</h3>
          </div>

        </div>
      </div>

    </div>

    <!-- This is the modal -->
    <div id="modal-about" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Why create an open map?</h2>
        <p>
          <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Phwrgb16oEM" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>

        </p>
        <h3>Users of OpenStreetMap data in India</h3>
        <ul>
          <li><a href="https://wiki.openstreetmap.org/wiki/Ola_-_Organised_Editing">Ola</a></li>
          <li><a href="https://wiki.openstreetmap.org/wiki/Swiggy_-_Organised_Editing">Swiggy</a></li>
          <li><a href="https://en.wikipedia.org/wiki/Budge_Budge#/maplink/0">Wikipedia</a></li>
          <li><a href="https://wiki.openstreetmap.org/wiki/Tips_for_new_(Pokemon_Go)_mappers">Pokemon Go</a></li>
          <li><a href='https://wiki.openstreetmap.org/wiki/Mapathon_Keralam'>Kerala State IT Mission</a></li>
          <li><a href='https://onemapggm.mcg.gov.in/citizenportal/'>OneMap Gurugram - Municipal Corporation of
              Gurugram</a></li>
          <li><a href='https://iisc.ac.in/about/general-information/campus-map/'>IISc - Indian Institute of Science</a></li>
          <li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Apple">Apple</a></li>
          <li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Facebook">Facebook</a></li>
          <li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Amazon">Amazon</a></li>
          <li>Justdial</li>
          <li>Zomato</li>
          <li>Pinterest</li>
          <li>TravelGuru</li>
          <li>Yatra.com</li>
          <li>NHAI - National Highways Authority of India</li>
        </ul>
        and many more!

        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
        </p>
      </div>
    </div>

    <!-- This is the modal -->
    <div id="modal-download" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Using OpenStreetMap India map data</h2>
        <img src='./img/vivekananda-rock-memorial-map-data.gif'>
        <p>OpenStreetMap data is available for free download and use per <a
            href='https://www.openstreetmap.org/copyright'>Open Data Commons Open Database License (ODbL)</a>. Various
          data download and export formats based on user needs. Check the <a
            href='https://wiki.openstreetmap.org/wiki/Downloading_data'>wiki for more details.</a></p>
        <p>For a map in Indic languages, check the <a href='https://osm-in.github.io/indic-map/'>Indic OpenStreetMap
            demo</a> and the <a href='https://wiki.openstreetmap.org/wiki/Map_internationalization_(India)'>wiki</a> for
          more resources for local language maps</p>

        <h3>Download free India map data</h3>
        <h4>APIs</h4>
        <ul>
          <li>Query the live map data for specific objects using Overpass API. Updated minutely. `.geojson` `.csv`
            `.gpx` `google earth .kml`
            <uL>
              <li><a href="https://overpass-turbo.eu/s/YoV">Bus stops and bus stations in Chennai</a></li>
              <li><a href="http://overpass-turbo.eu/s/YJB">All forts and castles in India</a></li>
              <li><a href="http://overpass-turbo.eu/s/YJG">CSV list of all railway stations in India</a></li>
            </uL>
          </li>
        </ul>
        <h4>Downloads</h4>
        <ul>
          <li>Request custom data extracts from <a href="https://export.hotosm.org/en/v3/">Humanitarian OpenStreetMap
              Team (HOTOSM)</a>. Updated 2-3 days. `geopackage .gpkg` `shapefiles .shp` `garmin .img` `google earth
            .kml` `.mbtiles` `maps.me .mwm` `osmand .obf`</li>
          <li>India OSM data extract from <a href="https://download.geofabrik.de/asia/india.html">Geofabrik.de</a>.
            Updated daily. `osm pbf` `shapefiles`</li>
          <li>Raw OSM data from <a href="https://www.openstreetmap.org/export#map=15/18.9325/72.8407">OSM.org</a>.
            Limited area. Updated minutely. `osm xml`</li>
          <li>Administrative boundaries clipped to land area from <a href="https://osm-boundaries.com/Map">OSM
              Boundaries</a>. Updated monthly. `.geojson`</li>
          <li>Snapshot of full India outline as per Survey of India from <a
              href="https://github.com/datameet/maps/blob/master/Country/india-osm.geojson">Datameet Maps</a>. Limited
            area. Not updated. `.geojson`</li>
        </ul>

        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
        </p>
      </div>
    </div>


    <script>
      function editMap() {
        console.log(this)
      }
    </script>
    <script src="./dist/main.js"></script>

  </body>

  </html>