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

{% block head %}
  {% leaflet_js %}
  {% leaflet_css %}


  <!--HOJAS DE ESTILO PARA HACER LA AGRUPACION DE LOS PUNTOS-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css" />
  <!--HOJA DE ESTILO PARA EL CONTROL DE CAPAS-->
  <link rel="stylesheet" href="{% static 'groupedlayercontrol/leaflet.groupedlayercontrol.min.css' %}">
  <!--HOJA DE ESTILO PARA PERSONALIZAR LAS VENTANAS EMERGENTES-->
  <link rel="stylesheet" href="{% static 'css/popup_h.css'%}">
  <!--HOJAS DE ESTILO PARA EL BUSCADOR DE DATOS-->
  <link rel="stylesheet" href="{% static 'leaflet-search-master/dist/leaflet-search.min.css'%}">
  <link rel="stylesheet" href="{% static 'leaflet-search-master/dist/leaflet-search.src.css'%}">

{% endblock head %}

{% block title %}Geo-MonAmb{% endblock title %}

{% block body %}

<!-- VENTANA MODAL INICIO -->
<div class="modal fade" id="intro" tabindex="-1" role="dialog" aria-labelledby="ModalCentered" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="container-fluid">
        <h5 class="modal-title" >
        <img src="{% static 'img/monamb.png' %}" class="img-fluid"  style="width:90%" alt="MonAmb">
        </h5>

      </div>
      </div>
      <div class="modal-body">
        <p class="text-justify" style="font-family:Arial Narrow;">
          MonAmb es un prototipo de software para la captura, gestión, visualización y análisis de monitoreos ambientales del recurso hídrico en el territorio nacional enfocados al sector de hidrocarburos.
        <br><br>Para mayor información comuníquese con los desarrolladores.</p>
        <div class="text-center" style="font-family:Cambria;font-size:18px;">
        <i>MonAmb <br> Monitoreos Ambientales del Futuro, Aquí y Ahora</i>
        </div>
      </div>
      <div class="modal-footer">
        <div class="mx-auto" style="font-family:Arial Narrow;font-size:12px;">
        MonAmb (c) Todos los derechos reservados
        </div>
      </div>
    </div>
  </div>
