{% extends 'base.html' %}
{% load static %}


{% block content %}
<body>
          <header class="text-white body-font ">
            <div class="bg-green-600 shadow">
            <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center navmenu">
              <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                <img src="https://csis.or.id/uploads/images/website/logo.png" alt="" width="100px">
                <span class="ml-3 text-xl text-white">COVID19 Dashbooard by CSIS</span>
              </a>
              <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
                <a class="mr-5 hover:text-white">Index Mobility</a>
                <a class="mr-5 hover:text-white">Inflation Rates</a>
                <a class="mr-5 hover:text-white">Comodity</a>

              </nav>
              
            </div>
          </div>
          </header>
          <section class="text-gray-700 body-font">
              <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
                  <div class=" lg:flex-grow md:w-2/3 lg:p-8 md:p-1 sm:p-1 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center ">
                    <div class='tableauPlaceholder shadow-2xl' id='viz1595054441442' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;InteractiveChart&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_COVID19-MobilityDashboard&#47;InteractiveChart' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;InteractiveChart&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595054441442');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                  </div>
                  <div class="lg:flex-none lg:max-w-lg lg:w-1/3 md:w-2/3 w-full">
                  <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">DASHBOARD COVID-19
                    <br class="hidden lg:inline-block">Index Pergerakan
                  </h1>
                  <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
                  </div>

              </div>
          </section>
          <section class="text-gray-700 bg-gray-300 body-font">
              <div class="container px-5 py-24 mx-auto">
                <div class="flex flex-col">
                  <div class="h-1 bg-gray-200 rounded overflow-hidden">
                    <div class="w-24 h-full bg-teal-500"></div>
                  </div>
                  <div class="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
                    <h1 class="sm:w-2/5 text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0">COVID-19 Indexes</h1>
                    <p class="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">Street art subway tile salvia four dollar toast bitters selfies quinoa yuccie synth meditation iPhone intelligentsia prism tofu. Viral gochujang bitters dreamcatcher.</p>
                  </div>
                </div>
                <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
                  <div class="p-4 md:w-1/2 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden shadow-2xl chrt">
                      <div class='tableauPlaceholder object-cover object-center h-full w-full' id='viz1595048287282' style='position: auto'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;COVIDlast&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_COVID19-MobilityDashboard&#47;COVIDlast' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;COVIDlast&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595048287282');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='570px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">Covid-19 Index</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>
                  </div>
                  <div class="p-4 md:w-1/2 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden chrt shadow-2xl">
                      <div class='tableauPlaceholder' id='viz1595049504979' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;MobilityLast&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_COVID19-MobilityDashboard&#47;MobilityLast' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;MobilityLast&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595049504979');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                      <img alt="content" class="object-cover object-center h-full w-full" src="https://dummyimage.com/1204x504">
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">Mobility Index</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>

                  </div>
                  <div class="p-4 md:w-1/2 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden chrt shadow-2xl">
                      <div class='tableauPlaceholder' id='viz1595049744385' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;NationalMobilityIndex&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_COVID19-MobilityDashboard&#47;NationalMobilityIndex' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;NationalMobilityIndex&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595049744385');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">National Mobility Index</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>

                  </div>
                  <div class="p-4 md:w-1/2 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden chrt shadow-2xl">
                      <div class='tableauPlaceholder' id='viz1595049985863' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;NationalCOVID-19Index&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_COVID19-MobilityDashboard&#47;NationalCOVID-19Index' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_COVID19-MobilityDashboard&#47;NationalCOVID-19Index&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595049985863');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">National Covid Index</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>

                  </div>
                </div>
              </div>
          </section>
          <section class="text-gray-700 body-font overflow-hidden">
              <div class="container px-5 py-24 mx-auto">
                <div class="lg:w-5/5 mx-auto flex flex-wrap">
                  <div class='lg:w-2/3 w-full h-64 object-cover object-center rounded bg-gray-200 shadow-2xl chrt' >
                    <div class='tableauPlaceholder bg-gray-500' id='viz1595000537344' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_InflationRates&#47;FoodInflationRateMoM&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_InflationRates&#47;FoodInflationRateMoM' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_InflationRates&#47;FoodInflationRateMoM&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595000537344');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                  </div>
                  <div class="lg:w-1/3 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
                    <h2 class="text-sm title-font text-gray-500 tracking-widest">CSIS COVID-19 Index</h2>
                      <br>
                    <h1 class="text-gray-900 text-3xl title-font font-medium mb-1">FOOD INFLATION (MoM)</h1>
                    <p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>

                    </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          <section class="text-gray-700 bg-gray-300 body-font overflow-hidden">
              <div class="container px-5 py-24 mx-auto">
                <div class="lg:w-5/5 mx-auto flex flex-wrap">
                  <div class="lg:w-1/3 w-full lg:pr-10 lg:py-6 mt-6 lg:mt-0">
                    <h2 class="text-sm title-font text-gray-500 tracking-widest">CSIS COVID-19 Index</h2>
                    <h1 class="text-gray-900 text-3xl title-font font-medium mb-1">FOOD INFLATION (YoY)</h1>
                      <br>
                    <p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>

                  </div>
                  <div class='lg:w-2/3 w-full h-64 object-cover object-center rounded bg-gray-200 shadow-2xl chrt' >
                    <div class='tableauPlaceholder' id='viz1595053939518' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_InflationRates&#47;FoodInflationRateYoY&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='CSIS_InflationRates&#47;FoodInflationRateYoY' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;CS&#47;CSIS_InflationRates&#47;FoodInflationRateYoY&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1595053939518');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height='540px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
                  </div>

                </div>
              </div>
            </section>
          <section class="text-gray-900 body-font">
            <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
              <iframe class="shadow" width="854" height="480" src="https://www.youtube.com/embed/KLjwZ3O9tDU" frameborder="2"></iframe>
                <div class="text-center lg:w-2/3 w-full">
                <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Microdosing synth tattooed vexillologist</h1>
                <p class="mb-8 leading-relaxed">Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.</p>
               
              </div>
            </div>
          </section>
          <section class="text-gray-700 bg-gray-300 body-font bg-white shadow">
            <div id="map" class="container px-5 py-24 mx-auto" style="">
            </div>
          </section>
          <footer class="text-white body-font">
            <div class="bg-green-600 shadow">
            <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
              <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
                <img src="https://csis.or.id/uploads/images/website/logo.png" alt="" width="100px">
                <!--span class="ml-3 text-xl">tailblocks</span-->
              </a>
              <p class="text-white sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2020 CSIS Indonesia —
                <a href="https://twitter.com/knyttneve" class="text-white ml-1" rel="noopener noreferrer" target="_blank">COVID19 Dashboard</a>
              </p>
              <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
                <a class="text-white">
                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                  </svg>
                </a>
                <a class="ml-3 text-white">
                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
                  </svg>
                </a>
                <a class="ml-3 text-white">
                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                  </svg>
                </a>
                <a class="ml-3 text-white">
                  <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
                    <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
                    <circle cx="4" cy="4" r="2" stroke="none"></circle>
                  </svg>
                </a>
              </span>
            </div>
            </div>
          </footer>

        {% block js %}
          <script type="text/javascript" src="{% static 'peta/indonesia-prov.js' %}"></script>
          <script type="text/javascript">
                var map = L.map('map').setView([-2.546, 118.016], 5);
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    id: 'mapbox/light-v9',
                    tileSize: 512,
                    zoomOffset: -1
                }).addTo(map);

                    // control that shows state info on hover
                var info = L.control();

                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>COVID Index Provinsi Indonesia</h4>' +  (props ?
                        '<b>' + props.Propinsi + '</b></br><p>Index Pergerakan:' + props.indexPergerakan + '</p><p>Intensitas Covid:' + props.intensitasCovid +'</p><p>Jumlah Penduduk: ' + props.jumlahPenduduk + '</p><p>Update: ' + props.update +'</p>'
                        : 'Hover over a state');
                };

                info.addTo(map);


                // get color depending on population index value
                function getColor(d) {
                    return d > 1000 ? '#800026' :
                            d > 500  ? '#BD0026' :
                            d > 200  ? '#E31A1C' :
                            d > 100  ? '#FC4E2A' :
                            d > 50   ? '#FD8D3C' :
                            d > 20   ? '#FEB24C' :
                            d > 10   ? '#FED976' :
                                        '#FFEDA0';
                }

                function style(feature) {
                    return {
                        weight: 2,
                        opacity: 1,
                        color: 'white',
                        dashArray: '3',
                        fillOpacity: 0.7,
                        fillColor: getColor(feature.properties.index)
                    };
                }

                function highlightFeature(e) {
                    var layer = e.target;

                    layer.setStyle({
                        weight: 5,
                        color: '#666',
                        dashArray: '',
                        fillOpacity: 0.7
                    });

                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                        layer.bringToFront();
                    }

                    info.update(layer.feature.properties);
                }

                var geojson;

                function resetHighlight(e) {
                    geojson.resetStyle(e.target);
                    info.update();
                }

                function zoomToFeature(e) {
                    map.fitBounds(e.target.getBounds());
                }

                function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: highlightFeature,
                        mouseout: resetHighlight,
                        click: zoomToFeature
                    });
                }

                geojson = L.geoJson(statesData, {
                    style: style,
                    onEachFeature: onEachFeature
                }).addTo(map);

                map.attributionControl.addAttribution('Index data &copy; <a href="http://csis.or.id/">CSIS Indoneisa</a>');


                var legend = L.control({position: 'bottomright'});

                legend.onAdd = function (map) {

                    var div = L.DomUtil.create('div', 'info legend'),
                        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
                        labels = [],
                        from, to;

                    for (var i = 0; i < grades.length; i++) {
                        from = grades[i];
                        to = grades[i + 1];

                        labels.push(
                            '<i style="background:' + getColor(from + 1) + '"></i> ' +
                            from + (to ? '&ndash;' + to : '+'));
                    }

                    div.innerHTML = labels.join('<br>');
                    return div;
                };

                legend.addTo(map);

              </script>

        {% endblock %}
    </body>

    {% endblock content %}