<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Gramex Mapviewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.write('<link rel="stylesheet" href="../ui/bootstraptheme.css' + location.search + '">')</script>
  <link rel="stylesheet" href="../ui/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../ui/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="../node_modules/prismjs/themes/prism-okaidia.css">
  <link rel="stylesheet" href="../uicomponents/style.css?v=3.19">
  <link rel="stylesheet" href="../ui/leaflet/dist/leaflet.css">
  <script src="../ui/jquery/dist/jquery.min.js"></script>
  <script src="../ui/leaflet/dist/leaflet.js"></script>
  <script src="../ui/d3/build/d3.js"></script>
  <script src="../ui/d3-scale-chromatic/dist/d3-scale-chromatic.min.js"></script>
  <script src="../ui/g1/dist/mapviewer.min.js"></script>
</head>
<body class="show-source" data-spy="scroll" data-target="#toc-nav" data-offset="80">
  <nav class="navbar navbar-dark bg-dark position-fixed w-100 top-nav">
    <h1 class="h5 m-0 text-light" href=".">Gramex Mapviewer</h1>
  </nav>
  <div class="pt-2">&nbsp;</div>
  <div class="container-fluid component d-flex">
    <nav class="mt-3 nav" id="toc-nav">
      <a v-for="entry in toc"
        class="nav-link"
        v-bind:data-level="entry.level"
        v-bind:href="entry.href">${ entry.name }</a>
    </nav>
    <main role="main" class="ml-3">
      <h1 class="toc">Introduction</h1>
      <p>Mapviewer is an abstraction over <a href="http://leafletjs.com/" target="_blank">Leaflet</a> that can create common GIS applications using configurations.</p>
      {% from mapviewer_app import load_page %}
      {% raw load_page('mv-about.html') %}
      {% raw load_page('mv-getting-started.html') %}

      <h1 class="toc">Options</h1>
      <code>Mapviewer</code> options are listed at <a href="https://code.gramener.com/cto/g1#g1mapviewer">g1 docs</a>.

      <h1 class="toc">Features</h1>
      <p><code>Mapviewer</code> currently supports markers, circle markers, choropleth, drilldown abilities.</p>

      {% raw load_page('mv-markers.html') %}
      {% raw load_page('mv-circlemarkers.html') %}
      {% raw load_page('mv-choropleth.html') %}
      {% raw load_page('mv-drilldown.html') %}
      {% raw load_page('mv-basetiles.html') %}

      <h1 class="toc">How-to</h1>
      {% raw load_page('mv-controls.html') %}
      {% raw load_page('mv-colors.html') %}
      {% raw load_page('mv-click-events.html') %}
      {% raw load_page('mv-tooltip.html') %}

      <h1 class="toc">Resources and Tutorials</h1>
      <h2 class="toc">Resources</h2>

      <h3>Mapshaper</h3>
      Use <a href="http://mapshaper.org">mapshaper</a> to view, edit, compress, export map files.
      It accepts multiple file types and exports to <code>GeoJSON</code>, <code>TopoJSON</code>.
      It also has an excellent command-line utility support.

      <h3>QGIS</h3>
      <a href="https://www.qgis.org/en/site/">QGIS</a> is a powerful cross platform software allows viewing,
      editing of shapefiles with layer-level control.
      It has support to export the shapefiles to GeoJSON in custom coordinates.

      <h3>Leaflet</h3>
      leafletjs is a JavaScript library to render maps on web interfaces.

      <h1 class="toc">Tutorials</h1>
      <h2>Video introduction</h2>
      <p class="my-2">Here's a detailed introduction to Mapviewer, its background and possibilities.</p>

      <iframe width="560" height="315" src="https://youtube.com/embed/W32Ts_E7qps"></iframe>

      <p class="my-2">Shapefiles can get large in size due to different reasons:
        original <code>GeoJSON</code> could be of high quality, <code>GeoJSON</code> layer could have
        several attributes which might not be used in your application.</p>

      <h3 class="mt-3">How to optimize your mapfile with mapshaper</h3>
      <p class="my-2">Often your application might not need a detailed view of the map.
        Simplifying the boundaries of the map will still retain geographic boundaries without distortion.
        Mapshaper allows us to simplify maps to great extent using different algorithms.</p>
      {% raw load_page('reduce-mapfile-size.html') %}

      <h3 class="mt-3">Filter attributes in map file in mapshaper</h3>
      <p class="my-2">Depending on the source of your <code>GeoJSON</code> or <code>TopoJSON</code> file,
        it can contain several data attributes. Your application might not need all attributes.
        Mapshaper gives the ability to do this on the browser but via commands.</p>
      {% raw load_page('filter-mapfile.html') %}

      <h3 class="mt-3">Create a custom region map file in QGIS</h3>
      <p class="my-2">India map at state level, district level, block level are commonly used.
        If you were to use a custom region map, say division level.
        How would one go about creating such map? At an abstract level, state contains divisions,
        each division contains districts, each district contains blocks and each block contains villages.</p>
      {% raw load_page('custom-map-file.html') %}
    </main>
  </div><!-- .container-fluid -->

  <!-- Modal -->
  <div class="modal fade" id="source-modal" tabindex="-1" role="dialog" aria-labelledby="source-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="source-modal-label">Component source code</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <pre><code class="language-html source-content"></code></pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="../ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../ui/g1/dist/g1.min.js"></script>
  <script src="../ui/url-search-params/build/url-search-params.js"></script>
  <script src="../node_modules/prismjs/prism.js"></script>
  <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script>
    var q = {},
        _q = (new URLSearchParams(location.search)).entries()
    while (true) {
      var _entry = _q.next()
      if (_entry.done) break
      q[_entry.value[0]] = _entry.value[1]
    }
    var has_query = Object.keys(q).length > 0
    var config = {}
    config.cssurl = '../ui/bootstraptheme.css' + location.search
    var app = new Vue({el: '#theme-picker', data: config, delimiters: ['${', '}']})
    $('[data-spy="scroll"]').scrollspy('refresh')

    var toctree = $('.toc').map(function() {
      var text = $(this).text()
      var slug = text.trim().toLowerCase().replace(/[^a-z0-9_]+/gi, '-')
      $(this).attr('id', slug)
      return {level: 'l' + this.tagName[1], name: text, href: '#' + slug}
    })
    var toc = new Vue({el: '#toc-nav', data: {toc: toctree}, delimiters: ['${', '}']})
  </script>
</body>
</html>