</div>

      <!--JS PARA HACER LA AGRUPACION DE LOS PUNTOS-->
      <script src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>
      <!--AJAX es el arte de intercambiar datos con un servidor y actualizar partes de una página web, sin volver a cargar toda la página-->
      <script type="text/javascript" src="{% static 'dist/leaflet.ajax.js'%}"> </script>
      <!--JS PARA EL CONTROL DE LAS CAPAS GEOGRÁFICAS-->
      <script type="text/javascript" src="{% static 'groupedlayercontrol/leaflet.groupedlayercontrol.min.js' %}"> </script>
      <!--JS PARA EL BUSCADOR DE DATOS-->
      <script type="text/javascript" src="{% static 'leaflet-search-master/dist/leaflet-search.src.js' %}"> </script>



      <script type="text/javascript">

      function our_layers (map, options) {

        //CONEXIÓN A BASEMAPS
        var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'),
            grayscale = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'),
            topomap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'),
            image = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'),
            google = L.tileLayer ('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}');

        //ICONO PARA LOS PUNTOS DE MONITOREO
        var blueIcon = L.icon({
          iconUrl: 'static/icono.png',
          iconSize: [38, 38], //TAMAÑO DEL ICONO EN EL MAPA

        });


        //FUNCIÓN DE ESTILO PARA CAMBIAR EL COLOR DE LAS AREAS HIDROGRAFICAS
        function getColor(nombre) {
          if (nombre =='Pacifico'){return '#CCDE1B' }
          else if (nombre =='Caribe'){return "#1E9EAD" }
          else if (nombre == 'Orinoco'){return "#156382"}
          else if (nombre == 'Magdalena Cauca'){return "#154482"}
          else if (nombre == 'Amazonas'){return "#44C594"}
          else {return "#A1A1A1"}
        };

        function styleArea (feature) {
            return {
                fillcolor: getColor(feature.properties.nom_ah),
                weight: 1,
                opacity: 1,
                color: getColor(feature.properties.nom_ah),
                dashArray: '2',
                fillOpacity: 0.7
            }
        };


        //VARIABLE QUE VA A CREAR LA AGRUPACIÓN DE LOS PUNTOS
        var grupo = new L.MarkerClusterGroup({
          maxClusterRadius: 8
        });

        //AÑADIR EL ARCHIVO GEOJSON DE LOS PUNTOS DE MONITOREO AL MAPA
        var marcador = new L.GeoJSON.AJAX ("{% url 'home_app:puntos' %}", {

          //LOS PUNTOS SE MANEJAN DE FORMA DIFERENTE PARA PODER PERSONALIZARLOS.
          //POR DEFECTO SE DIBUJAN MARCADORES SIMPLES PARA LOS PUNTOS GEOJSON
          //PARA MODIFICAR SU ESTILO SE UTILIZAR LA FUNCIÓN pointToLayer, LA CUAL SE PASA A LatLng Y DEVUELVE UNA INSTANCIA DE ILAYER, EN ESTE CASO, UN MARCADOR
          pointToLayer: function (geoJsonPoint, latlng) {
              return L.marker(latlng, {icon: blueIcon});
          },

          //CON LA FUNCION onEachFeature SE LLAMA A CADA ENTIDAD DE LA CAPA GEOJSON
          onEachFeature:function (feature, layer) {
            //PARA GENERAR LAS VENTANAS EMERGENTES CON LA INFORMACION ATRIBUTIVA DE CADA ENTIDAD
            layer.bindPopup(
              "<div style=text-align:center;><h1 style=font-size:1rem;>" + feature.properties.identificacion + "</h1></div><hr style=height: 3px; border-color:white;><p style=text-align:center;>Código: " + feature.properties.pk + "</p>",)
          },
        });

        //CARGAR LOS MARCADORES AL CLUSTER Y MOSTRAR ESTE AGRUPAMIENTO EN EL MAPA
        marcador.on('data:loaded', function () {
          grupo.addLayer(marcador);
          map.addLayer(grupo);
        });

        //AÑADIR EL ARCHIVO GEOJSON DE LAS AREAS HIDROGRAFICAS
        var areas = new L.GeoJSON.AJAX ("{% url 'home_app:areas' %}", {
            style: styleArea,
            onEachFeature:function (feature, layer) {
            layer.bindPopup(
              "<h1 style=font-size:1rem;text-align:center>ÁREAS HIDROGRÁFICA DE COLOMBIA</h1><hr><table style=font-size:0.8rem;><tr><th>ÁREA</th><th>ZONA</th><th>SUBZONA</th></tr><tr><th>"
              + feature.properties.cod_ah + " " + feature.properties.nom_ah + "</th><th>"
              + feature.properties.cod_zh + " " + feature.properties.nom_zh + "</th><th>"
              + feature.properties.cod_szh + " " + feature.properties.nom_szh + "</th></tr></table>"
            ,)
          },
        });

      areas.addTo(map)



      //DEFINIR MAPAS BASE PARA EL CONTROL DE CAPAS
      var baseLayers = {
        "Open Street Map": osm,
    		"Imagen Satelital ESRI": image,
        "Mapa Híbrido Google": google,
        "Mapa Topográfico": topomap,
    		"Mapa Escala de Grises": grayscale
      }

      var groupedOverlays = {
        "Capas geograficas": {
          "Puntos de monitoreo": grupo,
          "Áreas hidrográficas": areas
        }
      }



      L.control.groupedLayers(baseLayers, groupedOverlays,{ collapsed: false }).addTo(map)


       var searchControl = new L.Control.Search({
        layer: grupo,
        propertyName: 'pk',
        circleLocation: true
      });

      map.addControl(searchControl);

      }


      $( document ).ready(function() {
      $('#intro').modal('toggle')
      });



      </script>


    {%leaflet_map "gis" callback='window.our_layers' %}

  {% endblock body %}