update with dev

administration/templates/Platform.html

+{% extends "base_top.html" %}
+{% load staticfiles %}
+
+{% block headMedia %}
+    <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+{% endblock %}
+
+{% block messages %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-envelope-o"></i>
+        <span class="label label-success">4</span>
+    </a>
+    <ul class="dropdown-menu">
+        <li class="header">You have 4 messages</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li><!-- start message -->
+                    <a href="#">
+                        <div class="pull-left">
+                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+                        </div>
+                        <h4>
+                            Support Team
+                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                    </a>
+                </li>
+                <!-- end message -->
+                <li>
+                    <a href="#">
+                        <div class="pull-left">
+                            <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                        </div>
+                        <h4>
+                            AdminLTE Design Team
+                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li class="footer"><a href="#">See All Messages</a></li>
+    </ul>
+{% endblock %}
+
+{% block notifications %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-bell-o"></i>
+        <span class="label label-warning">10</span>
+    </a>
+    <ul class="dropdown-menu">
+        <li class="header">You have 10 notifications</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li>
+                    <a href="#">
+                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                    </a>
+                </li>
+
+                </li>
+            </ul>
+        </li>
+        <li class="footer"><a href="#">View all</a></li>
+    </ul>
+{% endblock %}
+
+{% block tasks %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-flag-o"></i>
+        <span class="label label-danger">9</span>
+    </a>
+    <ul c{% load static %}lass="dropdown-menu">
+        <li class="header">You have 9 tasks</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li><!-- Task item -->
+                    <a href="#">
+                        <h3>
+                            Design some buttons
+                            <small class="pull-right">20%</small>
+                        </h3>
+                        <div class="progress xs">
+                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
+                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                                <span class="sr-only">20% Complete</span>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <!-- end task item -->
+            </ul>
+        </li>
+        <li class="footer">
+            <a href="#">View all tasks</a>
+        </li>
+    </ul>
+{% endblock %}
+
+{% block sidebar %}
+    {% include 'administration_aside.html' %}
+{% endblock %}
+
+{% block user %}
+    {% include "user_button.html" %}
+{% endblock %}
+
+{% block content %}
+    <div class="wrapper" style="background-color: #ecf0f5;">
+        <!-- Content Wrapper. Contains page content -->
+        <!-- Main content -->
+        <section class="content">
+            <div class="panel panel-default">
+                <div class="panel-heading">{{ Viewname }}</div>
+                <div class="panel-body text-center">
+                    <div class="row col-md-1 pull-right ">
+                        <a class="btn btn-success btn-sm col-md-6 col-sm-6 col-xs-6 col-lg-6 col-xl-6">New</a>
+                        <br>
+                        <br>
+                    </div>
+
+                    <table data-toggle="table" id="example" class="table table-striped table-bordered"
+                           style="width:100%">
+                        <thead>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Acronym</th>
+                        <th>Status</th>
+                        <th>Actions</th>
+                        </thead>
+                        <tbody>
+                        {% for platform in platforms %}
+                            <tr>
+                                <td>{{ platform.id }}</td>
+                                <td>{{ platform.name }}</td>
+                                <td>{{ platform.acronym }}</td>
+                                <form method="post" action="{% url 'update' %}">
+
+                                    {% csrf_token %}
+                                    <input type="hidden" name="request_path" value="{{ request.path }}">
+                                    <input type="hidden" name="user_id" value="{{ user.user_id }}">
+
+                                    <td>
+                                        <input type="checkbox" name="is_superuser" value="1"
+                                               {% if not request.user.is_superuser %}disabled{% endif %}
+                                               {% if platform.status == True %}checked{% endif %}>
+                                    </td>
+                                    <td>
+                                        <button {% if not request.user.is_superuser %}disabled{% endif %} title="save" type="submit" class="btn btn-success"><i
+                                                class="fa fa-save"></i></button>
+                                    </td>
+                                </form>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
+        <!-- Footer Elements -->
+        <div class="container">
+            <!-- Social buttons
+            <ul class="list-unstyled list-inline text-center">
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-fb mx-1">
+                        <i class="fa fa-faceboo"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-tw mx-1">
+                        <i class="fa fa-twitter"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-gplus mx-1">
+                        <i class="fa fa-google-plus"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-li mx-1">
+                        <i class="fa fa-linkedin"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-dribbble mx-1">
+                        <i class="fa fa-dribbble"> </i>
+                    </a>
+                </li>
+            </ul>
+            <!-- Social buttons -->
+
+        </div>
+        <!-- Footer Elements -->
+
+        <!-- Copyright -->
+        <div class="footer-copyright text-center py-3">© 2019 Copyright:
+            <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
+        </div>
+        <!-- Copyright -->
+
+    </footer>
+    {% if messages %}
+        <div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
+            {% for message in messages %}
+                <div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
+                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                    <strong>{{ message.tags }}!</strong> {{ message }}.
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endblock %}
+
+{% block templates %}{% include "templates.html" %}{% endblock %}
+{% block scripts %}
+    <script>
+        $(document).ready(function () {
+            $('#example').DataTable
+            ({
+                language:
+                    {
+                        "sProcessing": "Procesando...",
+                        "sLengthMenu": "Mostrar _MENU_ registros",
+                        "sZeroRecords": "No se encontraron resultados",
+                        "sEmptyTable": "Ningún dato disponible en esta tabla",
+                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
+                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
+                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
+                        "sInfoPostFix": "",
+                        "sSearch": "Buscar:",
+                        "sUrl": "",
+                        "sInfoThousands": ",",
+                        "sLoadingRecords": "Cargando...",
+                        "oPaginate":
+                            {
+                                "sFirst": "Primero",
+                                "sLast": "Último",
+                                "sNext": "Siguiente",
+                                "sPrevious": "Anterior"
+                            },
+                        "oAria":
+                            {
+                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
+                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
+                            }
+                    },
+                responsive:
+                    {
+                        details:
+                            {
+                                type: 'column',
+                                target: 'tr'
+                            }
+                    },
+                columnDefs:
+                    [{
+                        className: 'control',
+                        orderable: false,
+                        targets: 0
+                    }],
+                order: [1, 'asc']
+            });
+        });
+    </script>
+{% endblock %}
\ No newline at end of file

administration/templates/Process.html

+{% extends "base_top.html" %}
+{% load staticfiles %}
+
+{% block headMedia %}
+    <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+{% endblock %}
+
+{% block messages %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-envelope-o"></i>
+        <span class="label label-success">4</span>
+    </a>
+    <ul class="dropdown-menu">
+        <li class="header">You have 4 messages</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li><!-- start message -->
+                    <a href="#">
+                        <div class="pull-left">
+                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+                        </div>
+                        <h4>
+                            Support Team
+                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                    </a>
+                </li>
+                <!-- end message -->
+                <li>
+                    <a href="#">
+                        <div class="pull-left">
+                            <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                        </div>
+                        <h4>
+                            AdminLTE Design Team
+                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
+                        </h4>
+                        <p>Why not buy a new awesome theme?</p>
+                    </a>
+                </li>
+            </ul>
+        </li>
+        <li class="footer"><a href="#">See All Messages</a></li>
+    </ul>
+{% endblock %}
+
+{% block notifications %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-bell-o"></i>
+        <span class="label label-warning">10</span>
+    </a>
+    <ul class="dropdown-menu">
+        <li class="header">You have 10 notifications</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li>
+                    <a href="#">
+                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                    </a>
+                </li>
+
+                </li>
+            </ul>
+        </li>
+        <li class="footer"><a href="#">View all</a></li>
+    </ul>
+{% endblock %}
+
+{% block tasks %}
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="fa fa-flag-o"></i>
+        <span class="label label-danger">9</span>
+    </a>
+    <ul c{% load static %}lass="dropdown-menu">
+        <li class="header">You have 9 tasks</li>
+        <li>
+            <!-- inner menu: contains the actual data -->
+            <ul class="menu">
+                <li><!-- Task item -->
+                    <a href="#">
+                        <h3>
+                            Design some buttons
+                            <small class="pull-right">20%</small>
+                        </h3>
+                        <div class="progress xs">
+                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
+                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                                <span class="sr-only">20% Complete</span>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <!-- end task item -->
+            </ul>
+        </li>
+        <li class="footer">
+            <a href="#">View all tasks</a>
+        </li>
+    </ul>
+{% endblock %}
+
+{% block sidebar %}
+    {% include 'administration_aside.html' %}
+{% endblock %}
+
+{% block user %}
+    {% include "user_button.html" %}
+{% endblock %}
+
+{% block content %}
+    <div class="wrapper" style="background-color: #ecf0f5;">
+        <!-- Content Wrapper. Contains page content -->
+        <!-- Main content -->
+        <section class="content">
+            <div class="panel panel-default">
+                <div class="panel-heading">{{ Viewname }}</div>
+                <div class="panel-body text-center">
+                    <table data-toggle="table" id="example" class="table table-striped table-bordered"
+                           style="width:100%">
+                        <thead>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Platform</th>
+                        <th>Product Level</th>
+                        <th>Status</th>
+                        <th>Actions</th>
+                        </thead>
+                        <tbody>
+                        {% for process in process %}
+                            <tr>
+                                <td>{{ process.id }}</td>
+                                <td>{{ process.name }}</td>
+                                <td>{{ process.platform_id }}</td>
+                                <td>{{ process.product_level }}</td>
+                                <form method="post" action="{% url 'update' %}">
+
+                                    {% csrf_token %}
+                                    <input type="hidden" name="request_path" value="{{ request.path }}">
+                                    <input type="hidden" name="user_id" value="{{ user.user_id }}">
+
+                                    <td>
+                                        <input type="checkbox" name="status" value="1"
+                                               {% if not request.user.is_superuser %}disabled{% endif %}
+                                               {% if process.status == True %}checked{% endif %}>
+                                    </td>
+                                    <td>
+                                        <button {% if not request.user.is_superuser %}disabled{% endif %} title="save" type="submit" class="btn btn-success"><i
+                                                class="fa fa-save"></i></button>
+                                    </td>
+                                </form>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
+        <!-- Footer Elements -->
+        <div class="container">
+            <!-- Social buttons
+            <ul class="list-unstyled list-inline text-center">
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-fb mx-1">
+                        <i class="fa fa-faceboo"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-tw mx-1">
+                        <i class="fa fa-twitter"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-gplus mx-1">
+                        <i class="fa fa-google-plus"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-li mx-1">
+                        <i class="fa fa-linkedin"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-dribbble mx-1">
+                        <i class="fa fa-dribbble"> </i>
+                    </a>
+                </li>
+            </ul>
+            <!-- Social buttons -->
+
+        </div>
+        <!-- Footer Elements -->
+
+        <!-- Copyright -->
+        <div class="footer-copyright text-center py-3">© 2019 Copyright:
+            <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
+        </div>
+        <!-- Copyright -->
+
+    </footer>
+{% endblock %}
+
+{% block templates %}{% include "templates.html" %}{% endblock %}
+{% block scripts %}
+    <script>
+        $(document).ready(function () {
+            $('#example').DataTable();
+        });
+    </script>
+{% endblock %}
\ No newline at end of file

administration/templates/administration_aside.html

@@ -2,7 +2,7 @@
     <br>
     <ul class="sidebar-menu" data-widget="tree">
         <li>
-            <a class="treeview " href="{{ BASE_URL }}/administration">
+            <a class="treeview " href="{% url 'Dashboard' %}">
                 <i class="fa fa-home"></i>
                 <span>Dashboard</span>
                 <span class="pull-right-container">
@@ -11,7 +11,7 @@
             </a>
         </li>
         <li>
-            <a class="treeview " href="../../administration/request">
+            <a class="treeview " href="{% url 'request' %}">
                 <i class="fa fa-user-plus"></i>
                 <span>Request</span>
                 <span class="pull-right-container">
@@ -20,7 +20,7 @@
             </a>
         </li>
         <li>
-            <a class="treeview " href="../../administration/users">
+            <a class="treeview " href="{% url 'active_users' %}">
                 <i class="fa fa-users"></i>
                 <span>Active users</span>
                 <span class="pull-right-container">
@@ -29,6 +29,24 @@
             </a>
         </li>
         <li>
+            <a class="treeview " href="{% url 'all_process' %}">
+                <i class="fa fa-sync-alt"></i>
+                <span>Catalog of Process</span>
+                <span class="pull-right-container">
+              <span class="label label-primary pull-right"></span>
+            </span>
+            </a>
+        </li>
+        <li>
+            <a class="treeview " href="{% url 'all_platform' %}">
+                <i class="fa fa-satellite"></i>
+                <span>Catalog of Platforms</span>
+                <span class="pull-right-container">
+              <span class="label label-primary pull-right"></span>
+            </span>
+            </a>
+        </li>
+        <!--li>
             <a class="treeview " href="#" onclick="window.history.back();">
                 <i class="fa fa-backward"></i>
                 <span>Back</span>
@@ -36,6 +54,6 @@
               <span class="label label-primary pull-right"></span>
             </span>
             </a>
-        </li>
+        </li-->
     </ul>
 </div>
\ No newline at end of file

administration/templates/dashboard.html

@@ -8,7 +8,8 @@
     <script src="{% static 'js/Chart.min.js' %}"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 {% endblock %}
 
 {% block messages %}
@@ -146,7 +147,7 @@
                         <span class="info-box-text">Active Users</span>
                         <span class="info-box-number">{{ Usuarios }}</span>
                         <span class="info-box-more pull-right">
-                            <a href="../../administration/users" class="small-box-footer">
+                            <a href="{% url 'active_users' %}" class="small-box-footer">
                             More info <i class="fa fa-arrow-circle-right"></i>
                             </a>
                         </span>
@@ -168,7 +169,7 @@
                         <span class="info-box-text">User Registrations</span>
                         <span class="info-box-number">{{ Solicitud }}</span>
                         <span class="info-box-more pull-right">
-                            <a href="../../administration/request" class="small-box-footer">
+                            <a href="{% url 'request' %}" class="small-box-footer">
                             More info <i class="fa fa-arrow-circle-right"></i>
                             </a>
                         </span>
@@ -186,9 +187,7 @@
                         <span class="info-box-text">Processing</span>
                         <span class="info-box-number">{{ Descargando }}</span>
                         <span class="info-box-more pull-right">
-                            <a href="#" class="small-box-footer">
-                            More info <i class="fa fa-arrow-circle-right"></i>
-                            </a>
+
                         </span>
                     </div>
                     <!-- /.info-box-content -->
@@ -204,9 +203,6 @@
                         <span class="info-box-text">Repsat Storage</span>
                         <span class="info-box-number">{{ size_repsat }}</span>
                         <span class="info-box-more pull-right">
-                            <a href="#" class="small-box-footer">
-                            More info <i class="fa fa-arrow-circle-right"></i>
-                            </a>
                         </span>
                     </div>
                     <!-- /.info-box-content -->
@@ -222,9 +218,6 @@
                         <span class="info-box-text">Sentinel Storage</span>
                         <span class="info-box-number">{{ size_sentinel }}</span>
                         <span class="info-box-more pull-right">
-                            <a href="#" class="small-box-footer">
-                            More info <i class="fa fa-arrow-circle-right"></i>
-                            </a>
                         </span>
                     </div>
                     <!-- /.info-box-content -->
@@ -368,19 +361,56 @@
 
     <!-- /.content -->
     </div>
-    </footer>
-    {% if messages %}
-        <div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
-            {% for message in messages %}
-                <div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
-                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-                    <strong>{{ message.tags }}!</strong> {{ message }}.
+
+
+
+
+{% endblock %}
+
+{% block footer %}
+    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
+        <!-- Footer Elements -->
+        <div class="container">
+            <!-- Social buttons
+            <ul class="list-unstyled list-inline text-center">
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-fb mx-1">
+                        <i class="fa fa-faceboo"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-tw mx-1">
+                        <i class="fa fa-twitter"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-gplus mx-1">
+                        <i class="fa fa-google-plus"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-li mx-1">
+                        <i class="fa fa-linkedin"> </i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a class="btn-floating btn-dribbble mx-1">
+                        <i class="fa fa-dribbble"> </i>
+                    </a>
+                </li>
+            </ul>
+            <!-- Social buttons -->
         </div>
-            {% endfor %}
+        <!-- Footer Elements -->
+
+        <!-- Copyright -->
+        <div class="footer-copyright text-center py-3">© 2019 Copyright:
+            <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
         </div>
-    {% endif %}
-    <div id="ol"></div>
+        <!-- Copyright -->
+
 
+    </footer>
 {% endblock %}
 
 {% block templates %}
@@ -407,20 +437,11 @@
                         {% endfor %}
                     ],
                     backgroundColor: [
-                        'rgba(255, 99, 132, 0.2)',
-                        'rgba(54, 162, 235, 0.2)',
-                        'rgba(255, 206, 86, 0.2)',
-                        'rgba(75, 192, 192, 0.2)',
-                        'rgba(153, 102, 255, 0.2)',
-                        'rgba(255, 159, 64, 0.2)'
+                        'rgba(222, 130, 50, 0.2)'
                     ],
                     borderColor: [
-                        'rgba(255,99,132,1)',
-                        'rgba(54, 162, 235, 1)',
-                        'rgba(255, 206, 86, 1)',
-                        'rgba(75, 192, 192, 1)',
-                        'rgba(153, 102, 255, 1)',
-                        'rgba(255, 159, 64, 1)'
+                        'rgba(222, 130, 50,1)',
+
                     ],
                     borderWidth: 1
                 }]
@@ -437,7 +458,6 @@
         });
 
 
-
         // mostrar imagen al dar click en los puntos
         document.getElementById("salesChart").onclick = function (evt) {
             // activePoints = myChart.getElementsAtEvent(evt);
@@ -458,35 +478,34 @@
                     console.log("hola");
                     $('#mostrar').empty();
 
-                    $('#mostrar').append("<table class=\"table table-hover\" id=\"example\">"+
+                    $('#mostrar').append("<table class=\"table table-hover\" id=\"example\">" +
                         "<thead>" +
                         "<tr>" +
                         "<th class=\"text-center\">User ID</th>" +
                         "<th class=\"text-center\">User</th>" +
                         "<th class=\"text-center\">E-Mail</th>" +
                         "<th class=\"text-center\">Purchases</th>" +
-                        "<th class=\"text-center\">Storage</th>" +
+                        //"<th class=\"text-center\">Storage</th>" +
                         "<th class=\"text-center\">Downloads in process</th>" +
                         "</tr>" +
                         "</thead>" +
                         "<tbody id=\"tbody\" class=\"text-center\">");
 
                     $.each(data, function (key, val) {
-                        $("#tbody").append("<tr>"+
-                            "<td>"+val['user_id']+"</td>"+
-                            "<td>"+val['username']+"</td>"+
-                            "<td>"+val['email']+"</td>"+
-                            "<td>"+val['purchases']+"</td>"+
-                            "<td>"+val['storage']+"</td>"+
-                            "<td>"+val['in_process']+"</td>"+
+                        $("#tbody").append("<tr>" +
+                            "<td>" + val['user_id'] + "</td>" +
+                            "<td>" + val['username'] + "</td>" +
+                            "<td>" + val['email'] + "</td>" +
+                            "<td>" + val['purchases'] + "</td>" +
+                            //"<td>"+val['storage']+"</td>"+
+                            "<td>" + val['in_process'] + "</td>" +
                             "</tr>"
                         );
                     });
                     $('#mostrar').append("</tbody>" +
                         "</table>");
 
-                    $('#example').DataTable({
-                    });
+                    $('#example').DataTable({});
                 }
             });
 

administration/templates/users_table.html

@@ -195,51 +195,7 @@
 {% block scripts %}
     <script>
         $(document).ready(function () {
-            $('#example').DataTable
-            ({
-                language:
-                    {
-                        "sProcessing": "Procesando...",
-                        "sLengthMenu": "Mostrar _MENU_ registros",
-                        "sZeroRecords": "No se encontraron resultados",
-                        "sEmptyTable": "Ningún dato disponible en esta tabla",
-                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
-                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
-                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
-                        "sInfoPostFix": "",
-                        "sSearch": "Buscar:",
-                        "sUrl": "",
-                        "sInfoThousands": ",",
-                        "sLoadingRecords": "Cargando...",
-                        "oPaginate":
-                            {
-                                "sFirst": "Primero",
-                                "sLast": "Último",
-                                "sNext": "Siguiente",
-                                "sPrevious": "Anterior"
-                            },
-                        "oAria":
-                            {
-                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
-                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
-                            }
-                    },
-                responsive:
-                    {
-                        details:
-                            {
-                                type: 'column',
-                                target: 'tr'
-                            }
-                    },
-                columnDefs:
-                    [{
-                        className: 'control',
-                        orderable: false,
-                        targets: 0
-                    }],
-                order: [1, 'asc']
-            });
+            $('#example').DataTable();
         });
     </script>
 {% endblock %}
\ No newline at end of file

administration/urls.py

@@ -4,8 +4,10 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.Dashboard, name='Dashboard'),
-    url(r'^request/$', views.Request_users, name='Request'),
+    url(r'^request/$', views.Request_users, name='request'),
     url(r'^update/$', views.update_user, name='update'),
-    url(r'^users/$', views.active_users, name='users'),
+    url(r'^users/$', views.active_users, name='active_users'),
+    url(r'^platform/$', views.all_Platform, name='all_platform'),
+    url(r'^process/$', views.all_Process, name='all_process'),
     url(r'^ws/report_table$', views.wsPurchasesPM, name='wsPurchasesPM'),
 ]
\ No newline at end of file

administration/views.py

@@ -13,7 +13,7 @@ from django.http import HttpResponse, HttpResponseRedirect, HttpRequest, Http404
 # Create your views here.
 from django.views.decorators.csrf import csrf_exempt
 
-from catalog.models import Purchase, Search
+from catalog.models import Purchase, Search, Platform, Process
 from catalog.views import config
 
 USERS_PATH = config['PATHS']['PATH_NAS']
@@ -250,4 +250,32 @@ def best_unit_size(bytes_size):
     return str(round(bu_size,2))+" "+unit
 
 #------------------------------------------------
+def all_Platform (request):
+
+    platforms = Platform.objects.all()
+    platforms_list=[]
+    for platform in platforms:
+        platforms_list.append({
+            "id": platform.id,
+            "name": platform.name,
+            "acronym": platform.acronym,
+            "status": platform.status,
+        })
+
+    return render(request,"Platform.html",{'platforms': platforms_list})
+
+#------------------------------------------------
+def all_Process (request):
+    process = Process.objects.values('id','name','status','platform__name','productLevel')
+    process_list = []
+    for process in process:
+        process_list.append({
+            "id": process['id'],
+            "name": process['name'],
+            "platform_id": process['platform__name'],
+            "product_level": process['productLevel'],
+            "status": process['status'],
+        })
+
+    return render(request, "Process.html", {'process': process_list})
 

catalog/models.py

@@ -10,6 +10,7 @@ from django.db import models
 class Platform(models.Model):
     name = models.CharField(max_length=64)
     acronym = models.CharField(max_length=16)
+    status = models.BooleanField(default=True)
 
 
 class Polygon(models.Model):
@@ -53,6 +54,7 @@ class Process(models.Model):
     name = models.CharField(max_length=50)
     platform = models.ForeignKey(Platform, on_delete=models.CASCADE, default='')
     productLevel = models.CharField(max_length=8, default='')
+    status = models.BooleanField(default=True)
 
 
 class Search(models.Model):

catalog/static/catalog/css/map.css

@@ -33,3 +33,7 @@ html, body
   text-decoration: none;
   color: black;
 }
+
+#cloudPercentageSelector {
+  background: transparent;
+}

catalog/templates/base_top.html

@@ -24,6 +24,9 @@
     <!-- jsPDF -->
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js'></script>
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
     {% block headMedia %}{% endblock %}
 </head>
 <body class="hold-transition skin-yellow sidebar-mini">
@@ -33,7 +36,8 @@
 <div class="wrmapper">
     <header class="main-header">
         <!-- Logo -->
-        <a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %} href="../../../" {% endif %}class="logo">
+        <a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
+           href="../../../" {% endif %}class="logo">
             <!-- mini logo for sidebar mini 50x50 pixels -->
             <span class="logo-mini"><b>G</b>eo</span>
             <!-- logo for regular state and mobile devices -->
@@ -123,8 +127,10 @@
     <aside class="control-sidebar control-sidebar-dark">
         <!-- Create the tabs -->
         <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
-            <li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li>
-            <li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a>
+            <li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i
+                    class="fa fa-globe"></i></a></li>
+            <li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i
+                    class="fa fa-shopping-cart"></i></a>
             </li>
         </ul>
         <!-- Tab panes -->
@@ -197,9 +203,10 @@
 {% block templates %}{% endblock %}
 <!-- T E M P L A T E S -->
 <!-- MODAL 1 -->
-{% block modal1 %}{% endblock %}
+{% block modals %}{% endblock %}
 <!-- MODAL 1 -->
 
+
 <!-- Bootstrap 3.3.7 -->
 <script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
 <!-- AdminLTE App -->
@@ -209,7 +216,19 @@
 <!-- Chartsjs -->
 <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
 
+{% block footer %}{% endblock %}
 {% block scripts %}{% endblock %}
+<div id="ol"></div>
+{% if messages %}
+    <div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
+        {% for message in messages %}
+            <div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
+                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                <strong>{{ message.tags }}!</strong> {{ message }}.
+            </div>
+        {% endfor %}
+    </div>
+{% endif %}
 </body>
 </html>
 

catalog/templates/user_button.html

@@ -15,7 +15,7 @@
     <ul class="sidebar-menu" data-widget="tree">
         <!-- History element -->
         <li>
-            <a class="treeview " href="../../../users">
+            <a class="treeview " href="{% url 'users' %}">
                 <i class="fa fa-user-circle"></i>
                 <span>Profile</span>
                 <span class="pull-right-container">
@@ -26,7 +26,7 @@
         <!-- End History element -->
         <!-- History element -->
         <li>
-            <a class="treeview " href="{{ BASE_URL }}/reports">
+            <a class="treeview " href="{% url 'reports' %}">
                 <i class="fa fa-history"></i>
                 <span>Shopping History</span>
                 <span class="pull-right-container">
@@ -35,7 +35,7 @@
             </a>
         </li>
         <li>
-            <a class="treeview " href="{{ BASE_URL }}/catalog/cart">
+            <a class="treeview " href="{% url 'show-cart' %}">
                 <i class="fa fa-shopping-cart"></i>
                 <span>View shopping cart</span>
                 <span class="pull-right-container">

catalog/views.py

@@ -616,7 +616,6 @@ def Pay(request):
 @csrf_exempt
 def IPN(request):
     PATH_USERS = config['PATHS']['PATH_USERS']
-    print()
     f = open(PATH_USERS+"myfile.txt", "w")
     x = request.POST.dict()
     f.write('variables')

reports/static/reports/css/ol-ext.css

+.ol-control i {
+	cursor: default;
+}
+
+/* Bar style */
+.ol-control.ol-bar {
+  left: 50%;
+	min-height: 1em;
+	min-width: 1em;
+	position: absolute;
+	top: 0.5em;
+	transform: translate(-50%,0);
+	-webkit-transform: translate(-50%,0);
+	white-space: nowrap;
+}
+
+/* Hide subbar when not inserted in a parent bar */
+.ol-control.ol-toggle .ol-option-bar {
+  display: none;
+}
+
+/* Default position for controls */
+.ol-control.ol-bar .ol-bar {
+  position: static;
+}
+.ol-control.ol-bar .ol-control {
+  position: relative;
+	top: auto;
+	left:auto;
+	right:auto;
+	bottom: auto;
+	display: inline-block;
+	vertical-align: middle;
+	background: none;
+	padding: 0;
+	margin: 0;
+	transform: none;
+	-webkit-transform: none;
+}
+.ol-control.ol-bar .ol-bar {
+  position: static;
+}
+.ol-control.ol-bar .ol-control button {
+  margin:2px 1px;
+}
+
+/* Positionning */
+.ol-control.ol-bar.ol-left {
+  left: 0.5em;
+	top: 50%;
+	-webkit-transform: translate(0px, -50%);
+	        transform: translate(0px, -50%);
+}
+.ol-control.ol-bar.ol-left .ol-control {
+  display: block;
+}
+
+.ol-control.ol-bar.ol-right {
+  left: auto;
+	right: 0.5em;
+	top: 50%;
+	-webkit-transform: translate(0px, -50%);
+	        transform: translate(0px, -50%);
+}
+.ol-control.ol-bar.ol-right .ol-control {
+  display: block;
+}
+
+.ol-control.ol-bar.ol-bottom {
+  top: auto;
+	bottom: 0.5em;
+}
+
+.ol-control.ol-bar.ol-top.ol-left,
+.ol-control.ol-bar.ol-top.ol-right {
+  top: 4.5em;
+	-webkit-transform:none;
+	        transform:none;
+}
+.ol-touch .ol-control.ol-bar.ol-top.ol-left,
+.ol-touch .ol-control.ol-bar.ol-top.ol-right {
+  top: 5.5em; 
+}
+.ol-control.ol-bar.ol-bottom.ol-left,
+.ol-control.ol-bar.ol-bottom.ol-right {
+  top: auto;
+	bottom: 0.5em;
+	-webkit-transform:none;
+	        transform:none;
+}
+
+/* Group buttons */
+.ol-control.ol-bar.ol-group {
+  margin: 1px 1px 1px 0;
+}
+.ol-control.ol-bar.ol-right .ol-group,
+.ol-control.ol-bar.ol-left .ol-group {
+  margin: 1px 1px 0 1px;
+}
+
+.ol-control.ol-bar.ol-group button {
+  border-radius:0;
+	margin: 0 0 0 1px;
+}
+.ol-control.ol-bar.ol-right.ol-group button,
+.ol-control.ol-bar.ol-left.ol-group button,
+.ol-control.ol-bar.ol-right .ol-group button,
+.ol-control.ol-bar.ol-left .ol-group button {
+  margin: 0 0 1px 0;
+}
+.ol-control.ol-bar.ol-group .ol-control:first-child > button {
+  border-radius: 5px 0 0 5px;
+}
+.ol-control.ol-bar.ol-group .ol-control:last-child > button {
+  border-radius: 0 5px 5px 0;
+}
+.ol-control.ol-bar.ol-left.ol-group .ol-control:first-child > button,
+.ol-control.ol-bar.ol-right.ol-group .ol-control:first-child > button,
+.ol-control.ol-bar.ol-left .ol-group .ol-control:first-child > button,
+.ol-control.ol-bar.ol-right .ol-group .ol-control:first-child > button {
+  border-radius: 5px 5px 0 0;
+}
+.ol-control.ol-bar.ol-left.ol-group .ol-control:last-child > button,
+.ol-control.ol-bar.ol-right.ol-group .ol-control:last-child > button,
+.ol-control.ol-bar.ol-left .ol-group .ol-control:last-child > button,
+.ol-control.ol-bar.ol-right .ol-group .ol-control:last-child > button {
+  border-radius: 0 0 5px 5px;
+}
+
+/* */
+.ol-control.ol-bar .ol-rotate {
+  opacity:1;
+	visibility: visible;
+}
+.ol-control.ol-bar .ol-rotate button {
+  display: block
+}
+
+/* Active buttons */
+.ol-control.ol-bar .ol-toggle.ol-active > button {
+  background: rgba(60, 136, 0, 0.7)
+}
+.ol-control.ol-bar .ol-toggle.ol-active button:hover {
+  background: rgba(60, 136, 0, 0.7)
+}
+.ol-control.ol-toggle button:disabled {
+  background: rgba(0,60,136,.3);
+}
+
+/* Subbar toolbar */
+.ol-control.ol-bar .ol-control.ol-option-bar {
+  display: none;
+	position:absolute;
+	top:100%;
+	left:0;
+	margin: 5px 0;
+	border-radius: 0;
+	background: rgba(255,255,255, 0.8);
+	/* border: 1px solid rgba(0, 60, 136, 0.5); */
+	-webkit-box-shadow: 0 0 0 1px rgba(0, 60, 136, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5);
+	        box-shadow: 0 0 0 1px rgba(0, 60, 136, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.ol-control.ol-bar .ol-option-bar:before {
+  content: "";
+	border: 0.5em solid transparent;
+	border-color: transparent transparent rgba(0, 60, 136, 0.5);
+	position: absolute;
+	bottom: 100%;
+	left: 0.3em;
+}
+
+.ol-control.ol-bar .ol-option-bar .ol-control {
+  display: table-cell;
+}
+.ol-control.ol-bar .ol-control .ol-bar
+{	display: none;
+}
+.ol-control.ol-bar .ol-control.ol-active > .ol-option-bar {
+  display: block;
+}
+
+.ol-control.ol-bar .ol-control.ol-collapsed ul {
+  display: none;
+}
+
+.ol-control.ol-bar .ol-control.ol-text-button > div:hover,
+.ol-control.ol-bar .ol-control.ol-text-button > div {
+  background: none;
+	color: rgba(0, 60, 136, 0.5);
+	width: auto;
+	min-width: 1.375em;
+	margin: 0;
+}
+
+.ol-control.ol-bar .ol-control.ol-text-button {
+  font-size:0.9em;
+	border-left: 1px solid rgba(0, 60, 136, 0.8);
+	border-radius: 0;
+}
+.ol-control.ol-bar .ol-control.ol-text-button:first-child {
+  border-left:0;
+}
+.ol-control.ol-bar .ol-control.ol-text-button > div {
+	padding: .11em 0.3em;
+	font-weight: normal;
+	font-size: 1.14em;
+	font-family: Arial,Helvetica,sans-serif;
+}
+.ol-control.ol-bar .ol-control.ol-text-button div:hover {
+  color: rgba(0, 60, 136, 1);
+}
+
+.ol-control.ol-bar.ol-bottom .ol-option-bar {
+  top: auto;
+	bottom: 100%;
+}
+.ol-control.ol-bar.ol-bottom .ol-option-bar:before {
+  border-color: rgba(0, 60, 136, 0.5) transparent transparent ;
+	bottom: auto;
+	top: 100%;
+}
+
+.ol-control.ol-bar.ol-left .ol-option-bar {
+  left:100%;
+	top: 0;
+	bottom: auto;
+	margin: 0 5px;
+}
+.ol-control.ol-bar.ol-left .ol-option-bar:before {
+  border-color: transparent rgba(0, 60, 136, 0.5) transparent transparent;
+	bottom: auto;
+	right: 100%;
+	left: auto;
+	top: 0.3em;
+}
+.ol-control.ol-bar.ol-right .ol-option-bar {
+  right:100%;
+	left:auto;
+	top: 0;
+	bottom: auto;
+	margin: 0 5px;
+}
+.ol-control.ol-bar.ol-right .ol-option-bar:before {
+  border-color: transparent transparent transparent rgba(0, 60, 136, 0.5);
+	bottom: auto;
+	left: 100%;
+	top: 0.3em;
+}
+
+.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar,
+.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar {
+  top: 100%;
+	bottom: auto;
+	left: 0.3em;
+	right: auto;
+	margin: 5px 0;
+}
+.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar {
+  right: 0.3em;
+	left: auto;
+}
+.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar:before,
+.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before {
+  border-color: transparent transparent rgba(0, 60, 136, 0.5);
+	bottom: 100%;
+	top: auto;
+	left: 0.3em;
+	right: auto;
+}
+.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before {
+  right: 0.3em;
+	left: auto;
+}
+
+.ol-editbar .ol-button button {
+  position: relative;
+  display: inline-block;
+  font-style: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  vertical-align: middle;
+}
+.ol-editbar .ol-button button:before, 
+.ol-editbar .ol-button button:after {
+  content: "";
+  border-width: 0;
+  position: absolute;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background-color: currentColor;
+}
+.ol-editbar .ol-button button:focus {
+  outline: none;
+}
+
+.ol-editbar .ol-selection > button:before {
+  width: .6em;
+  height: 1em;
+  background-color: transparent;
+  border: .5em solid currentColor;
+  border-width: 0 .25em .65em;
+  border-color: currentColor transparent;
+  -webkit-box-shadow:0 0.6em 0 -0.23em;
+          box-shadow:0 0.6em 0 -0.23em;
+  top: .35em;
+  left: .5em;
+  -webkit-transform: translate(-50%, -50%) rotate(-30deg);
+          transform: translate(-50%, -50%) rotate(-30deg);
+}
+.ol-editbar .ol-selection0 > button:after {
+  width: .28em;
+  height: .6em;
+  background-color: transparent;
+  border: .5em solid currentColor;
+  border-width: 0 .05em .7em;
+  border-color: currentColor transparent;
+  top: .5em;
+  left: .7em;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.ol-editbar .ol-delete button:after,
+.ol-editbar .ol-delete button:before {
+  width: 1em;
+  height: .2em;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+          transform: translate(-50%, -50%) rotate(45deg);
+}
+.ol-editbar .ol-delete button:after {
+  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+          transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.ol-editbar .ol-info button:before {
+  width: .25em;
+  height: .6em;
+  border-radius: .03em;
+  top: .47em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ol-editbar .ol-info button:after {
+  width: .25em;
+  height: .2em;
+  border-radius: .03em;
+  -webkit-box-shadow: -0.1em 0.35em, -0.1em 0.82em, 0.1em 0.82em;
+          box-shadow: -0.1em 0.35em, -0.1em 0.82em, 0.1em 0.82em;
+  top: .12em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.ol-editbar .ol-drawpoint button:before {
+  width: .7em;
+  height: .7em;
+  border-radius: 50%;
+  border: .15em solid currentColor;
+  background-color: transparent;
+  top: .2em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ol-editbar .ol-drawpoint button:after {
+  width: .4em;
+  height: .4em;
+  border: .15em solid currentColor;
+  border-color: currentColor transparent;
+  border-width: .4em .2em 0;
+  background-color: transparent;
+  top: .8em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.ol-editbar .ol-drawline > button:before,
+.ol-editbar .ol-drawpolygon > button:before,
+.ol-editbar .ol-drawhole > button:before {
+  width: .8em;
+  height: .8em;
+  border: .13em solid currentColor;
+  background-color: transparent;
+  border-width: .2em .13em .09em;
+  top: .2em;
+  left: .25em;
+  -webkit-transform: rotate(10deg) perspective(1em) rotateX(40deg);
+          transform: rotate(10deg) perspective(1em) rotateX(40deg);
+}
+.ol-editbar .ol-drawline > button:before {
+  border-bottom: 0;
+}
+.ol-editbar .ol-drawline > button:after,
+.ol-editbar .ol-drawhole > button:after,
+.ol-editbar .ol-drawpolygon > button:after {
+  width: .3em;
+  height: .3em;
+  top: 0.2em;
+  left: .25em;
+  -webkit-box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em;
+          box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em;
+}
+.ol-editbar .ol-drawhole > button:after {
+  -webkit-box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em, 0.25em 0.35em;
+          box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em, 0.25em 0.35em;
+}
+
+
+.ol-editbar .ol-offset > button i,
+.ol-editbar .ol-transform > button i {
+  position: absolute;
+  width: .9em;
+  height: .9em;
+  overflow: hidden;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.ol-editbar .ol-offset > button i{
+  width: .8em;
+  height: .8em;
+}
+
+.ol-editbar .ol-offset > button i:before,
+.ol-editbar .ol-transform > button i:before,
+.ol-editbar .ol-transform > button i:after {
+  content: "";
+  height: 1em;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+          transform: translate(-50%, -50%) rotate(45deg);
+  -webkit-box-shadow: 0.5em 0 0 0.1em, -0.5em 0 0 0.1em;
+          box-shadow: 0.5em 0 0 0.1em, -0.5em 0 0 0.1em;
+  width: .1em;
+  position: absolute;
+  background-color: currentColor;
+}
+.ol-editbar .ol-offset > button i:before{
+  -webkit-box-shadow: 0.45em 0 0 0.1em, -0.45em 0 0 0.1em;
+          box-shadow: 0.45em 0 0 0.1em, -0.45em 0 0 0.1em;
+}
+.ol-editbar .ol-transform > button i:after {
+  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+          transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.ol-editbar .ol-split > button:before {
+  width: .3em;
+  height: .3em;
+  top: .81em;
+  left: .75em;
+  border-radius: 50%;
+  -webkit-box-shadow: 0.1em -0.4em, -0.15em -0.25em;
+          box-shadow: 0.1em -0.4em, -0.15em -0.25em;
+}
+.ol-editbar .ol-split > button:after {
+  width: .8em;
+  height: .8em;
+  top: .15em;
+  left: -.1em;
+  border: .1em solid currentColor;
+  border-width: 0 .2em .2em 0;
+  background-color: transparent;
+  border-radius: .1em;
+  -webkit-transform: rotate(20deg) scaleY(.6) rotate(-45deg);
+          transform: rotate(20deg) scaleY(.6) rotate(-45deg);
+}
+
+.ol-editbar .ol-drawregular > button:before {
+  width: .9em;
+  height: .9em;
+  top: 50%;
+  left: 50%;
+  border: .1em solid currentColor;
+  background-color: transparent;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div {
+  border: .5em solid currentColor;
+  border-color: transparent currentColor;
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: text-bottom;
+}
+.ol-editbar .ol-drawregular .ol-bar:before,
+.ol-control.ol-bar.ol-editbar .ol-drawregular .ol-bar {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ol-editbar .ol-drawregular .ol-bar .ol-text-button {
+  min-width: 6em;
+  text-align: center;
+}
+.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div:first-child {
+  border-width: .5em .5em .5em 0;
+  margin: 0 .5em 0 0;
+}
+.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div:last-child {
+  border-width: .5em 0 .5em .5em;
+  margin: 0 0 0 .5em;
+}
+
+.ol-gauge
+{	top: 0.5em;
+	left: 50%;
+	-webkit-transform: translateX(-50%);
+	transform: translateX(-50%);
+}
+
+.ol-gauge > *
+{	display: inline-block;
+	vertical-align: middle;
+}
+.ol-gauge > span
+{
+	margin: 0 0.5em;
+}
+.ol-gauge > div
+{	width: 200px;
+	border: 1px solid rgba(0,60,136,.5);
+	border-radius: 3px;
+	padding:1px;
+}
+.ol-gauge button
+{	height: 0.8em;
+	margin:0;
+	max-width:100%;
+}
+
+.ol-control.ol-bookmark 
+{	top: 0.5em;
+	left: 3em;
+}
+.ol-control.ol-bookmark button
+{	position: relative;
+}
+.ol-control.ol-bookmark > button::before
+{	content: "";
+	position: absolute;
+	border-width: 10px 5px 4px;
+	border-style: solid;
+	border-color: #fff;
+	border-bottom-color: transparent;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	height: 0;
+}
+
+.ol-control.ol-bookmark > div
+{	display: none;
+	min-width: 5em;
+}
+.ol-control.ol-bookmark input
+{	font-size: 0.9em;
+	margin: 0.1em 0 ;
+	padding: 0 0.5em;
+}
+.ol-control.ol-bookmark ul
+{	margin:0;
+	padding: 0;
+	list-style: none;
+	min-width: 10em;
+}
+.ol-control.ol-bookmark li
+{	color: rgba(0,60,136,0.8);
+	font-size: 0.9em;
+	padding: 0 0.2em 0 0.5em;
+	cursor: default;
+	clear:both;
+}
+
+.ol-control.ol-bookmark li:hover
+{	background-color: rgba(0,60,136,.5);
+	color: #fff;
+}
+
+.ol-control.ol-bookmark > div button
+{	width: 1em;
+	height: 0.8em;
+	float: right;
+	background-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+}
+.ol-control.ol-bookmark > div button:before
+{	content: "\2A2F";
+    color: #936;
+	font-size: 1.2em;
+	line-height: 1em;
+	border-radius: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.ol-bookmark ul li button,
+.ol-bookmark input
+{	display: none;
+}
+.ol-bookmark.ol-editable ul li button,
+.ol-bookmark.ol-editable input
+{	display: block;
+}
+
+
+.ol-control.ol-bar.ol-geobar .ol-control {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.ol-control.ol-bar.ol-geobar .ol-bar {
+  display: none;
+}
+.ol-bar.ol-geobar.ol-active .ol-bar {
+  display: inline-block;
+}
+
+.ol-bar.ol-geobar .geolocBt button:before,
+.ol-bar.ol-geobar .geolocBt button:after {
+  content: "";
+  display: block;
+  position: absolute;
+  border: 1px solid transparent;
+  border-width: 0.3em 0.8em 0 0.2em;
+  border-color: #fff transparent transparent;
+  -webkit-transform: rotate(-30deg);
+  transform: rotate(-30deg);
+  top: .45em;
+  left: 0.15em;
+  font-size: 1.2em;
+}
+.ol-bar.ol-geobar .geolocBt button:after {
+  border-width: 0 0.8em .3em 0.2em;
+  border-color: transparent transparent #fff;
+	-webkit-transform: rotate(-61deg);
+	transform: rotate(-61deg);
+}
+
+.ol-bar.ol-geobar .startBt button:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  background-color: #800;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+.ol-bar.ol-geobar .pauseBt button:before,
+.ol-bar.ol-geobar .pauseBt button:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: .25em;
+  height: 1em;
+  background-color: #fff;
+  top: 50%;
+  left: 35%;
+  -webkit-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+.ol-bar.ol-geobar .pauseBt button:after {
+  left: 65%;
+}
+
+.ol-control.ol-bar.ol-geobar .centerBt,
+.ol-control.ol-bar.ol-geobar .pauseBt,
+.ol-bar.ol-geobar.pauseTrack .startBt,
+.ol-bar.ol-geobar.centerTrack .startBt,
+.ol-bar.ol-geobar.centerTrack.pauseTrack .pauseBt,
+.ol-bar.ol-geobar.centerTrack .pauseBt {
+  display: none;
+}
+.ol-bar.ol-geobar.pauseTrack .pauseBt,
+.ol-bar.ol-geobar.centerTrack .centerBt{
+  display: inline-block;
+}
+
+.ol-control.ol-globe
+{	position: absolute;
+	left: 0.5em;
+	bottom: 0.5em;
+	border-radius: 50%;
+	opacity: 0.7;
+	transform: scale(0.5);
+	transform-origin: 0 100%;
+	-webkit-transform: scale(0.5);
+	-webkit-transform-origin: 0 100%;
+}
+.ol-control.ol-globe:hover
+{	opacity: 0.9;
+}
+
+.ol-control.ol-globe .panel
+{	display:block;
+	width:170px;
+	height:170px;
+	background-color:#fff;
+	cursor: pointer;
+	border-radius: 50%;
+	overflow: hidden;
+	-webkit-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
+	        box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
+}
+.ol-control.ol-globe .panel .ol-viewport
+{	border-radius: 50%;
+}
+
+.ol-control.ol-globe .ol-pointer
+{	display: block;
+	background-color: #fff;
+	width:10px;
+	height: 10px;
+	border:10px solid red;
+	position: absolute;
+	top: 50%;
+	left:50%;
+	transform: translate(-15px, -40px);
+	-webkit-transform: translate(-15px, -40px);
+	border-radius: 50%;
+	z-index:1;
+	transition: opacity 0.15s, top 0s, left 0s;
+	-webkit-transition: opacity 0.15s, top 0s, left 0s;
+}
+.ol-control.ol-globe .ol-pointer.hidden
+{	opacity:0;
+	transition: opacity 0.15s, top 3s, left 5s;
+	-webkit-transition: opacity 0.15s, top 3s, left 5s;
+}
+
+.ol-control.ol-globe .ol-pointer::before
+{	border-radius: 50%;
+	-webkit-box-shadow: 6px 6px 10px 5px #000;
+	        box-shadow: 6px 6px 10px 5px #000;
+	content: "";
+	display: block;
+	height: 0;
+	left: 0;
+	position: absolute;
+	top: 23px;
+	width: 0;
+}
+.ol-control.ol-globe .ol-pointer::after
+{	content:"";
+	width:0;
+	height:0;
+	display: block;
+	position: absolute;
+	border-width: 20px 10px 0;
+	border-color: red transparent;
+	border-style: solid;
+	left: -50%;
+	top: 100%;
+}
+
+.ol-control.ol-globe .panel::before {
+  border-radius: 50%;
+  -webkit-box-shadow: -20px -20px 80px 2px rgba(0, 0, 0, 0.7) inset;
+          box-shadow: -20px -20px 80px 2px rgba(0, 0, 0, 0.7) inset;
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+.ol-control.ol-globe .panel::after {
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
+          box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
+  content: "";
+  display: block;
+  height: 0;
+  left: 23%;
+  position: absolute;
+  top: 20%;
+  -webkit-transform: rotate(-40deg);
+          transform: rotate(-40deg);
+  width: 20%;
+  z-index: 1;
+}
+
+
+.ol-control.ol-globe.ol-collapsed .panel
+{	display:none;
+}
+
+.ol-control-top.ol-globe
+{	bottom: auto;
+	top: 5em;
+	transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+}
+.ol-control-right.ol-globe
+{	left: auto;
+	right: 0.5em;
+	transform-origin: 100% 100%;
+	-webkit-transform-origin: 100% 100%;
+}
+.ol-control-right.ol-control-top.ol-globe
+{	left: auto;
+	right: 0.5em;
+	transform-origin: 100% 0;
+	-webkit-transform-origin: 100% 0;
+}
+
+.ol-gridreference
+{	background: #fff;
+	border: 1px solid #000;
+	overflow: auto;
+	max-height: 100%;
+	top:0;
+	right:0;
+}
+.ol-gridreference input
+{	width:100%;
+}
+.ol-gridreference ul
+{	margin:0;
+	padding:0;
+	list-style: none;
+} 
+.ol-gridreference li
+{	padding: 0 0.5em;
+	cursor: pointer;
+}
+.ol-gridreference ul li:hover 
+{	background-color: #ccc;
+}
+.ol-gridreference li.ol-title,
+.ol-gridreference li.ol-title:hover
+{	background:rgba(0,60,136,.5);
+	color:#fff;
+	cursor:default;
+}
+.ol-gridreference ul li .ol-ref
+{	margin-left: 0.5em;
+}
+.ol-gridreference ul li .ol-ref:before
+{	content:"(";
+}
+.ol-gridreference ul li .ol-ref:after
+{	content:")";
+}
+
+.ol-control.ol-imageline {
+  bottom:0;
+  left: 0;
+  right: 0;
+  padding: 0;
+  overflow: visible;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+.ol-control.ol-imageline.ol-collapsed {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+.ol-imageline > div {
+  height: 4em;
+  position: relative;
+  white-space: nowrap;
+  scroll-behavior: smooth;
+  overflow: hidden;
+  width: 100%;
+}
+.ol-imageline.ol-touch > div {
+  overflow-x: auto;
+}
+.ol-imageline > div.ol-move {
+  scroll-behavior: unset;
+}
+
+.ol-control.ol-imageline button {
+  position: absolute;
+  top: -1em;
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+  margin: .65em;
+  -webkit-box-shadow: 0 0 0 0.15em rgba(255,255,255,.4);
+          box-shadow: 0 0 0 0.15em rgba(255,255,255,.4);
+}
+.ol-control.ol-imageline button:before {
+  content: '';
+  position: absolute;
+  -webkit-transform: translate(-50%, -50%) rotate(135deg);
+          transform: translate(-50%, -50%) rotate(135deg);
+  top: 40%;
+  left: 50%;
+  width: .4em;
+  height: .4em;
+  border: .1em solid currentColor;
+  border-width: .15em .15em 0 0;
+}
+.ol-control.ol-imageline.ol-collapsed button:before {
+  top: 60%;
+  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+          transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.ol-imageline,
+.ol-imageline:hover {
+  background-color: rgba(0,0,0,.75);
+}
+
+.ol-imageline.ol-arrow:after,
+.ol-imageline.ol-arrow:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: .2em;
+  border-color: #fff #000;
+  border-width: 1em .6em 1em 0;
+  border-style: solid;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  z-index: 1;
+  opacity: .8;
+  pointer-events: none;
+  -webkit-box-shadow: -0.6em 0 0 1em #fff;
+          box-shadow: -0.6em 0 0 1em #fff;
+}
+.ol-imageline.ol-arrow:after {
+  border-width: 1em 0 1em .6em;
+  left: auto;
+  right: .2em;
+  -webkit-box-shadow: 0.6em 0 0 1em #fff;
+          box-shadow: 0.6em 0 0 1em #fff;
+}
+
+.ol-imageline .ol-image {
+  position: relative;
+  height: 100%;
+  display: inline-block;
+  cursor: pointer;
+}
+.ol-imageline img {
+  max-height: 100%;
+  border: .25em solid transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  opacity: 0;
+  -webkit-transition: 1s;
+  transition: 1s;
+}
+.ol-imageline img.ol-loaded {
+  opacity:1;
+}
+
+.ol-imageline .ol-image.select {
+  background-color: #fff;
+}
+.ol-imageline .ol-image span {
+  position: absolute;
+  width: 125%;
+  max-height: 2.4em;
+  left: 50%;
+  bottom: 0;
+  display: none;
+  color: #fff;
+  background-color: rgba(0,0,0,.5);
+  font-size: .8em;
+  overflow: hidden;
+  white-space: normal;
+  text-align: center;
+  line-height: 1.2em;
+  -webkit-transform: translateX(-50%) scaleX(.8);
+          transform: translateX(-50%) scaleX(.8);
+}
+/*
+.ol-imageline .ol-image.select span,
+*/
+.ol-imageline .ol-image:hover span {
+  display: block;
+}
+
+.ol-control.ol-routing.ol-isochrone .ol-method-time,
+.ol-control.ol-routing.ol-isochrone .ol-method-distance,
+.ol-control.ol-routing.ol-isochrone > button {
+  position: relative;
+}
+.ol-control.ol-routing.ol-isochrone .ol-method-time:before,
+.ol-control.ol-routing.ol-isochrone > button:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border: .1em solid currentColor;
+  width: .8em;
+  height: .8em;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 -0.5em 0 -0.35em, 0.4em -0.35em 0 -0.35em;
+          box-shadow: 0 -0.5em 0 -0.35em, 0.4em -0.35em 0 -0.35em;
+  clip: unset;
+}
+.ol-control.ol-routing.ol-isochrone .ol-method-time:after,
+.ol-control.ol-routing.ol-isochrone > button:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(-60deg);
+          transform: translate(-50%, -50%) rotate(-60deg);
+  border-radius: 50%;
+  border: .3em solid transparent;
+  border-right-color: currentColor;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  clip: unset;
+}
+
+.ol-control.ol-routing.ol-isochrone .ol-method-distance:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(-30deg);
+          transform: translate(-50%, -50%) rotate(-30deg);
+  width: 1em;
+  height: .5em;
+  border: .1em solid currentColor;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box
+}
+.ol-control.ol-routing.ol-isochrone .ol-method-distance:after {
+  content: '';
+  position: absolute;
+  width: .1em;
+  height: .15em;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%) rotate(-30deg);
+          transform: translate(-50%, -50%) rotate(-30deg);
+  -webkit-box-shadow: inset 0 -0.15em, 0 0.1em, 0.25em 0.1em, -0.25em 0.1em;
+          box-shadow: inset 0 -0.15em, 0 0.1em, 0.25em 0.1em, -0.25em 0.1em;
+}
+
+.ol-control.ol-routing.ol-isochrone .ol-direction-direct:before,
+.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 30%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: .3em;
+  height: .3em;
+  border-radius: 50%;
+  border: .1em solid currentColor;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-shadow: 0.25em 0 0 -0.05em;
+          box-shadow: 0.25em 0 0 -0.05em;
+}
+.ol-control.ol-routing.ol-isochrone .ol-direction-direct:after,
+.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 70%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border: .4em solid transparent;
+  border-width: .4em 0 .4em .4em;
+  border-color: transparent currentColor;
+}
+.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
+  border-width: .4em .4em .4em 0;
+}
+
+.ol-control.ol-isochrone.ol-collapsed .content {
+  display: none;
+}
+.ol-control.ol-isochrone input[type="number"] {
+  width: 3em;
+  text-align: right;
+  margin: 0 .1em;
+}
+.ol-control.ol-isochrone .ol-distance input[type="number"] {
+  width: 5em;
+}
+
+.ol-isochrone .ol-time,
+.ol-isochrone .ol-distance {
+  display: none;
+}
+.ol-isochrone .ol-time.selected,
+.ol-isochrone .ol-distance.selected {
+  display: block;
+}
+
+.ol-control.ol-layerswitcher-popup
+{	position: absolute;
+	right: 0.5em;
+	text-align: left;
+	top: 3em;
+}
+.ol-control.ol-layerswitcher-popup .panel 
+{	clear:both;
+	background:#fff;
+}
+
+.ol-layerswitcher-popup .panel
+{	list-style: none;
+	padding: 0.25em;
+	margin:0;
+	overflow: hidden;
+}
+
+.ol-layerswitcher-popup .panel ul
+{	list-style: none;
+	padding: 0 0 0 20px;
+	overflow: hidden;
+}
+
+.ol-layerswitcher-popup.ol-collapsed .panel
+{	display:none;
+}
+.ol-layerswitcher-popup.ol-forceopen .panel
+{	display:block;
+}
+
+.ol-layerswitcher-popup button 
+{	background-color: white;
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
+	background-position: center;
+	background-repeat: no-repeat;
+	float: right;
+	height: 38px;
+	width: 38px;
+}
+
+.ol-layerswitcher-popup li
+{	color:#369;
+	padding:0.25em 1em;
+	font-family:"Trebuchet MS",Helvetica,sans-serif;
+	cursor:pointer;
+}
+.ol-layerswitcher-popup li.ol-header
+{	display: none;
+}
+.ol-layerswitcher-popup li.select
+{	background:rgba(0, 60, 136, 0.7);
+	color:#fff;
+}
+.ol-layerswitcher-popup li:hover
+{	background:rgba(0, 60, 136, 0.9);
+	color:#fff;
+}
+
+.ol-control.ol-layerswitcher
+{	position: absolute;
+	right: 0.5em;
+	text-align: left;
+	top: 3em;
+	max-height: calc(100% - 6em);
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+	overflow: hidden;
+}
+.ol-control.ol-layerswitcher .ol-switchertopdiv,
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv
+{	display: block
+}
+.ol-control.ol-layerswitcher.ol-collapsed .ol-switchertopdiv,
+.ol-control.ol-layerswitcher.ol-collapsed .ol-switcherbottomdiv
+{	display: none;
+}
+.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switchertopdiv,
+.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switcherbottomdiv
+{	display: block;
+}
+
+.ol-control.ol-layerswitcher .ol-switchertopdiv,
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv
+{	position: absolute;
+	top:0;
+	left:0;
+	right:0;
+	height: 45px;
+	background: #fff; 
+	z-index:2;
+	opacity:1;
+	cursor: pointer;
+	border-top:2px solid transparent;
+	border-bottom:2px solid #369;
+	margin:0 2px;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv
+{	top: auto;
+	bottom: 0;
+	height: 2em;
+	border-top:2px solid #369;
+	border-bottom:2px solid transparent;
+}
+.ol-control.ol-layerswitcher .ol-switchertopdiv:before,
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before
+{	content:"";
+	position: absolute;
+	left:50%;
+	top:50%;
+	border:10px solid transparent;
+	width:0;
+	height:0;
+	transform: translate(-50%, -50%);
+	-webkit-transform: translate(-50%, -50%);
+	opacity:0.8;
+}
+
+.ol-control.ol-layerswitcher .ol-switchertopdiv:hover:before,
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv:hover:before
+{	opacity:1;
+}
+.ol-control.ol-layerswitcher .ol-switchertopdiv:before
+{	border-bottom-color: #369;
+	border-top: 0;
+}
+.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before
+{	border-top-color: #369;
+	border-bottom: 0;
+}
+
+.ol-control.ol-layerswitcher .panel 
+{	background-color: #fff;
+	border-radius: 0 0 2px 2px;
+	clear: both;
+	display: block; /* display:block to show panel on over */
+}
+
+.ol-layerswitcher .panel
+{	list-style: none;
+	padding: 0.5em 0.5em 0;
+	margin:0;
+	overflow: hidden;
+	font-family: Tahoma,Geneva,sans-serif;
+	font-size:0.9em;
+	-webkit-transition: top 0.3s;
+	transition: top 0.3s;
+	position: relative;
+	top:0;
+}
+
+.ol-layerswitcher .panel ul
+{	list-style: none;
+	padding: 0 0 0 20px;
+	overflow: hidden;
+	clear: both;
+}
+
+/** Customize checkbox
+*/
+.ol-layerswitcher input[type="radio"],
+.ol-layerswitcher input[type="checkbox"]
+{	display:none;
+}
+
+.ol-layerswitcher .panel li
+{	-weblit-transition: -webkit-transform 0.2s linear;
+	-webkit-transition: -webkit-transform 0.2s linear;
+	transition: -webkit-transform 0.2s linear;
+	transition: transform 0.2s linear;
+	transition: transform 0.2s linear, -webkit-transform 0.2s linear;
+	clear: both;
+	display: block;
+	border:1px solid transparent;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+/* drag and drop */
+.ol-layerswitcher .panel li.drag
+{	opacity: 0.5;
+	transform:scale(0.8);
+	-webkit-transform:scale(0.8);
+}
+.ol-dragover
+{	background:rgba(51,102,153,0.5);
+	opacity:0.8;
+}
+.ol-layerswitcher .panel li.forbidden,
+.forbidden .ol-layerswitcher-buttons div,
+.forbidden .layerswitcher-opacity div
+{	background:rgba(255,0,0,0.5);
+	color:#f00!important;
+}
+
+/* cursor management */
+.ol-layerswitcher.drag,
+.ol-layerswitcher.drag *
+{	cursor:not-allowed!important;
+	cursor:no-drop!important;
+}
+.ol-layerswitcher.drag .panel li.dropover,
+.ol-layerswitcher.drag .panel li.dropover *
+{	cursor: pointer!important;
+	cursor: n-resize!important;
+	cursor: ns-resize!important;
+	cursor: -webkit-grab!important;
+	cursor: grab!important;
+	cursor: -webkit-grabbing!important;
+	cursor: grabbing!important;
+}
+
+.ol-layerswitcher .panel li.dropover
+{	background: rgba(51, 102, 153, 0.5);
+}
+
+.ol-layerswitcher .panel li label
+{	display: inline-block;
+	height: 1.4em;
+	max-width: 12em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	padding: 0 0.2em 0 1.7em;
+	position: relative;
+}
+
+.ol-layerswitcher [type="radio"] + label:before,
+.ol-layerswitcher [type="checkbox"] + label:before,
+.ol-layerswitcher [type="radio"]:checked + label:after,
+.ol-layerswitcher [type="checkbox"]:checked + label:after
+{	content: '';
+	position: absolute;
+	left: 0.1em; top: 0.1em;
+	width: 1.2em; height: 1.2em; 
+	border: 2px solid #369;
+	background: #fff;
+	-webkit-box-sizing:border-box;
+	        box-sizing:border-box;
+}
+
+.ol-layerswitcher [type="radio"] + label:before,
+.ol-layerswitcher [type="radio"] + label:after
+{	border-radius: 50%;
+}
+
+.ol-layerswitcher [type="radio"]:checked + label:after
+{	background: #369 none repeat scroll 0 0;
+	margin: 0.3em;
+	width: 0.6em;
+	height: 0.6em;
+}
+
+.ol-layerswitcher [type="checkbox"]:checked + label:after
+{	background: transparent;
+    border-width: 0 3px 3px 0;
+	border-style: solid;
+	border-color: #369;
+    width: 0.7em;
+    height: 1em;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    left: 0.55em;
+    top: -0.05em;
+    -webkit-box-shadow: 1px 0px 1px 1px #fff;
+            box-shadow: 1px 0px 1px 1px #fff;
+}
+
+.ol-layerswitcher .panel li.ol-layer-hidden
+{	opacity: 0.6;
+}
+
+.ol-layerswitcher.ol-collapsed .panel
+{	display:none;
+}
+.ol-layerswitcher.ol-forceopen .panel
+{	display:block;
+}
+
+.ol-layerswitcher button {
+	background-color: white;
+	float: right;
+	z-index: 10;
+	position: relative;
+	font-size: 1.7em;
+}
+.ol-touch .ol-layerswitcher button {
+	font-size: 2.5em;
+}
+.ol-layerswitcher button:before,
+.ol-layerswitcher button:after {
+	content: "";
+	position:absolute;
+	width: .75em;
+	height: .75em;
+	border-radius: 0.15em;
+	-webkit-transform: scaleY(.8) rotate(45deg);
+	transform: scaleY(.8) rotate(45deg);
+}
+.ol-layerswitcher button:before {
+	background: #e2e4e1;
+	top: .32em;
+    left: .34em;
+	-webkit-box-shadow: 0.1em 0.1em #325158;
+	box-shadow: 0.1em 0.1em #325158;
+}
+.ol-layerswitcher button:after {
+	top: .22em;
+    left: .34em;
+	background: #83bcc5;
+	background-image: radial-gradient( circle at .85em .6em, #70b3be 0, #70b3be .65em, #83bcc5 .65em);
+}
+.ol-layerswitcher-buttons 
+{	display:block;
+	float: right;
+	text-align:right;
+}
+.ol-layerswitcher-buttons > div
+{	display: inline-block;
+	position: relative;
+	cursor: pointer;
+	height:1em;
+	width:1em;
+	margin:2px;
+	line-height: 1em;
+    text-align: center;
+    background: #369;
+    vertical-align: middle;
+    color: #fff;
+}
+
+.ol-layerswitcher .panel li > div
+{	display: inline-block;
+	position: relative;
+}
+
+/* line break */
+.ol-layerswitcher .ol-separator
+{	display:block;
+	width:0;
+	height:0;
+	padding:0;
+	margin:0;
+}
+
+.ol-layerswitcher .layerup
+{	float: right;
+	height:2.5em;
+	background-color: #369;
+	opacity: 0.5;
+	cursor: move;
+	cursor: ns-resize;
+}
+
+.ol-layerswitcher .layerup:before,
+.ol-layerswitcher .layerup:after
+{	border-color: #fff transparent;
+	border-style: solid;
+	border-width: 0.4em 0.4em 0;
+	content: "";
+	height: 0;
+	position: absolute;
+	bottom: 3px;
+	left: 0.1em;
+	width: 0;
+}
+.ol-layerswitcher .layerup:after
+{	border-width: 0 0.4em 0.4em;
+	top:3px;
+	bottom: auto;
+}
+
+.ol-layerswitcher .layerInfo
+{	background: #369;
+	border-radius: 100%;
+}
+.ol-layerswitcher .layerInfo:before
+{	color: #fff;
+	content: "i";
+	display: block;
+	font-size: 0.8em;
+	font-weight: bold;
+	text-align: center;
+	width: 1.25em;
+	position:absolute;
+	left: 0;
+	top: 0;
+}
+
+.ol-layerswitcher .layerTrash
+{	background: #369;
+}
+.ol-layerswitcher .layerTrash:before
+{	color: #fff;
+	content: "\00d7";
+	font-size:1em;
+	top: 50%;
+	left: 0;
+	right: 0;
+	text-align: center;
+	line-height: 1em;
+	margin: -0.5em 0;
+	position: absolute;
+}
+
+.ol-layerswitcher .layerExtent
+{	background: #369;
+}
+.ol-layerswitcher .layerExtent:before
+{	border-right: 1px solid #fff;
+	border-bottom: 1px solid #fff;
+	content: "";
+	display: block;
+	position: absolute;
+	left: 6px;
+	right: 2px;
+	top: 6px;
+	bottom: 3px;
+}
+.ol-layerswitcher .layerExtent:after
+{	border-left: 1px solid #fff;
+	border-top: 1px solid #fff;
+	content: "";
+	display: block;
+	position: absolute;
+	bottom: 6px;
+	left: 2px;
+	right: 6px;
+	top: 3px;
+}
+
+.ol-layerswitcher .expend-layers,
+.ol-layerswitcher .collapse-layers
+{	margin: 0 2px;
+	background-color: transparent;
+}
+.ol-layerswitcher .expend-layers:before,
+.ol-layerswitcher .collapse-layers:before
+{	content:"";
+	position:absolute;
+	top:50%;
+	left:0;
+	margin-top:-2px;
+	height:4px;
+	width:100%;
+	background:#369;
+}
+.ol-layerswitcher .expend-layers:after
+{	content:"";
+	position:absolute;
+	left:50%;
+	top:0;
+	margin-left:-2px;
+	width:4px;
+	height:100%;
+	background:#369;
+}
+/*
+.ol-layerswitcher .collapse-layers:before
+{	content:"";
+	position:absolute;
+	border:0.5em solid #369;
+	border-color: #369 transparent transparent;
+	margin-top:0.25em;
+}
+.ol-layerswitcher .expend-layers:before
+{	content:"";
+	position:absolute;
+	border:0.5em solid #369;
+	border-color: transparent transparent transparent #369 ;
+	margin-left:0.25em;
+}
+*/
+
+.ol-layerswitcher .layerswitcher-opacity
+{	position:relative;
+	border: 1px solid #369;
+	height: 3px;
+	width: 120px;
+	margin:5px 1em 10px 7px;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+	border-radius: 3px;
+	background: #69c;
+	background: -webkit-gradient(linear, left top, right top, from(rgba(0,60,136,0)), to(rgba(0,60,136,0.6)));
+	background: linear-gradient(to right, rgba(0,60,136,0), rgba(0,60,136,0.6));
+	cursor: pointer;
+	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+	        box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+
+.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor,
+.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before
+{	position: absolute;
+	width: 20px;
+	height: 20px;
+	top: 50%;
+	left: 50%;
+	background: rgba(0,60,136,0.5);
+	border-radius: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	z-index: 1;
+}
+.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before
+{	content: "";
+	position: absolute;
+	width: 50%;
+	height: 50%;
+}
+.ol-touch .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor
+{	width: 26px;
+	height: 26px;
+}
+
+.ol-layerswitcher .layerswitcher-opacity-label { 
+	display:none;
+	position: absolute;
+    right: -2.5em;
+    bottom: 5px;
+    font-size: 0.8em;
+}
+.ol-layerswitcher .layerswitcher-opacity-label::after {
+	content:"%";
+}
+
+.ol-layerswitcher .layerswitcher-progress
+{	display:block;
+	margin:-4px 1em 2px 7px;
+	width: 120px;
+}
+.ol-layerswitcher .layerswitcher-progress div
+{	background-color: #369;
+	height:2px;
+	display:block;
+	width:0;
+}
+
+.ol-control.ol-layerswitcher-image
+{	position: absolute;
+	right: 0.5em;
+	text-align: left;
+	top: 1em;
+	transition: all 0.2s ease 0s;
+	-webkit-transition: all 0.2s ease 0s;
+}
+.ol-control.ol-layerswitcher-image.ol-collapsed
+{	top:3em;
+	transition: none;
+	-webkit-transition: none;
+
+}
+
+.ol-layerswitcher-image .panel
+{	list-style: none;
+	padding: 0.25em;
+	margin:0;
+	overflow: hidden;
+}
+
+.ol-layerswitcher-image .panel ul
+{	list-style: none;
+	padding: 0 0 0 20px;
+	overflow: hidden;
+}
+
+.ol-layerswitcher-image.ol-collapsed .panel
+{	display:none;
+}
+.ol-layerswitcher-image.ol-forceopen .panel
+{	display:block;
+	clear:both;
+}
+
+.ol-layerswitcher-image button 
+{	background-color: white;
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
+	background-position: center;
+	background-repeat: no-repeat;
+	float: right;
+	height: 38px;
+	width: 38px;
+	display:none;
+}
+
+.ol-layerswitcher-image.ol-collapsed button
+{	display:block;
+	position:relative;
+}
+
+.ol-layerswitcher-image li
+{	border-radius: 4px;
+	border: 3px solid transparent;
+	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
+	        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
+	display: inline-block;
+	width: 64px;
+	height: 64px;
+	margin:2px;
+	position: relative;
+	background-color: #fff;
+	overflow: hidden;
+	vertical-align: middle;
+	cursor:pointer;
+}
+.ol-layerswitcher-image li.ol-layer-hidden
+{	opacity: 0.5;
+	border-color:#555;
+}
+.ol-layerswitcher-image li.ol-header
+{	display: none;
+}
+
+.ol-layerswitcher-image li img
+{	position:absolute;
+	max-width:100%;
+}
+.ol-layerswitcher-image li.select
+{	border: 3px solid red;
+}
+
+.ol-layerswitcher-image li p
+{	display:none;
+}
+.ol-layerswitcher-image li:hover p
+{	background-color: rgba(0, 0, 0, 0.5);
+	color: #fff;
+	bottom: 0;
+	display: block;
+	left: 0;
+	margin: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	text-align: center;
+	height:1.2em;
+	font-family:Verdana, Geneva, sans-serif;
+	font-size:0.8em;
+}
+.ol-control.ol-legend {
+  bottom: .5em;
+  left: .5em;
+  z-index: 1;
+  max-height: 90%;
+  max-width: 90%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.ol-control.ol-legend button {
+  position: relative;
+  display: none;
+}
+.ol-control.ol-legend.ol-collapsed button {
+    display: block;
+}
+.ol-control.ol-legend.ol-uncollapsible button {
+  display: none;
+}
+
+.ol-control.ol-legend button.ol-closebox {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: none;
+  cursor: pointer;
+  z-index: 1;
+}
+.ol-control.ol-legend.ol-uncollapsible button.ol-closebox,
+.ol-control.ol-legend.ol-collapsed button.ol-closebox {
+  display: none;
+}
+.ol-control.ol-legend button.ol-closebox:before {
+  content: "\D7";
+  background: none;
+  color: rgba(0,60,136,.5);
+  font-size: 1.3em;
+}
+.ol-control.ol-legend button.ol-closebox:hover:before {
+  color: rgba(0,60,136,1);
+}
+.ol-control.ol-legend.ol-uncollapsible .ol-legendImg,
+.ol-control.ol-legend .ol-legendImg {
+  position: absolute;
+  z-index: -1;
+}
+.ol-control.ol-legend.ol-collapsed .ol-legendImg {
+  display: none;
+}
+.ol-control.ol-legend.ol-uncollapsible .ol-legendImg {
+  display: block  ;
+}
+
+.ol-control.ol-legend .ol-legendImg canvas {
+  height: 100%;;
+}
+
+.ol-control.ol-legend > button:first-child:before,
+.ol-control.ol-legend > button:first-child:after {
+  content: "";
+  position: absolute;
+  top: .25em;
+  left: .2em;
+  width: .2em;
+  height: .2em;
+  background-color: currentColor;
+  -webkit-box-shadow: 0 0.35em, 0 0.7em;
+          box-shadow: 0 0.35em, 0 0.7em;
+}
+.ol-control.ol-legend button:first-child:after {
+  top: .27em;
+  left: .55em;
+  height: .15em;
+  width: .6em;
+}
+
+.ol-legend ul {
+  min-width: 1.5em;
+  min-height: 1.5em;
+  margin: 0 0 2px;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+}
+.ol-control.ol-legend.ol-collapsed ul {
+  display: none;
+}
+.ol-control.ol-legend.ol-uncollapsible ul {
+  display: block;
+}
+.ol-legend ul li.ol-title {
+  text-align: center;
+  font-weight: bold;
+}
+.ol-legend ul li {
+  overflow: hidden;
+  padding: 0 .5em;
+}
+.ol-legend ul li div {
+    display: inline-block;
+  vertical-align: middle;
+}
+
+.ol-control.ol-legend .ol-legend {
+  display: inline-block;
+}
+.ol-control.ol-legend.ol-collapsed .ol-legend {
+  display: none;
+}
+.ol-control.ol-mapzone {
+  position: absolute;
+  right: 0.5em;
+  text-align: left;
+  top: .5em;
+  max-height: calc(100% - 6em);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+
+.ol-control.ol-mapzone.ol-collapsed {
+  top: 3em;
+}
+
+.ol-control.ol-mapzone button {
+  position: relative;
+  float: right;
+  margin-top: 2.2em;
+}
+.ol-touch .ol-control.ol-mapzone button {
+  margin-top: 1.67em;
+}
+.ol-control.ol-mapzone.ol-collapsed button {
+  margin-top: 0;
+}
+
+.ol-control.ol-mapzone button i {
+  border: .1em solid currentColor;
+  border-radius: 50%;
+  width: .9em;
+  height: .9em; 
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.ol-control.ol-mapzone button i:before {
+  content: "";
+  background-color: currentColor;
+  width: 0.4em;
+  height: .4em;
+  position: absolute;
+  left: .5em;
+  top: 0.3em;
+  border-radius: 50%;
+  -webkit-box-shadow: .05em .3em 0 -.051em currentColor,
+  	-.05em -.35em 0 -.1em currentColor,
+  	-.5em -.35em 0 0em currentColor,
+  	-.65em .1em 0 -.03em currentColor,
+  	-.65em -.05em 0 -.05em currentColor;
+          box-shadow: .05em .3em 0 -.051em currentColor,
+  	-.05em -.35em 0 -.1em currentColor,
+  	-.5em -.35em 0 0em currentColor,
+  	-.65em .1em 0 -.03em currentColor,
+  	-.65em -.05em 0 -.05em currentColor
+}
+
+.ol-mapzone > div {
+  position: relative;
+  display: inline-block;
+  width: 5em;
+  height: 5em;
+  margin: 0 .2em 0 0;
+}
+.ol-control.ol-mapzone.ol-collapsed > div {
+  display: none;
+}
+.ol-mapzone > div p {
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  /* background: rgba(255,255,255,.5); */
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  width: 160%;
+  overflow: hidden;
+  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+  -webkit-transform: scaleX(.625);
+          transform: scaleX(.625);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  cursor: default;
+}
+
+.ol-notification {
+  width: 150%;
+  bottom: 0;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.ol-notification > div,
+.ol-notification > div:hover {
+  position: absolute;
+  background-color: rgba(0,0,0,.8);
+  color: #fff;
+  bottom: 0;
+  left: 33.33%;
+  max-width: calc(66% - 4em);
+  min-width: 5em;
+  max-height: 5em;
+  min-height: 1em;
+  border-radius: 4px 4px 0 0;
+  padding: .2em .5em;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  -webkit-transition: .3s;
+  transition: .3s;
+  opacity: 1;
+}
+.ol-notification.ol-collapsed > div {
+  bottom: -5em;
+  opacity: 0;
+}
+
+.ol-notification a {
+  color: #9cf;
+  cursor: pointer;
+}
+
+.ol-overlay
+{	position: absolute;
+	top: 0;
+    left: 0;
+	width:100%;
+	height: 100%;
+    background-color: rgba(0,0,0,0.4);
+    padding: 1em;
+    color: #fff;
+	-webkit-box-sizing: border-box;
+	        box-sizing: border-box;
+	z-index: 1;
+	opacity: 0;
+	display: none;
+	cursor: default;
+	overflow: hidden;
+	-webkit-transition: all 0.5s;
+	transition: all 0.5s;
+}
+
+.ol-overlay.slide-up
+{	transform: translateY(100%);
+	-webkit-transform: translateY(100%);
+}
+.ol-overlay.slide-down
+{	-webkit-transform: translateY(-100%);
+	transform: translateY(-100%);
+}
+.ol-overlay.slide-left
+{	-webkit-transform: translateX(-100%);
+	transform: translateX(-100%);
+}
+.ol-overlay.slide-right
+{	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+}
+.ol-overlay.zoom
+{	top: 50%;
+    left: 50%;
+	opacity:0.5;
+	-webkit-transform: translate(-50%,-50%) scale(0);
+	transform: translate(-50%,-50%) scale(0);
+}
+.ol-overlay.zoomout
+{	-webkit-transform: scale(3);
+	transform: scale(3);
+}
+.ol-overlay.zoomrotate
+{	top: 50%;
+    left: 50%;
+	opacity:0.5;
+	-webkit-transform: translate(-50%,-50%) scale(0) rotate(360deg);
+	transform: translate(-50%,-50%) scale(0) rotate(360deg);
+}
+.ol-overlay.stretch
+{	top: 50%;
+    left: 50%;
+	opacity:0.5;
+	-webkit-transform: translate(-50%,-50%) scaleX(0);
+	transform: translate(-50%,-50%) scaleX(0) ;
+}
+.ol-overlay.stretchy
+{	top: 50%;
+    left: 50%;
+	opacity:0.5;
+	-webkit-transform: translate(-50%,-50%) scaleY(0);
+	transform: translate(-50%,-50%) scaleY(0) ;
+}
+.ol-overlay.wipe
+{	opacity: 1;
+	/* clip: must be set programmatically */
+	/* clip-path: use % but not crossplatform (IE) */
+}
+.ol-overlay.flip
+{	-webkit-transform: perspective(600px) rotateY(180deg);
+	transform: perspective(600px) rotateY(180deg);
+}
+.ol-overlay.card
+{	opacity: 0.5;
+	-webkit-transform: translate(-80%, 100%) rotate(-0.5turn);
+	transform: translate(-80%, 100%) rotate(-0.5turn);
+}
+.ol-overlay.book
+{	-webkit-transform: perspective(600px) rotateY(-180deg) scaleX(0.6);
+	transform: perspective(600px) rotateY(-180deg) scaleX(0.6) ;
+	-webkit-transform-origin: 10% 50%;
+	transform-origin: 10% 50%;
+}
+.ol-overlay.book.visible
+{	-webkit-transform-origin: 10% 50%;
+	transform-origin: 10% 50%;
+}
+
+.ol-overlay.ol-visible
+{	opacity:1;
+	top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+	-webkit-transform: none;
+	transform: none;
+}
+
+.ol-overlay .ol-closebox
+{	position: absolute;
+	top: 1em;
+	right: 1em;
+	width: 1em;
+	height: 1em;
+	cursor: pointer;
+	z-index:1;
+}
+.ol-overlay .ol-closebox:before
+{	content: "\274c";
+	display: block;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.ol-control.ol-overview
+{	position: absolute;
+	left: 0.5em;
+	text-align: left;
+	bottom: 0.5em;
+}
+
+.ol-control.ol-overview .panel
+{	display:block;
+	width:150px;
+	height:150px;
+	margin:2px;
+	background-color:#fff;
+	border:1px solid #369;
+	cursor: pointer;
+}
+
+.ol-overview:not(.ol-collapsed) button
+{	position:absolute;
+	bottom:2px;
+	left:2px;
+	z-index:2;
+}
+
+.ol-control.ol-overview.ol-collapsed .panel
+{	display:none;
+}
+
+.ol-overview.ol-collapsed button:before
+{	content:'\00bb';
+}
+.ol-overview button:before
+{	content:'\00ab';
+}
+
+
+.ol-control-right.ol-overview
+{	left: auto;
+	right: 0.5em;
+}
+.ol-control-right.ol-overview:not(.ol-collapsed) button
+{	left:auto;
+	right:2px;
+}
+.ol-control-right.ol-overview.ol-collapsed button:before
+{	content:'\00ab';
+}
+.ol-control-right.ol-overview button:before
+{	content:'\00bb';
+}
+
+.ol-control-top.ol-overview
+{	bottom: auto;
+	top: 5em;
+}
+.ol-control-top.ol-overview:not(.ol-collapsed) button
+{	bottom:auto;
+	top:2px;
+}
+
+.ol-permalink
+{	position: absolute;
+	top:0.5em;
+	right: 2.5em;
+}
+.ol-touch .ol-permalink
+{	right: 3em;
+}
+
+.ol-permalink button
+{	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcFBjYE1ZK03gAAAUlJREFUOMuVk71KA1EQhc/NaiP+gCRpFHwGBSFlCrFVfAsbwSJCBMv06QIGJOBziI3EYAgkjU8gIloIAasIn4WzMqx34zrN7J6de+6ZmbNSgQDSfADcATPgHbgCyvonSYv8KEzWdofegH3gwmG9Ikq67sAESFzNueHThTyiEIKAmr2OJCUhhO30Aou+5aUQU2Ik65K2JC1KegohPGfUBkmvksqShnntHEcGOs60NXHfjmKz6czZTsNqbhzW+muwY2ATWAWawCOwBgxcTfvnvCPxKx4Cy5bPgBWgauRpdL2ImNlGhp3MabETm8mh94nDk4yCNE5/KTGg7xxbyhYAG0AN2AEqURIDZ0a0Fxn+LXAPXDpzRqMk6cOedz1ubdYl1b6NHgZRJe72nuu/CdSBl+yKi/zZlTnbaeXOJIesClwDU+ATeEhtX5TkCwAWUyAsHH1QAAAAAElFTkSuQmCC');
+	background-position: center;
+	background-repeat: no-repeat;
+}
+.ol-control.ol-profil {
+  position: absolute;
+	top: 0.5em;
+	right: 3em;
+	text-align: right;
+	overflow: hidden;
+}
+.ol-profil .ol-inner  {
+  position: relative;
+	padding: 0.5em;
+	font-size: 0.8em;
+}
+.ol-control.ol-profil .ol-inner {
+  display: block;
+	background-color: rgba(255,255,255,0.7);
+	margin: 2.3em 2px 2px;
+}
+.ol-control.ol-profil.ol-collapsed .ol-inner {
+  display: none;
+}
+
+.ol-profil canvas {
+  display: block;
+}
+.ol-profil button {
+  display: block;
+	position: absolute;
+	right: 2px;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPCAYAAAALWoRrAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgXCR4dn7j9TAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAz0lEQVQ4y7WTMU4CURRFz0xIpLUBEhdAY2tJYW1jaWlsXYVxDWyBhWCFCYugYgnDFPMOhTMJGf3AwHiqn/uTk5v/3gfAH6b0RH7sMiIe1Ts162z+q2lVVbd1XqijLuJk0zzP1/VxCGyApLgsy+HJphGx8DeFOm6L1bn6eVQaEW+m2amTRqx+1fkqKY2Ie0+zUx/U7WGYfNMsy57PmMMN8A1MWsWeUoPyivV8PWtPOzL7D+lYHfUtBXgHGLTCJfBxodD6k9Dsm8BLE17LobQ39nJC61aLVoVsAAAAAElFTkSuQmCC');
+}
+
+.ol-profil.ol-collapsed button {
+  position: static;
+}
+
+.ol-profil .ol-profilbar,
+.ol-profil .ol-profilcursor {
+  position:absolute;
+	pointer-events: none;
+	width: 1px;
+	display: none;
+}
+.ol-profil .ol-profilcursor {
+  width: 0;
+	height: 0;
+}
+.ol-profil .ol-profilcursor:before {
+  content:"";
+	pointer-events: none;
+	display: block;
+	margin: -2px;
+	width:5px;
+	height:5px;
+}
+.ol-profil .ol-profilbar,
+.ol-profil .ol-profilcursor:before {
+  background: red;
+}
+
+.ol-profil table {
+  text-align: center;
+  width: 100%;
+}
+
+.ol-profil table span {
+  display: block;
+}
+
+.ol-profilpopup {
+  background-color: rgba(255, 255, 255, 0.5);
+	margin: 0.5em;
+	padding: 0 0.5em;
+	position: absolute;
+	top:-1em;
+	white-space: nowrap;
+}
+.ol-profilpopup.ol-left {
+  right:0;
+}
+
+
+.ol-profil table td {
+  padding: 0 2px;
+}
+
+.ol-profil table .track-info {
+  display: table-row;
+}
+.ol-profil table .point-info {
+  display: none;
+}
+.ol-profil .over table .track-info {
+  display: none;
+}
+.ol-profil .over table .point-info {
+  display: table-row;
+}
+
+.ol-profil p {
+  text-align: center;
+	margin:0;
+}
+
+.ol-control.ol-routing {
+  top: 0.5em;
+  left: 3em;
+  max-height: 90%;
+  overflow-y: auto;
+}
+.ol-touch .ol-control.ol-routing {
+  left: 3.5em;
+}
+.ol-control.ol-routing.ol-searching {
+  opacity: .5;
+}
+
+.ol-control.ol-routing .ol-car,
+.ol-control.ol-routing > button {
+  position: relative;
+}
+.ol-control.ol-routing .ol-car:after,
+.ol-control.ol-routing > button:after {
+  content: "";
+  position: absolute;
+  width: .78em;
+  height: 0.6em;
+  border-radius: 40% 50% 0 0 / 50% 70% 0 0;
+  -webkit-box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em;
+          box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em;
+  clip: rect(0 1em .5em -1em);
+  top: .35em;
+  left: .4em;
+}
+.ol-control.ol-routing .ol-car:before,
+.ol-control.ol-routing > button:before {
+  content: "";
+  position: absolute;
+  width: .28em;
+  height: .28em;
+  border-radius: 50%;
+  -webkit-box-shadow: inset 0 0 0 1em, 0.65em 0;
+          box-shadow: inset 0 0 0 1em, 0.65em 0;
+  top: 0.73em;
+  left: .20em;
+}
+.ol-control.ol-routing .ol-pedestrian:after {
+  content: "";
+  position: absolute;
+  width: .3em;
+  height: .4em;
+  top: .25em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  -webkit-box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em;
+          box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em;
+  border-top: .2em solid transparent;
+}
+.ol-control.ol-routing .ol-pedestrian:before {
+  content: "";
+  position: absolute;
+  width: .3em;
+  height: .3em;
+  top: .1em;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.ol-control.ol-routing.ol-collapsed .content {
+  display: none;
+}
+
+.ol-routing .ol-search.ol-collapsed ul {
+	display: none;
+}
+.ol-routing .ol-search ul .copy {
+  display: none;
+}
+.ol-routing .ol-search ul.history {
+  /* display: none; */
+}
+.ol-routing .content > div > * {
+  display: inline-block;
+  vertical-align: top;
+}
+.ol-routing .ol-result ul {
+  list-style: none;
+  display: block;
+}
+.ol-routing .ol-result li {
+  position: relative;
+  min-height: 1.65em;
+}
+.ol-routing .ol-result li i {
+  display: block;
+  font-size: .8em;
+  font-weight: bold;
+}
+
+.ol-routing .ol-result li:before {
+  content: "";
+  border: 5px solid transparent;
+  position: absolute;
+  left: -1.75em;
+  border-bottom-color: #369;
+  border-width: .6em .4em .6em;
+  -webkit-transform-origin: 50% 125%;
+          transform-origin: 50% 125%;
+  -webkit-box-shadow: 0 0.65em 0 -0.25em #369;
+          box-shadow: 0 0.65em 0 -0.25em #369;
+  top: -.8em;
+}
+.ol-routing .ol-result li:after {
+  content: "";
+  position: absolute;
+  width: 0.3em;
+  height: .6em;
+  left: -1.5em;
+  background: #369;
+  top: .6em;
+}
+.ol-routing .ol-result li.R:before {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.ol-routing .ol-result li.FR:before {
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.ol-routing .ol-result li.L:before {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+.ol-routing .ol-result li.FL:before {
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.ol-routing .content > i {
+  vertical-align: middle;
+}
+.ol-routing .ol-button,
+.ol-routing .ol-button:focus,
+.ol-routing .ol-pedestrian,
+.ol-routing .ol-car {
+  font-size: 1.1em;
+  position: relative;
+  display: inline-block;
+  width: 1.4em;
+  height: 1.4em;
+  color: rgba(0,60,136,1);
+  background-color: transparent;
+  margin: 0 .1em;
+  opacity: .5;
+  vertical-align: middle;
+  outline: none;
+  cursor: pointer;
+}
+.ol-routing .ol-button:hover,
+.ol-routing .ol-button.selected,
+.ol-routing i.selected {
+  opacity: 1;
+  background: transparent;
+}
+
+.ol-viewport .ol-scale {
+	left: .5em;
+	bottom: 2.5em;
+	text-align: center;
+	-webkit-transform: scaleX(.8);
+	-webkit-transform-origin: 0 0;
+	transform: scaleX(.8);
+	transform-origin: 0 0;
+}
+.ol-viewport .ol-scale input {
+	background: none;
+    border: 0;
+    width: 8em;
+    text-align: center;
+}
+
+.ol-search{
+  top: 0.5em;
+  left: 3em;
+}
+.ol-touch .ol-search {
+  left: 3.5em;
+}
+.ol-search button {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQoU41SwXHCQAzUHh58eoUOIBWEDkI6oAToIKkg7iAuwakgpAIowXRACcnrzp6BzchjMx4wE/S6kW5XK60gvQghzJIkmVoqSZI9gJ9+/fINS5Cc1HX9QXIlIr/tpwcRyb33b7cIGnAIYQdg4pxbjcfj0nJ1Xc+Px+PGObdN03Q9RIAQwgpAnqbp7FKmjQGgJLlU1d2V7BjjRkQO3vvXIXarkyxVNbsCm2QR2Q0V7XOMMReRmfd+OQQubN6hYgs22ZtbnRcAtiRfLueqqmpJ8ovko6oeBq0KIWQA3gFkzrlmMafTaUEyI/mpqmbhVTRWWbRdbClPbeobQNES5KPRqOxs7DBn8K1DsAOKMZYApiTXqlrcDe4d0XN7jWeCfzt351tVle2iGalTcBd4gGDvvZ/fDe4RmCOFLe8Pr7mvEP2N9PQAAAAASUVORK5CYII=");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 1em;
+  top: 2px;
+  left: 2px;
+  float: left;
+}
+.ol-search input {
+  display: inline-block;
+  border: 0;
+  margin: 1px 1px 1px 2px;
+  font-size: 1.14em;
+  padding-left: 0.3em;
+  height: 1.375em;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+}
+.ol-touch .ol-search input,
+.ol-touch .ol-search ul {
+  font-size: 1.5em;
+}
+.ol-control.ol-search.ol-collapsed > * {
+  display: none;
+}
+.ol-control.ol-search.ol-collapsed > button {
+  display: block;
+}
+
+.ol-search ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: block;
+  clear: both;
+  cursor: pointer;
+  max-width: 17em;
+  overflow-x: hidden;
+  z-index: 1;
+  background: #fff;
+}
+/*
+.ol-control.ol-search ul {
+  position: absolute;
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
+}
+*/
+.ol-search ul li {
+  padding: 0.1em 0.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ol-search ul li.select,
+.ol-search ul li:hover {
+  background-color: rgba(0,60,136,.5);
+  color: #fff;
+}
+.ol-search ul li img {
+  float: left;
+  max-height: 2em;
+}
+.ol-search li.copy {
+    background: rgba(0,0,0,.5);
+  color: #fff;
+}
+.ol-search li.copy a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.ol-search.searching:before {
+  content: '';
+  position: absolute;
+  height: 3px;
+  left: 0;
+  top: 1.6em;
+  -webkit-animation: pulse .5s infinite alternate linear;
+          animation: pulse .5s infinite alternate linear;
+  background: red;
+  z-index: 2;
+}
+
+@-webkit-keyframes pulse {
+  0% { left:0; right: 95%; }
+  50% {	left: 30%; right: 30%; }
+  100% {	left: 95%; right: 0; }
+}
+
+@keyframes pulse {
+  0% { left:0; right: 95%; }
+  50% {	left: 30%; right: 30%; }
+  100% {	left: 95%; right: 0; }
+}
+
+
+.ol-search.IGNF-parcelle input {
+  width: 13.5em;
+}
+.ol-search.IGNF-parcelle input:-moz-read-only {
+  background: #ccc;
+  opacity: .8;
+}
+.ol-search.IGNF-parcelle input:read-only {
+  background: #ccc;
+  opacity: .8;
+}
+.ol-search.IGNF-parcelle.ol-collapsed-list > ul.autocomplete {
+  display: none;
+}
+
+.ol-search.IGNF-parcelle label {
+  display: block;
+  clear: both;
+}
+.ol-search.IGNF-parcelle > div * {
+  width: 5em;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  margin: .1em;
+  font-size: 1em;
+}
+.ol-search.IGNF-parcelle ul.autocomplete-page {
+  margin-top:.5em;
+  width:100%;
+  text-align: center;
+  display: none;
+}
+.ol-search.IGNF-parcelle.ol-collapsed-list ul.autocomplete-parcelle,
+.ol-search.IGNF-parcelle.ol-collapsed-list ul.autocomplete-page {
+  display: block;
+}
+.ol-search.IGNF-parcelle.ol-collapsed ul.autocomplete-page,
+.ol-search.IGNF-parcelle.ol-collapsed ul.autocomplete-parcelle,
+.ol-search.IGNF-parcelle ul.autocomplete-parcelle {
+  display: none;
+}
+.ol-search.IGNF-parcelle ul.autocomplete-page li {
+  display: inline-block;
+  color: #fff;
+  background: rgba(0,60,136,.5);
+  border-radius: 50%;
+  width: 1.3em;
+  height: 1.3em;
+  padding: .1em;
+  margin: 0 .1em;
+}
+.ol-search.IGNF-parcelle ul.autocomplete-page li.selected {
+  background: rgba(0,60,136,1);
+}
+
+/* GPS */
+.ol-searchgps input.search {
+  display: none;
+}
+.ol-control.ol-searchgps > button:first-child {
+  background-image: none;
+}
+.ol-control.ol-searchgps > button:first-child:before {
+  content: "x/y";
+  display: block;
+  -webkit-transform: scaleX(.8);
+          transform: scaleX(.8);
+}
+.ol-control.ol-searchgps .ol-latitude,
+.ol-control.ol-searchgps .ol-longitude {
+  clear: both;
+}
+.ol-control.ol-searchgps .ol-latitude label,
+.ol-control.ol-searchgps .ol-longitude label {
+  width: 5.5em;
+  display: inline-block;
+  text-align: right;
+  -webkit-transform: scaleX(.8);
+          transform: scaleX(.8);
+  margin: 0 -.8em 0 0;
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+.ol-control.ol-searchgps .ol-latitude input,
+.ol-control.ol-searchgps .ol-longitude input {
+  max-width: 10em;
+}
+
+.ol-control.ol-searchgps .ol-switch {
+  cursor: pointer;
+  float: right;
+  margin: .5em;
+  font-size: .9em;
+}
+.ol-control.ol-searchgps .ol-switch input {
+  display: none;
+}
+.ol-control.ol-searchgps .ol-switch span {
+  color: rgba(0,60,136,.5);
+  position: relative;
+  cursor: pointer;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  width: 1.6em;
+  height: 1em;
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 1.3em;
+  vertical-align: middle;
+  margin: 0 .2em;
+}
+.ol-control.ol-searchgps .ol-switch span:before {
+  position: absolute;
+  content: "";
+  height: 1em;
+  width: 1em;
+  left: 0;
+  top: 50%;
+  background-color: #fff;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 1em;
+  display: block;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  border: 2px solid #ccc;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.ol-control.ol-searchgps .ol-switch input:checked + span {
+  background-color: currentColor;
+}
+.ol-control.ol-searchgps .ol-switch input:checked + span:before {
+  -webkit-transform: translate(.6em,-50%);
+          transform: translate(.6em,-50%);
+  border-color: currentColor;
+}
+
+.ol-searchgps .ol-decimal{
+  display: inline-block;
+}
+.ol-searchgps .ol-dms,
+.ol-searchgps.ol-dms .ol-decimal {
+  display: none;
+  width: 3em;
+  text-align: right;
+}
+.ol-searchgps.ol-dms .ol-dms {
+  display: inline-block;
+}
+
+.ol-searchgps span.ol-dms {
+  width: auto;
+}
+.ol-searchgps.ol-control.ol-collapsed button.ol-geoloc {
+  display: none;
+}
+.ol-searchgps button.ol-geoloc {
+  top: 0;
+  float: right;
+  margin-right: 3px;
+  background-image: none;
+  position: relative;
+}
+.ol-searchgps button.ol-geoloc:before {
+  content:"";
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  width: .6em;
+  height: .6em;
+  border: .1em solid currentColor;
+  border-radius: 50%;
+  -webkit-transform: translate(-50%,-50%);
+          transform: translate(-50%,-50%);
+}
+.ol-searchgps button.ol-geoloc:after {
+  content:"";
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  width: .2em;
+  height: .2em;
+  background-color: transparent;
+  -webkit-transform: translate(-50%,-50%);
+          transform: translate(-50%,-50%);
+  -webkit-box-shadow: 
+    .45em 0 currentColor, -.45em 0 currentColor, 0 -.45em currentColor, 0 .45em currentColor,
+    .25em 0 currentColor, -.25em 0 currentColor, 0 -.25em currentColor, 0 .25em currentColor;
+          box-shadow: 
+    .45em 0 currentColor, -.45em 0 currentColor, 0 -.45em currentColor, 0 .45em currentColor,
+    .25em 0 currentColor, -.25em 0 currentColor, 0 -.25em currentColor, 0 .25em currentColor;
+}
+.ol-control.ol-select {
+  top: .5em;
+  left: 3em;
+}
+.ol-control.ol-select > button:before {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: .73em;
+  height: .73em;
+  background-color: transparent;
+  border: .12em solid currentColor;
+  border-radius: 100%;
+  top: .35em;
+  left: .35em;
+}
+.ol-control.ol-select > button:after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 1.1em;
+  left: 1em;
+  border-width: .08em .23em;
+  border-style: solid;
+  border-radius: .03em;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  -webkit-box-shadow: -0.18em 0 0 -0.03em;
+          box-shadow: -0.18em 0 0 -0.03em;
+}
+.ol-select > div button {
+    width: auto;
+    padding: 0 .5em;
+    float: right;
+    font-weight: normal;
+}
+.ol-select .ol-delete {
+    width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+.ol-select .ol-delete:before {
+  content:'\00d7';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+}
+.ol-control.ol-select input {
+  font-size: 1em;
+}
+.ol-control.ol-select select {
+  font-size: 1em;
+  max-width: 10em;
+}
+.ol-control.ol-select select option.ol-default {
+  color: #999;
+  font-style: italic;
+}
+.ol-control.ol-select > div {
+  display: block;
+}
+.ol-control.ol-select.ol-collapsed > div {
+  display: none;
+}
+.ol-control.ol-select.ol-select-check {
+  max-width: 20em;
+}
+.ol-control.ol-select.ol-select-check label,
+.ol-control.ol-select-check div {
+  position: relative;
+  display: inline-block;
+}
+.ol-control.ol-select.ol-select-condition input,
+.ol-control.ol-select.ol-select-check input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.ol-control.ol-select.ol-select-condition label div {
+  position: relative;
+  padding: 0 1em 0 2em;
+}
+.ol-control.ol-select.ol-select-condition label div:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  height: 1.1em;
+  width: 1.8em;
+  background-color: rgba(192,192,192,.7);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border-radius: 1em;
+}
+.ol-control.ol-select.ol-select-condition label div:after {
+  content: "";
+  position: absolute;
+  left: .1em;
+  top: .1em;
+  height: .9em;
+  width: .9em;
+  background-color: #fff;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border-radius: 1em;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+.ol-control.ol-select.ol-select-condition input:checked ~ div:after {
+  left: .7em;
+}
+
+.ol-control.ol-select.ol-select-check label > div {
+  padding: 0 1em 0 1.5em;
+}
+.ol-control.ol-select.ol-select-check label > div:before {
+  content: "";
+  position: absolute;
+  width: 1.1em;
+  height: 1.1em;
+  left: .2em;
+  background-color: rgba(192,192,192,.7);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.ol-control.ol-select.ol-select-check label.ol-radio > div:before {
+  border-radius: 50%;
+}
+.ol-control.ol-select.ol-select-condition label > div:hover:before,
+.ol-control.ol-select.ol-select-check label > div:hover:before {
+  background-color: rgba(128,128,128,.7);
+}
+.ol-control.ol-select.ol-select-condition input:checked ~ div:before,
+.ol-control.ol-select.ol-select-check input:checked ~ div:before {
+  background-color: rgba(0,60,136,.7);
+}
+.ol-control.ol-select.ol-select-check label.ol-checkbox input:checked ~ div:after {
+  content: "";
+  position: absolute;
+  width: .5em;
+  height: .8em;
+  top: .05em;
+  left: .5em;
+  border: 2px solid #fff;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.ol-control.ol-select.ol-select-check label.ol-radio input:checked ~ div:before {
+  border: .3em solid rgba(0,60,136,.7);
+  background-color: #fff;
+}
+
+.ol-select ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ol-control.ol-select input[type="text"]  {
+  width: 8em;
+}
+
+.ol-select .ol-autocomplete {
+  display: inline;
+}
+.ol-select .ol-autocomplete ul {
+  position: absolute;
+  display: block;
+  background: #fff;
+  border: 1px solid #999;
+  min-width: 10em;
+  font-size: .85em;
+}
+.ol-select .ol-autocomplete ul li {
+  padding: 0 .5em;
+}
+.ol-select .ol-autocomplete ul li:hover {
+  color: #fff;
+  background: rgba(0,60,136,.5);
+}
+.ol-select ul.ol-hidden {
+  display: none;
+}
+
+.ol-select-multi li > div:hover,
+.ol-select-multi li > div.ol-control.ol-select {
+  position: relative;
+  top: unset;
+  left: unset;
+  background: transparent;
+}
+.ol-select-multi li > div  > button,
+.ol-select-multi li > div  .ol-ok {
+  display: none;
+}
+.ol-select-multi li .ol-control.ol-select.ol-collapsed > div,
+.ol-select-multi li > div  > div {
+  display: block;
+}
+
+.ol-control.ol-storymap {
+  top: .5em;
+  left: .5em;
+  bottom: .5em;
+  max-width: 35%;
+  border-radius: .5em;
+  position: absolute;
+  height: auto;
+}
+.ol-storymap {
+  overflow: hidden;
+  padding: 0;
+  height: 100%;
+  position: relative;
+  scroll-behavior: smooth;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.ol-storymap.ol-move {
+  scroll-behavior: unset;
+}
+.ol-storymap.ol-touch {
+  overflow-y: auto;
+}
+
+.ol-storymap .ol-scroll-top,
+.ol-storymap .ol-scroll-next {
+  position: relative;
+  min-height: 1em;
+  color: rgba(0,60,136,.5);
+}
+.ol-storymap .ol-scroll-top:before,
+.ol-storymap .ol-scroll-next:before {
+  content: "";
+  border: .3em solid currentColor;
+  border-radius: .3em;
+  border-color: transparent currentColor currentColor transparent;
+  width: .8em;
+  height: .8em;
+  display: block;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(45deg);
+          transform: translateX(-50%) rotate(45deg);
+  -webkit-animation: ol-bounce-bottom 0.35s linear infinite alternate;
+          animation: ol-bounce-bottom 0.35s linear infinite alternate;
+  pointer-events: none;
+}
+.ol-storymap .ol-scroll-top:before {
+  border-color: currentColor transparent transparent currentColor;
+  -webkit-animation: ol-bounce-top 0.35s linear infinite alternate;
+          animation: ol-bounce-top 0.35s linear infinite alternate;
+}
+
+@-webkit-keyframes ol-bounce-top{
+  from {top: -.2em;}
+  to   {top: .5em;}
+}
+
+@keyframes ol-bounce-top{
+  from {top: -.2em;}
+  to   {top: .5em;}
+}
+@-webkit-keyframes ol-bounce-bottom{
+  from {bottom: -.2em;}
+  to   {bottom: .5em;}
+}
+@keyframes ol-bounce-bottom{
+  from {bottom: -.2em;}
+  to   {bottom: .5em;}
+}
+.ol-swipe
+{	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	-webkit-transform: translate(-50%, -50%);
+}
+
+.ol-swipe:before
+{	content: "";
+	position: absolute;
+	top: -5000px;
+	bottom: -5000px;
+	left: 50%;
+	width: 4px;
+	background: #fff;
+	z-index:-1;
+	transform: translate(-2px, 0);
+	-webkit-transform: translate(-2px, 0);
+}
+.ol-swipe.horizontal:before
+{	left: -5000px;
+	right: -5000px;
+	top: 50%;
+	bottom: auto;
+	width: auto;
+	height: 4px;
+}
+
+.ol-swipe,
+.ol-swipe button
+{	cursor: ew-resize;
+}
+.ol-swipe.horizontal,
+.ol-swipe.horizontal button
+{	cursor: ns-resize;
+}
+
+.ol-swipe:after,
+.ol-swipe button:before,
+.ol-swipe button:after
+{	content: "";
+	position: absolute;
+	top: 25%;
+	bottom: 25%;
+	left: 50%;
+	width: 2px;
+	background: rgba(255,255,255,0.8);
+	transform: translate(-1px, 0);
+	-webkit-transform: translate(-1px, 0);
+}
+.ol-swipe button:after
+{	transform: translateX(5px);
+	-webkit-transform: translateX(5px);
+}
+.ol-swipe button:before
+{	transform: translateX(-7px);
+	-webkit-transform: translateX(-7px);
+}
+
+.ol-control.ol-timeline {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transition: .3s;
+  transition: .3s;
+}
+.ol-control.ol-timeline.ol-collapsed {
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+.ol-timeline {
+  overflow: hidden;
+  padding: 2px 0 0;
+}
+.ol-timeline .ol-scroll {
+  overflow: hidden;
+  padding: 0;
+  scroll-behavior: smooth;
+  line-height: 1em;
+  height: 6em;
+  padding: 0 50%;
+}
+.ol-timeline .ol-scroll.ol-move {
+  scroll-behavior: unset;
+}
+.ol-timeline.ol-touch .ol-scroll{
+  overflow-x: auto;
+}
+
+.ol-timeline.ol-hasbutton .ol-scroll {
+  margin-left: 1.5em;
+  padding: 0 calc(50% - .75em);
+}
+.ol-timeline .ol-buttons {
+  display: none;
+  position: absolute;
+  top: 0;
+  background: rgba(255,255,255,.5);
+  width: 1.5em;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+}
+.ol-timeline.ol-hasbutton .ol-buttons {
+  display: block;
+}
+.ol-timeline .ol-buttons button {
+  font-size: 1em;
+  margin: 1px;
+  position: relative;
+}
+.ol-timeline .ol-buttons .ol-zoom-in:before,
+.ol-timeline .ol-buttons .ol-zoom-out:before {
+  content: "+";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.ol-timeline .ol-buttons .ol-zoom-out:before{
+  content: '−';
+}
+
+.ol-timeline .ol-scroll > div {
+  height: 100%;
+  position: relative;
+}
+
+.ol-timeline .ol-scroll .ol-times {
+  background: rgba(255,255,255,.5);
+  height: 1em;
+  bottom: 0;
+  position: absolute;
+  left: -1000px;
+  right: -1000px;
+}
+.ol-timeline .ol-scroll .ol-time {
+  position: absolute;
+  font-size: .7em;
+  color: #999;
+  bottom: 0;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ol-timeline .ol-scroll .ol-time.ol-year {
+  color: #666;
+  z-index: 1;
+}
+.ol-timeline .ol-scroll .ol-time:before {
+  content: "";
+  position: absolute;
+  bottom: 1.2em;
+  left: 50%;
+  height: 500px;
+  border-left: 1px solid currentColor;
+}
+
+.ol-timeline .ol-scroll .ol-features {
+  position: absolute;
+  top: 0;
+  bottom: 1em;
+  left: -200px;
+  right: -1000px;
+  margin: 0 0 0 200px;
+  overflow: hidden;
+}
+
+.ol-timeline .ol-scroll .ol-feature {
+  position: absolute;
+  font-size: .7em;
+  color: #999;
+  top: 0;
+  background: #fff;
+  max-width: 3em;
+  max-height: 2.4em;
+  min-height: 1em;
+  line-height: 1.2em;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  padding: 0 .5em 0 0;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.ol-timeline.ol-zoomhover .ol-scroll .ol-feature:hover,
+.ol-timeline.ol-zoomhover .ol-scroll .ol-feature.ol-select {
+  z-index: 1;
+  -webkit-transform: scale(1.2);
+          transform: scale(1.2);
+  background: #eee;
+  /* max-width: 14em!important; */
+}
+
+/* Center */
+.ol-timeline .ol-center-date {
+  display: none;
+  position: absolute;
+  left: 50%;
+  height: 100%;
+  width: 2px;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  background-color: #f00;
+  opacity: .4;
+}
+.ol-timeline.ol-hasbutton .ol-center-date {
+  left: calc(50% + .75em);
+}
+
+/* Show center */ 
+.ol-timeline.ol-pointer .ol-center-date {
+  display: block;
+}
+.ol-timeline.ol-pointer .ol-center-date:before, 
+.ol-timeline.ol-pointer .ol-center-date:after {
+  content: '';
+  border: 0.3em solid transparent;
+  border-width: .3em .25em;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ol-timeline.ol-pointer .ol-center-date:before {
+  border-top-color: #f00;
+  top: 0;
+}
+.ol-timeline.ol-pointer .ol-center-date:after {
+  border-bottom-color: #f00;
+  bottom: 0
+}
+
+/* show interval */
+.ol-timeline.ol-interval .ol-center-date {
+  display: block;
+  background-color: transparent;
+  border: 0 solid #000;
+  border-width: 0 10000px;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  opacity: .2;
+}
+.ol-target-overlay .ol-target 
+{	border: 1px solid transparent;
+	-webkit-box-shadow: 0 0 1px 1px #fff;
+	        box-shadow: 0 0 1px 1px #fff;
+	display: block;
+	height: 20px;
+	width: 0;
+}
+
+.ol-target-overlay .ol-target:after,
+.ol-target-overlay .ol-target:before
+{	content:"";
+	border: 1px solid #369;
+	-webkit-box-shadow: 0 0 1px 1px #fff;
+	        box-shadow: 0 0 1px 1px #fff;
+	display: block;
+	width: 20px;
+	height: 0;
+	position:absolute;
+	top:10px;
+	left:-10px;
+}
+.ol-target-overlay .ol-target:after
+{	-webkit-box-shadow: none;	box-shadow: none;
+	height: 20px;
+	width: 0;
+	top:0px;
+	left:0px;
+}
+
+.ol-overlay-container .ol-magnify 
+{	background: rgba(0,0,0, 0.5);
+	border:3px solid #369;
+	border-radius: 50%;
+	height: 150px;
+	width: 150px;
+	overflow: hidden;
+	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
+	        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
+	position:relative;
+	z-index:0;
+}
+
+.ol-overlay-container .ol-magnify:before 
+{	border-radius: 50%;
+	-webkit-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
+	        box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
+	content: "";
+	display: block;
+	height: 100%;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 1;
+}
+
+.ol-overlay-container .ol-magnify:after 
+{
+	border-radius: 50%;
+	-webkit-box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
+	        box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
+	content: "";
+	display: block;
+	height: 0;
+	left: 23%;
+	position: absolute;
+	top: 20%;
+	width: 20%;
+	z-index: 1;
+	transform: rotate(-40deg);
+	-webkit-transform: rotate(-40deg);
+}
+/** popup animation using visible class
+*/
+.ol-popup.anim
+{	visibility: hidden;
+}
+
+/** No transform when visible 
+*/
+.ol-popup.anim.visible
+{	visibility: visible;
+	transform: none;
+	-webkit-transform: none;
+	-webkit-animation: ol-popup_bounce 0.4s ease 1;
+	        animation: ol-popup_bounce 0.4s ease 1;
+}
+
+@-webkit-keyframes ol-popup_bounce
+{	from { -webkit-transform: scale(0); transform: scale(0); }
+	50%  { -webkit-transform: scale(1.1); transform: scale(1.1) }
+	80%  { -webkit-transform: scale(0.95); transform: scale(0.95) }
+	to   { -webkit-transform: scale(1); transform: scale(1); }
+}
+
+@keyframes ol-popup_bounce
+{	from { -webkit-transform: scale(0); transform: scale(0); }
+	50%  { -webkit-transform: scale(1.1); transform: scale(1.1) }
+	80%  { -webkit-transform: scale(0.95); transform: scale(0.95) }
+	to   { -webkit-transform: scale(1); transform: scale(1); }
+}
+
+/* Hide to prevent flickering on animate */
+.ol-popup.anim.visible .anchor
+{	/* animation: ol-popup_opacity 0.4s ease 1; */
+}
+@-webkit-keyframes ol-popup_opacity
+{	from { visibility:hidden }
+	to   { visibility:hidden }
+}
+@keyframes ol-popup_opacity
+{	from { visibility:hidden }
+	to   { visibility:hidden }
+}
+
+/** Transform Origin */
+.ol-popup.anim.ol-popup-bottom.ol-popup-left 
+{	transform-origin:0 100%;
+	-webkit-transform-origin:0 100%;
+}
+.ol-popup.anim.ol-popup-bottom.ol-popup-right 
+{	transform-origin:100% 100%;
+	-webkit-transform-origin:100% 100%;
+}
+.ol-popup.anim.ol-popup-bottom.ol-popup-center 
+{	transform-origin:50% 100%;
+	-webkit-transform-origin:50% 100%;
+}
+.ol-popup.anim.ol-popup-top.ol-popup-left 
+{	transform-origin:0 0;
+	-webkit-transform-origin:0 0;
+}
+.ol-popup.anim.ol-popup-top.ol-popup-right 
+{	transform-origin:100% 0;
+	-webkit-transform-origin:100% 0;
+}
+.ol-popup.anim.ol-popup-top.ol-popup-center 
+{	transform-origin:50% 0;
+	-webkit-transform-origin:50% 0;
+}
+.ol-popup.anim.ol-popup-middle.ol-popup-left
+{	transform-origin:0 50%;
+	-webkit-transform-origin:0 50%;
+}
+.ol-popup.anim.ol-popup-middle.ol-popup-right
+{	transform-origin:100% 50%;
+	-webkit-transform-origin:100% 50%;
+}
+
+/** ol.popup */
+.ol-popup {
+  font-size:0.9em;
+  -webkit-user-select: none;  
+  -moz-user-select: none;    
+  -ms-user-select: none;      
+  user-select: none;
+}
+.ol-popup .ol-popup-content {
+  overflow:hidden;
+  cursor: default;
+  padding: 0.25em 0.5em;
+}
+.ol-popup.hasclosebox .ol-popup-content {
+  margin-right: 1.7em;
+}
+.ol-popup .ol-popup-content:after {
+  clear: both;
+  content: "";
+  display: block;
+  font-size: 0;
+  height: 0;
+}
+
+/** Anchor position */
+.ol-popup .anchor {
+  display:block;
+  width:0px;
+  height:0px;
+  background:red;
+  position:absolute;
+  margin: -11px 21px;
+    pointer-events: none;
+}
+.ol-popup .anchor:after,
+.ol-popup .anchor:before {
+  position:absolute;
+}
+.ol-popup-right .anchor:after,
+.ol-popup-right .anchor:before {
+  right:0;
+}
+.ol-popup-top .anchor { top:0; }
+.ol-popup-bottom .anchor { bottom:0; }
+.ol-popup-right .anchor { right:0; }
+.ol-popup-left .anchor { left:0; }
+.ol-popup-center .anchor { 
+  left:50%; 
+  margin-left: 0!important;
+}
+.ol-popup-middle .anchor { 
+  top:50%; 
+  margin-top: 0!important;
+}
+.ol-popup-center.ol-popup-middle .anchor { 
+  display:none; 
+}
+
+/** Fixed popup */
+.ol-popup.ol-fixed {
+  margin: 0!important;
+  top: .5em!important;
+  right: .5em!important;
+  left: auto!important;
+  bottom: auto!important;
+}
+.ol-popup.ol-fixed .anchor {
+  display: none;
+}
+.ol-popup.ol-fixed.anim {
+  -webkit-animation: none;
+  animation: none;
+}
+
+.ol-popup .ol-fix {
+  width: 1em;
+  height: .9em;
+  background: #fff;
+  position: relative;
+  float: right;
+  margin: .2em;
+  cursor: pointer;
+}
+.ol-popup .ol-fix:before {
+  content: "";
+  width: .8em;
+  height: .7em;
+  display: block;
+  border: .1em solid #666;
+      border-right-width: 0.1em;
+  border-right-width: .3em;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: .1em;
+}
+
+/** Add a shadow to the popup */
+.ol-popup.shadow {
+  -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
+          box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
+}
+
+/** Close box */
+.ol-popup .closeBox {
+  background-color: rgba(0, 60, 136, 0.5);
+  color: #fff;
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+  float: right;
+  font-size: 0.9em;
+  font-weight: 700;
+  width: 1.4em;
+  height: 1.4em;
+  margin: 5px 5px 0 0;
+  padding: 0;
+  position: relative;
+  display:none;
+}
+.ol-popup.hasclosebox .closeBox {
+  display:block;
+}
+
+.ol-popup .closeBox:hover {
+  background-color: rgba(0, 60, 136, 0.7);
+}
+/* the X */
+.ol-popup .closeBox:after {
+  content: "\00d7";
+  font-size:1.5em;
+  top: 50%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  text-align: center;
+  line-height: 1em;
+  margin: -0.5em 0;
+  position: absolute;
+}
+
+/** Modify touch poup */
+.ol-popup.modifytouch {
+  background-color: #eee;
+}
+.ol-popup.modifytouch .ol-popup-content {	
+  padding: 0 0.25em;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+.ol-popup.modifytouch .ol-popup-content a {
+  text-decoration: none;
+}
+
+/** Tool tips popup*/
+.ol-popup.tooltips {
+  background-color: #ffa;
+}
+.ol-popup.tooltips .ol-popup-content{
+  padding: 0 0.25em;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+
+/** Default popup */
+.ol-popup.default {
+  background-color: #fff;
+  border:1px solid #69f;
+  border-radius: 5px;
+  margin:11px 0;
+}
+.ol-popup-left.default {
+  margin:11px 10px 11px -22px;
+}
+.ol-popup-right.default {
+  margin:11px -22px 11px 10px;
+}
+.ol-popup-middle.default {
+  margin:0 10px;
+}
+
+.ol-popup.default .anchor:after,
+.ol-popup.default .anchor:before {
+  content:"";
+  border-color: #69f transparent;
+  border-style: solid;
+  border-width: 11px;
+  margin: 0 -11px;
+}
+.ol-popup.default .anchor:after {
+  border-color: #fff transparent;
+  border-width: 9px;
+  margin: 3px -9px;
+}
+
+.ol-popup-top.default .anchor:before,
+.ol-popup-top.default .anchor:after {
+  border-top:0;
+  top:0;
+}
+
+.ol-popup-bottom.default .anchor:before,
+.ol-popup-bottom.default .anchor:after {
+  border-bottom:0;
+  bottom:0;
+}
+
+.ol-popup-middle.default .anchor:before {
+  margin: -11px -33px;
+  border-color: transparent #69f;
+}
+.ol-popup-middle.default .anchor:after {
+  margin: -9px -30px;
+  border-color: transparent #fff;
+}
+.ol-popup-middle.ol-popup-left.default .anchor:before,
+.ol-popup-middle.ol-popup-left.default .anchor:after
+{	border-left:0;
+}
+.ol-popup-middle.ol-popup-right.default .anchor:before,
+.ol-popup-middle.ol-popup-right.default .anchor:after
+{	border-right:0;
+}
+
+/** Placemark popup */
+.ol-popup.placemark {
+  font-size: 15px;	
+    color: #c00;
+    background-color: #fff;
+    border: .45em solid currentColor;
+    margin: .65em 0;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    min-width: unset;
+    -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform-origin: 50% 150%!important;
+          transform-origin: 50% 150%!important;
+}
+
+.ol-popup.placemark .ol-popup-content {
+  overflow: hidden;
+    cursor: default;
+    padding: 0;
+    text-align: center;
+    margin: -.1em;
+}
+.ol-popup.placemark .anchor {
+  margin: -.4em;
+}
+
+.ol-popup.placemark .anchor:before {
+    content: "";
+    margin: -.5em -.5em;
+    background: transparent;
+    width: 1em;
+    height: .5em;
+    border-radius: 50%;
+    -webkit-box-shadow: 0 1em 0.5em rgba(0,0,0,.5);
+            box-shadow: 0 1em 0.5em rgba(0,0,0,.5);
+}
+.ol-popup.placemark .anchor:after {
+    content: "";
+    border-color: currentColor transparent;
+    border-style: solid;
+    border-width: 1em .7em 0;
+    margin: -.75em -.7em;
+  bottom:0;
+}
+
+/** Placemark Shield */
+.ol-popup.placemark.shield {
+  border-radius: .2em;
+}
+
+.ol-popup.placemark.shield .anchor:after {
+    border-width: .8em 1em 0;
+    margin: -.7em -1em;
+}
+
+/** Placemark Blazon */
+.ol-popup.placemark.blazon {
+  border-radius: .2em;
+}
+
+/** Placemark Needle/Pushpin */
+.ol-popup.placemark.pushpin {	
+  margin: 1.5em 0;
+  border-radius: 0;
+  border-color: currentColor transparent;
+  background: transparent!important;
+  -webkit-box-shadow: inset 2em 0 currentColor;
+          box-shadow: inset 2em 0 currentColor;
+  border-width: .3em .5em .5em;
+}
+.ol-popup.placemark.needle {	
+  margin: 1.5em 0;
+}
+.ol-popup.placemark.pushpin .anchor,
+.ol-popup.placemark.needle .anchor {
+  margin: -1.5em;
+}
+.ol-popup.placemark.pushpin .anchor:after,
+.ol-popup.placemark.needle .anchor:after {
+  border-style: solid;
+    border-width: 2em .15em 0;
+    margin: -.55em -0.2em;
+    width: .1em;
+}
+.ol-popup.placemark.pushpin .anchor:before,
+.ol-popup.placemark.needle .anchor:before {
+    margin: -.75em -.5em;
+}
+
+/** Placemark Flag */
+.ol-popup.placemark.flagv {
+  border-radius: 0;
+  margin: 0 0 1.5em 1em;
+  border-color: transparent transparent transparent currentColor;
+  border-width: 1em 0 1em 2em;
+  width: 0;
+  height: 0;
+  background-color: transparent;
+  -webkit-transform-origin: 0% 150%!important;
+          transform-origin: 0% 150%!important;
+}
+.ol-popup.placemark.flagv .anchor {
+  margin: -2em;
+  margin-left: -1em !important;
+}
+
+.ol-popup.placemark.flag {	
+  margin: 0 0 1.5em 1em;
+  border-radius: 0;
+  -webkit-transform-origin: 0% 150%!important;
+          transform-origin: 0% 150%!important;
+}
+.ol-popup.placemark.flag .anchor {
+  margin: -1.5em;
+}
+.ol-popup.placemark.flagv .anchor:after, 
+.ol-popup.placemark.flag .anchor:after {
+  border-style: solid;
+  border-width: 2em .15em 0;
+  margin: -.55em -1em;
+  width: .1em;
+}
+.ol-popup.placemark.flagv .anchor:before,
+.ol-popup.placemark.flag .anchor:before {
+  margin: -.75em -1.25em;
+}
+
+.ol-popup.placemark.flag.finish {
+  background-image: 
+    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), 
+    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+  background-size: 1em 1em;
+  background-position: .5em 0, 0 .5em;
+  border-width: .25em;
+  margin: 0 0 1.7em .8em;
+}
+
+/** Black popup */
+.ol-popup.black .closeBox 
+{	background-color: rgba(0,0,0, 0.5);
+  border-radius: 5px;
+  color: #f80;
+}
+.ol-popup.black .closeBox:hover
+{	background-color: rgba(0,0,0, 0.7);
+  color:#da2;
+}
+
+.ol-popup.black 
+{	background-color: rgba(0,0,0,0.6);
+  border-radius: 5px;
+  margin:20px 0;
+  color:#fff;
+}
+.ol-popup-left.black
+{	margin:20px 10px 20px -22px;
+}
+.ol-popup-right.black
+{	margin:20px -22px 20px 10px;
+}
+.ol-popup-middle.black 
+{	margin:0 11px;
+}
+
+.ol-popup.black .anchor {
+  margin: -20px 11px;
+} 
+.ol-popup.black .anchor:before 
+{	content:"";
+  border-color: rgba(0,0,0,0.6) transparent;
+  border-style: solid;
+  border-width: 20px 11px;
+}
+
+.ol-popup-top.black .anchor:before
+{	border-top:0;
+  top:0;
+}
+
+.ol-popup-bottom.black .anchor:before
+{	border-bottom:0;
+  bottom:0;
+}
+
+.ol-popup-middle.black .anchor:before
+{	margin: -20px -22px;
+  border-color: transparent rgba(0,0,0,0.6);
+}
+.ol-popup-middle.ol-popup-left.black .anchor:before
+{	border-left:0;
+}
+.ol-popup-middle.ol-popup-right.black .anchor:before {
+  border-right:0;
+}
+
+.ol-popup-center.black .anchor:before {
+  margin: 0 -10px;
+}
+
+
+/** Green tips popup */
+.ol-popup.tips .closeBox {
+  background-color: #f00;
+  border-radius: 50%;
+  color: #fff;
+  width:1.2em;
+  height:1.2em;
+}
+.ol-popup.tips .closeBox:hover {
+  background-color: #f40;
+}
+
+.ol-popup.tips {
+  background-color: #cea;
+  border: 5px solid #ad7;
+  border-radius: 5px;
+  margin:20px 0;
+  color:#333;
+}
+.ol-popup-left.tips {
+  margin:20px 10px 20px -22px;
+}
+.ol-popup-right.tips {
+  margin:20px -22px 20px 10px;
+}
+.ol-popup-middle.tips {
+  margin:0 20px;
+}
+
+.ol-popup.tips .anchor {
+  margin: -25px 16px;
+} 
+.ol-popup.tips .anchor:before {
+  content:"";
+  border-color: #ad7 transparent;
+  border-style: solid;
+  border-width: 20px 11px;
+}
+
+.ol-popup-top.tips .anchor:before {
+  border-top:0;
+  top:0;
+}
+.ol-popup-bottom.tips .anchor:before {
+  border-bottom:0;
+  bottom:0;
+}
+.ol-popup-center.tips .anchor:before {
+  border-width: 20px 6px;
+  margin: 0 -6px;
+}
+.ol-popup-left.tips .anchor:before {
+  border-left:0;
+  margin-left:0;
+}
+.ol-popup-right.tips .anchor:before {
+  border-right:0;
+  margin-right:0;
+}
+
+.ol-popup-middle.tips .anchor:before {
+  margin: -6px -41px;
+  border-color: transparent #ad7;
+  border-width:6px 20px;
+}
+.ol-popup-middle.ol-popup-left.tips .anchor:before {
+  border-left:0;
+}
+.ol-popup-middle.ol-popup-right.tips .anchor:before {
+  border-right:0;
+}
+
+/** Warning popup */
+.ol-popup.warning .closeBox {
+  background-color: #f00;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 0.83em;
+}
+.ol-popup.warning .closeBox:hover {
+  background-color: #f40;
+}
+
+.ol-popup.warning {
+  background-color: #fd0;
+  border-radius: 3px;
+  border:4px dashed #f00;
+  margin:20px 0;
+  color:#900;
+  margin:28px 10px;
+}
+.ol-popup-left.warning {
+  margin-left:-22px;
+  margin-right:10px;
+}
+.ol-popup-right.warning {
+  margin-right:-22px;
+  margin-left:10px;
+}
+.ol-popup-middle.warning {
+  margin:0 22px;
+}
+
+.ol-popup.warning .anchor {
+  margin: -33px 7px;
+} 
+.ol-popup.warning .anchor:before {
+  content:"";
+  border-color: #f00 transparent;
+  border-style: solid;
+  border-width: 30px 11px;
+}
+
+.ol-popup-top.warning .anchor:before {
+  border-top:0;
+  top:0;
+}
+.ol-popup-bottom.warning .anchor:before {
+  border-bottom:0;
+  bottom:0;
+}
+
+.ol-popup-center.warning .anchor:before {
+  margin: 0 -21px;
+}
+.ol-popup-middle.warning .anchor:before {
+  margin: -10px -33px;
+  border-color: transparent #f00;
+  border-width:10px 22px;
+}
+.ol-popup-middle.ol-popup-left.warning .anchor:before {
+  border-left:0;
+}
+.ol-popup-middle.ol-popup-right.warning .anchor:before {
+  border-right:0;
+}
+
+.ol-popup .ol-popupfeature table {
+  width: 100%;
+}
+.ol-popup .ol-popupfeature table td {
+  max-width: 25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ol-popup .ol-popupfeature table td img {
+  max-width: 100px;
+  max-height: 100px;
+}
+.ol-popup .ol-popupfeature tr:nth-child(2n+1) {
+  background-color: #eee;
+}
+.ol-popup .ol-popupfeature .ol-zoombt {
+  border: 0;
+  width: 2em;
+  height: 2em;
+  display: inline-block;
+  color: rgba(0,60,136,.5);
+  position: relative;
+  background: transparent;
+  outline: none;
+}
+.ol-popup .ol-popupfeature .ol-zoombt:before {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  background-color: transparent;
+  border: .17em solid currentColor;
+  border-radius: 100%;
+  top: .3em;
+  left: .3em;
+}
+.ol-popup .ol-popupfeature .ol-zoombt:after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 1.35em;
+  left: 1.15em;
+  border-width: .1em .3em;
+  border-style: solid;
+  border-radius: .03em;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  -webkit-box-shadow: -0.2em 0 0 -0.04em;
+          box-shadow: -0.2em 0 0 -0.04em;
+}
+
+.ol-popup .ol-popupfeature .ol-count{
+  float: right;
+  margin: .25em 0;
+}
+.ol-popup .ol-popupfeature .ol-prev,
+.ol-popup .ol-popupfeature .ol-next {
+  border-style: solid;
+  border-color: transparent rgba(0,60,136,.5);
+  border-width: .5em 0 .5em .5em;
+  display: inline-block;
+  vertical-align: bottom;
+  margin: 0 .5em;
+  cursor: pointer;
+}
+.ol-popup .ol-popupfeature .ol-prev{
+  border-width: .5em .5em .5em 0;
+}
+
+.ol-popup.tooltips.black {
+  -webkit-transform: scaleY(1.3);
+          transform: scaleY(1.3);
+  padding: .2em .5em;
+  background-color: rgba(0,0,0, 0.5);
+}
+.ol-popup-middle.tooltips.black .anchor:before {
+  border-width: 5px 10px;
+  margin: -5px -21px;
+}
\ No newline at end of file

reports/static/reports/css/scldata.css

@@ -162,3 +162,58 @@ input[type=range]::-webkit-slider-thumb {
     border-radius: 100%;
     cursor: pointer;
 } */
+
+/* Reset Select */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background: #2c3e50;
+  background-image: none;
+}
+/* Custom Select */
+.select {
+  position: relative;
+  display: block;
+  width: 9em;
+  height: 3em;
+  line-height: 3;
+  background: #2c3e50;
+  overflow: hidden;
+  border-radius: .25em;
+}
+select {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 0 0 .5em;
+  color: #fff;
+  cursor: pointer;
+}
+select::-ms-expand {
+  display: none;
+}
+/* Arrow */
+.select::after {
+  content: '\25BC';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 1em;
+  background: #34495e;
+  pointer-events: none;
+}
+/* Transition */
+.select:hover::after {
+  color: #f39c12;
+}
+.select::after {
+  -webkit-transition: .25s all ease;
+  -o-transition: .25s all ease;
+  transition: .25s all ease;
+}

reports/static/reports/js/Reports_scripts.js

@@ -65,7 +65,6 @@ $(function () {
                 responsive: true
             });
 
-
         });
 
 

reports/static/reports/js/minimap.js

 MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
+MAX_OPACITY = 1;
+FIRST_IMAGE_LAYER_INDEX = 2;
 
 // create wkt polygon
-const format = new ol.format.WKT();
-const feature = format.readFeature(polygon, {
+const wktFormat = new ol.format.WKT();
+const polygonFeature = wktFormat.readFeature(polygon, {
   dataProjection: 'EPSG:4326',
 	featureProjection: 'EPSG:3857'
 });
 
-
 // Create layers
-const mapbox = new ol.layer.Tile({
+const mapLayer = new ol.layer.Tile({
   name: 'mapbox',
   source: new ol.source.XYZ({
     url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
   })
 });
 
-const vector = new ol.layer.Vector({
+const polygonLayer = new ol.layer.Vector({
   name: 'polygon',
   source: new ol.source.Vector({
-    features: [feature]
+    features: [polygonFeature]
   })
 });
 
+const layers = new Map();
+
 // create map
 const map = new ol.Map({
   target: 'minimap',
-  layers: [mapbox, vector],
+  layers: [mapLayer, polygonLayer],
   view: new ol.View({
     center: ol.proj.fromLonLat([-99.19, 19.61]),
     zoom: 4,
@@ -34,105 +37,216 @@ const map = new ol.Map({
   })
 });
 
-// fit to polygon
-map.getView().fit(feature.getGeometry());
-
-
-// show first date and current date
-let currentDate;
-let currentOpacity = 1;
+// fit (zoom) to polygon
+map.getView().fit(polygonFeature.getGeometry());
 
-if (labels && labels.length > 0) {
-  currentDate = labels[0];
-  addImageLayer(currentDate)
-}
+// show first layer date
+let currentDate = labels[0];
+addImageLayer({
+  layerDate: currentDate
+});
 
+// main function to change layers
+// data = { layerDate: to change all layers by date }
+// data = { layerName: to add single layer }
+function addImageLayer(data) {
+  if (data.layerDate) {
+    currentDate = data.layerDate;
+  }
 
-function addImageLayer(labelDate) {
   $.ajax({
     type: 'POST',
     dataType: "json",
-    data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate},
+    data: {'purchase_id': purchase_id, 'report': zone, 'date': currentDate},
     url: '/reports/tiles/tileinfo',
-    success: function (data) {
+    success: response => {
+      changeLayers(data.layerName);
+      setOpacity($('#opacitySlide').val());
+      map.getView().setMinZoom(response.zoom.min);
+      map.getView().setMaxZoom(response.zoom.max);
+    }
+  });
+}
 
-      currentDate = labelDate;
-      removeImageLayers()
+// remove old layers and add layers with new date
+function changeLayers(especific_layerName) {
+  const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
 
-      // add layer
-      getSelectedCheckboxes().forEach(layer_type => {
+  removeLayer(especific_layerName);
+
+  layersToChance.forEach(layerName => {
     const xyz = new ol.layer.Tile({
-          name: layer_type,
-          opacity: (layer_type == 'TCI') ? 1 : currentOpacity,
+      name: layerName,
       source: new ol.source.XYZ({
         projection: 'EPSG:3857',
-            url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDate+'/{z}/{x}/{-y}.png',
-            tilePixelRatio: 2,
-            minZoom: data.zoom.min,
-            maxZoom: data.zoom.max
+        url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layerName+'/'+currentDate+'/{z}/{x}/{-y}.png',
+        tilePixelRatio: 2
       })
     });
 
+    if (layerName === 'TCI') {
+      map.getLayers().insertAt(FIRST_IMAGE_LAYER_INDEX, xyz);
+    } else {
       map.addLayer(xyz);
-      })
-
-      // fit and zoom
-      map.getView().setMinZoom(data.zoom.min);
-      map.getView().setMaxZoom(data.zoom.max);
     }
+
+    layers.set(layerName, xyz);
   });
 }
 
-function removeImageLayers() {
-  map.getLayers().getArray().slice().forEach(layer => {
-    if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon') {
-      map.removeLayer(layer)
+// remove all if there isn't layername
+function removeLayer(layerName) {
+  if (!layerName) {
+    layers.forEach(layer => { map.removeLayer(layer); });
+    layers.clear();
+    return;
   }
-  })
+
+  map.removeLayer(layers.get(layerName));
+  layers.delete(layerName);
 }
 
+// set opacity to layers
 function setOpacity(value) {
-  currentOpacity = value;
-  map.getLayers().getArray().slice().forEach(layer => {
-    if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
+  layers.forEach(layer => {
+    if(layer.get('name') != 'TCI') {
       layer.setOpacity(value)
     }
   })
 }
 
-function getSelectedCheckboxes() {
-  const inputs = $("input[name=layer_type]:checked");
-  let values = []
 
-  Object.keys(inputs).forEach(key => {
-    let value = inputs[key].value;
-    if (value) {values.push(value)}
-  })
+// *********** Irving ******************
+//  Funciones de comparacion
+
+//vigila cuando se cierra el menu de comparar y cuando se cierra desactiva la comparacion (si la clase de compare incluye menu-open está abierto)
+var compareMenu = document.getElementById('compare');
+var observer = new MutationObserver( function(mutations) {
+  mutations.forEach( function(mutation) {
+    if (mutation.attributeName == 'class') {
+      if(compareMenu.className.indexOf("open")===-1) {  //se cerró el menu de comparacion
+        exitCompare();
+      }
+    }
+  });
+});
+observer.observe(compareMenu, { attributes : true, attributeOldValue: true, attributeFilter : ['class'], subtree: true});
+
+//crea el control swipe, que sirve para comparar
+var ctrl = new ol.control.Swipe();
+
+//funcion que inicia la comparacion
+//recibe la lista de fechas y por default compara la primera y la ultima
+function compare(labels) {
+  var swipeControl = false;
 
-  return values;
+  map.getControls().forEach(function (control) {  //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
+    if(control instanceof ol.control.Swipe){ //si ya tiene el control agregado
+      swipeControl =true;
+    }
+  });
+
+  if(swipeControl==true) {  //si ya tiene el comparador no hace nada, ya esta en modo comparacion
+    //map.removeControl(swipeControlObj);
+  } else {  //si no tiene el comparador lo agrega
+    //removeImageLayers();
+    map.addControl(ctrl);
+    ctrl.set('position', 0.5);
+    //console.log(map.controls)
+    var labelDateLeft = labels[0]                 //por default compara la primera y ultima fecha
+    var labelDateRight = labels[labels.length-1]
+
+    //pone las fechas por default en los selectores de fechas
+    document.getElementById("selectLeftCompare").value = labelDateLeft;
+    document.getElementById("selectRightCompare").value = labelDateRight;
+
+     //agrega las capas izquierda/derecha
+    selectLeft(labelDateLeft);
+    selectRight(labelDateRight);
+
+    //muestra los selectores de fechas y oculta la linea de tiempo
+    document.getElementById("selectLeft").style.display = "block";
+    document.getElementById("selectRight").style.display = "block";
+    document.getElementById("timeLine").style.display = "none";
+  }
 }
 
-function getChartDataIndex(id) {
-  let foundIndex;
+//sale del modo comparacion
+function exitCompare() {
+  map.getControls().forEach(function (control) {  //checa si ya se añadio el control de comparacion (swipe)
+    if(control instanceof ol.control.Swipe){ //ya tiene el control agregado lo quita
+      map.removeControl(control);
+    }
+  });
 
-  myChart.config.data.datasets.forEach(function (data, index) {
-    let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-');
-    if (label === id) {
-      foundIndex = index;
+  //quita las capas de comparacion izquierda/derecha
+  var imageLayers = map.getLayers().getArray().slice();
+  imageLayers.forEach(layer => {
+    if(layer.get('name') === 'left' || layer.get('name') === 'right') {
+      map.removeLayer(layer)
     }
   })
 
-  return foundIndex;
+  //oculta los selectores de fechas y muestra la linea de tiempo
+  document.getElementById("selectLeft").style.display = "none";
+  document.getElementById("selectRight").style.display = "none";
+  document.getElementById("timeLine").style.display = "block";
 }
 
-$('input[name=layer_type]').on('click', function(){
-  const input = $(this);
-  const index = getChartDataIndex(input.parent().attr('id'));
 
-  if (index > -1) {
-    myChart.getDatasetMeta(index).hidden=!input.prop("checked");
-    myChart.update()
-  }
+//selecciona el lado izquierdo para comparar
+function selectLeft(date) {
+  var labelDateLeft = date;
+  var layer_type = 'TCI';
+  const left = new ol.layer.Tile({
+    name: 'left',
+    opacity: 1,
+    source: new ol.source.XYZ({
+      projection: 'EPSG:3857',
+      url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateLeft+'/{z}/{x}/{-y}.png',
+      tilePixelRatio: 2,
+      minZoom: 10,
+      maxZoom: 15
+    })
+  });
+  map.addLayer(left);
+  ctrl.addLayer(left);
+}
 
-  addImageLayer(currentDate);
-});
+//selecciona el lado derecho para comparar
+function selectRight(date){
+    var labelDateRight = date;
+    var layer_type = 'TCI';
+    const right = new ol.layer.Tile({
+      name: 'right',
+      opacity: 1,
+      source: new ol.source.XYZ({
+        projection: 'EPSG:3857',
+        url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateRight+'/{z}/{x}/{-y}.png',
+        tilePixelRatio: 2,
+        minZoom: 10,
+        maxZoom: 15
+      })
+    });
+    map.addLayer(right);
+    ctrl.addLayer(right, true);
+}
+
+//selecciona comparacion vertical u horizontal
+function setCompareDirection(direction){
+  ctrl.set('orientation',direction)
+
+  //mueve los selectores de fechas
+  if(direction === 'horizontal'){
+    document.getElementById("selectLeft").style.bottom = "70%";
+    document.getElementById("selectLeft").style.left = "15%";
+    document.getElementById("selectRight").style.left = "15%";
+  }
+  else{
+    document.getElementById("selectLeft").style.bottom = "50px";
+    document.getElementById("selectLeft").style.left = "30%";
+    document.getElementById("selectRight").style.left = "75%";
+  }
+}
+//  Fin funciones de comparacion
+//******************************

reports/static/reports/js/reportImg.js

@@ -25,10 +25,13 @@ document.getElementById("myChart").onclick = function (evt) {
     if(activePoint.length>0){
 
         var firstPoint = activePoint[0];
-        //console.log(firstPoint)
-        //console.log(firstPoint._datasetIndex)    //indice de la clase a la que pertenece (vegetación, agua, etc.)
         var label = myChart.data.labels[firstPoint._index];
-        addImageLayer(label)
+        //console.log(firstPoint._datasetIndex)    //indice de la clase a la que pertenece (vegetación, agua, etc.)
+
+        addImageLayer({
+          layerDate: label
+        });
+
         //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
         //if (!firstPoint) return;
         activePoints.forEach(function (value, index) {

reports/templates/Reports.html

@@ -130,7 +130,7 @@
         <br>
         <ul class="sidebar-menu" data-widget="tree">
             <li>
-                <a class="treeview " href="{{ BASE_URL }}/catalog">
+                <a class="treeview " href="{%  url 'map' %}">
                     <i class="fa fa-map"></i>
                     <span>Home</span>
                     <span class="pull-right-container">

reports/templates/aside.html

@@ -35,6 +35,44 @@
                     <span class="label label-primary pull-right"></span>
                 </span>
             </a>
+            
+        <li class="treeview" id="compare">
+            <a href="#" onclick="compare(labels)">
+                <i class="fas fa-columns"></i>
+                <span>Compare</span>
+                <span class="pull-right-container">
+              <span class="label label-primary pull-right"></span>
+            </span>
+            </a>
+            <ul class="treeview-menu sidebar-form" id="compareOptions">
+                <li>
+                    <a class="treeview submenu" href="#" onclick="setCompareDirection('vertical')" id="compvertical">
+                        <i class="fas fa-arrows-alt-v"></i>
+                        <span>Vertical</span>
+                    </span>
+                    </a>
+                </li>
+                <li>
+                    <a class="treeview submenu" href="#" onclick="setCompareDirection('horizontal')" id="comphorizontal">
+                        <i class="fas fa-arrows-alt-h"></i>
+                        <span>Horizontal</span>
+                    </span>
+                    </a>
+                </li>
+            </ul>
+        </li>            
+ 
+<!-- 
+            <a class="treeview " href="#" onclick="compare(labels)">
+                <i class="fas fa-columns"></i></i>
+                <i class="fa fa-eye-slash hideChart" style="display:none"></i>
+                <span class="showChart">Compare</span>
+                <span class="hideChart" style="display:none">Not compare</span>
+                <span class="pull-right-container">
+                    <span class="label label-primary pull-right"></span>
+                </span>
+            </a>            
+ -->           
         </li>
         {% endif %}
         <li class="treeview">
@@ -131,7 +169,7 @@
                     </a>
                 </li>
                 <li>
-                    <a class="treeview submenu" href="#" id="downloadPdf">
+                    <a class="treeview submenu" href="{% url 'PDF' purchaseID %}" target="_blank" download="Report">
                         <i class="fa fa-file-pdf-o"></i>
                         <span>Export to PDF</span>
                         <span class="pull-right-container">
@@ -139,15 +177,6 @@
                     </span>
                     </a>
                 </li>
-                <li>
-                    <a class="treeview submenu" href="../../static/reports/tmpImages/repsat_test_dev/{{ email }}/{{ purchaseID }}/{{ zone }}.pdf" id="downloadPdf" target="_blank">
-                        <i class="fa fa-file-pdf-o"></i>
-                        <span>Export to PDF v2</span>
-                        <span class="pull-right-container">
-                        <span class="label label-primary pull-right"></span>
-                    </span>
-                    </a>
-                </li>
             </ul>
         </li>
         <li class="treeview">

reports/templates/sclData.html

@@ -5,12 +5,14 @@
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'reports/css/ol-ext.css' %}" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
           type="text/css">
     <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" src="{% static 'reports/js/ol-ext.js' %}"></script>
 {% endblock %}
 {% block messages %}
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -117,7 +119,7 @@
 {% block content %}
     <!-- Content Wrapper. Contains page content -->
     <!-- Main content -->
-    <div class="container floating-panel" style="position:absolute; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
+    <div id="timeLine" class="container floating-panel slidecontainer" style="position:absolute;  display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
         <div class="range-control" id="rangecontrol">
             <span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span>
             <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
@@ -132,6 +134,26 @@
         </div>
     </div>
 
+    <div id="selectLeft" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
+        <div class="select">
+                <select onchange="selectLeft(this.value)" id="selectLeftCompare">
+                 {% for label in labels %}
+                       <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
+                 {% endfor %}
+                </select>
+        </div>
+    </div>
+
+    <div id="selectRight" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
+        <div class="select">
+                <select onchange="selectRight(this.value)" id="selectRightCompare">
+                 {% for label in labels %}
+                       <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
+                 {% endfor %}
+                </select>
+        </div>
+    </div>
+
     <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
         <div id="minimap" class="minimap"></div>
 
@@ -247,31 +269,28 @@
 {% block scripts %}
     <script id="rendered-js">
         $('input[id="inputRange"]').on('input', function () {
+            let control = $(this);
+            let controlMin = control.attr('min');
+            let controlMax = control.attr('max');
+            let controlVal = control.val();
+            let controlThumbWidth = control.data('thumbwidth');
+            let range = controlMax - controlMin;
+            let position = (controlVal - controlMin) / range * 100;
+            let positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
+            let fecha = $("option:eq(" + controlVal + ")").text();
+            let valor = $("option:eq(" + controlVal + ")").val();
+
+            addImageLayer({
+              layerDate: valor
+            });
 
-            var control = $(this),
-                controlMin = control.attr('min'),
-                controlMax = control.attr('max'),
-                controlVal = control.val(),
-                controlThumbWidth = control.data('thumbwidth');
-
-            var range = controlMax - controlMin;
-
-            var position = (controlVal - controlMin) / range * 100;
-            var positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
-            var fecha = $("option:eq(" + controlVal + ")").text();
-            var valor = $("option:eq(" + controlVal + ")").val();
-            addImageLayer(valor);
             $("#maptitle").empty();
             $("#maptitle").append("Map Date: " + fecha);
             $("#tooltiptext").empty();
             $("#tooltiptext").append(fecha);
-
         });
 
-
         var slider2 = document.getElementById("inputRange");
-
-
         var sliderOffsetX = slider2.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
         var sliderOffsetY = slider2.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
         var sliderWidth = slider2.offsetWidth - 1;
@@ -282,20 +301,19 @@
             value = sliderValAtPos - 1;
             var fecha = $("option:eq(" + value + ")").text();
             var valor = $("option:eq(" + value + ")").val();
+
             $("#tooltiptext").empty();
             $("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
             $("#tooltiptext").append(fecha);
-
         });
-
-
     </script>
+
     <!-- page script -->
     <script>
-        var legendOnClickHandler = function (e, legendItem) {
-            var index = legendItem.datasetIndex;
-            var ch = this.chart;
-            let checkbox_id = '#sclcheck-'+legendItem.text.toLowerCase().replace(/\s/g, '-');
+        const legendOnClickHandler = function (e, legendItem) {
+            const index = legendItem.datasetIndex;
+            const ch = this.chart;
+            const checkbox_id = '#sclcheck-'+legendItem.text.toLowerCase().replace(/\s/g, '-');
 
             // isDatasetVisible return the opposite status?
             if (ch.getDatasetMeta(index).hidden === null) {
@@ -303,14 +321,22 @@
             } else {
               ch.getDatasetMeta(index).hidden = !ch.getDatasetMeta(index).hidden;
             }
-
             ch.update();
 
-            $(checkbox_id+" :input").prop("checked", !ch.getDatasetMeta(index).hidden);
-            addImageLayer(currentDate);
+            const layerInput = $(checkbox_id+" :input");
+
+            layerInput.prop("checked", !ch.getDatasetMeta(index).hidden);
+
+            if (layerInput.prop("checked")) {
+              addImageLayer({
+                layerName: layerInput.val()
+              });
+            } else {
+              removeLayer(layerInput.val());
+            }
         };
 
-        var showSCLcheckboxes = function(datasets) {
+        const showSCLcheckboxes = function (datasets) {
           if (!datasets || datasets.length < 1) {
             return;
           }
@@ -322,6 +348,43 @@
           });
         }
 
+        const getSelectedLayersName = function () {
+          const inputs = $("input[name=layer_type]:checked");
+          let values = []
+
+          Object.keys(inputs).forEach(key => {
+            let value = inputs[key].value;
+            if (value) {values.push(value)}
+          });
+
+          return values;
+        }
+
+        const getChartDataIndex = function (id) {
+          const datasetsLabels = myChart.config.data.datasets.map(data =>
+            'sclcheck-' + data.label.toLowerCase().replace(' ', '-')
+          );
+          return datasetsLabels.indexOf(id);
+        }
+
+        $('input[name=layer_type]').on('click', function() {
+          const input = $(this);
+          const index = getChartDataIndex(input.parent().attr('id'));
+
+          if (index > -1) {
+            myChart.getDatasetMeta(index).hidden=!input.prop("checked");
+            myChart.update();
+          }
+
+          if (input.prop("checked")) {
+            addImageLayer({
+              layerName: input.val()
+            });
+          } else {
+            removeLayer(input.val());
+          }
+        });
+
         var label;
         // Recibimos el JSON con los datos desde el View
         {% autoescape off %}

reports/urls.py

@@ -16,4 +16,5 @@ urlpatterns = [
     url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'),
     url(r'^ws/is_public', views.wsIs_Public, name='wsIs_Public'),
     url(r'^ws/wsEditTitle', views.wsEditTitle, name='wsEditTitle'),
+    url(r'^ws/PDF/(?P<purchase_id>(\d+))$', views.PDFGenerator, name='PDF'),
 ]

reports/views.py

@@ -9,7 +9,7 @@ import xml.etree.ElementTree as ET
 from collections import OrderedDict
 
 from datetime import datetime
-from django.http import HttpResponse, Http404, JsonResponse
+from django.http import HttpResponse, Http404, JsonResponse, FileResponse
 from django.shortcuts import render, redirect
 from reportlab.lib.pagesizes import letter
 from reportlab.pdfgen import canvas
@@ -19,17 +19,17 @@ from GeoInt_SIDT.settings import BASE_URL
 from administration.views import best_unit_size
 from catalog.models import Purchase
 
-from reportlab.pdfgen.canvas import Canvas
 from reportlab.lib.pagesizes import letter
 from reportlab.lib.styles import getSampleStyleSheet
 from reportlab.lib.units import inch
 from reportlab.lib import colors
 from reportlab.platypus import Paragraph, Frame, Spacer, Image, Table, TableStyle, SimpleDocTemplate, PageBreak
 from reportlab.graphics.charts.barcharts import VerticalBarChart
-from reportlab.graphics.shapes import Drawing, String
-from reportlab.graphics.charts.textlabels import Label, LabelOffset
+from reportlab.graphics.shapes import Drawing
 from reportlab.graphics.charts.legends import Legend
 
+
+
 # -------------------------------------------------------------------------------
 
 ########### lee archivo de configuración ################
@@ -48,7 +48,7 @@ def report_L2ASCL(request, purchase_id):
     reporteDir = 'mask'
     folders = ""
     purchase = Purchase.objects.values('user__email', 'is_public', 'name', 'search__search_name',
-                                       'search__process_id__name').get(pk=purchase_id)
+                                       'search__process_id__name','description').get(pk=purchase_id)
     email = purchase['user__email']
     path = USERS_PATH + email + '/' + purchase_id + '/'
     scl_data_path = USERS_PATH + email + "/" + purchase_id + "/scl_data.json"
@@ -77,13 +77,17 @@ def report_L2ASCL(request, purchase_id):
         "platform": dataProduct['platform'],
         "productLevel": dataProduct['productLevel'],
         "polygon": dataProduct['wkt'],
+        "description": purchase['description'],
         "report_name": "SCL Image Classification Data(Km²)"
     }
 
+
+
     if os.path.exists(path + reporteDir + ".pdf"):
         print ("si existe")
     else:
-        PDFGenerator(request, path, reporteDir, datasets,searchInfo)
+        #PDFGenerator(request, path, reporteDir, datasets,searchInfo)
+        pass
 
     return render(request, template, {"graphData": json.dumps(graphData),
                                       "searchInfo": searchInfo, "IMAGE_PATH": image_path,
@@ -158,7 +162,7 @@ def Reports(request):
                     # else:
                     #    initial_folder = folders.pop(0) + "_sclData"
 
-        print(initial_folder)
+
 
         zip_path = USERS_PATH + request.user.email + "/" + str(producto['id'])
         # print(zip_path)
@@ -334,14 +338,21 @@ def dataToTable(name, data):
     data.insert(0, name)
     return data
 
+def mergeimages(path,file):
+    from PIL import Image
+    layer1 = Image.open(path + file[:8] + "_SCL_60m_0.tif")
+    for i in range(10):
+        layer2 = Image.open(path + file[:8] + "_SCL_60m_" + str(i) + ".tif")
+        nueva = Image.alpha_composite(layer1, layer2)
+        layer1 = nueva
+
+    nueva.save(path + file[:8] + "_SCL_60m_10.tif")
+    return path+file[:8]+"_SCL_60m_10.tif"
 
 # create the table for our document
 def myTable(path1, path2, basefile):
-    #image1 = Image(path1, height=300, width=200, mask='auto')
-
     image1 = Image(path1)
     if image1.imageWidth < image1.imageHeight:
-        print ("mas alto que ancho")
         image2 = Image(path1, height=300, width=200, mask='auto')
     else:
         image2 = Image(path1, height=150, width=400, mask='auto')
@@ -351,8 +362,10 @@ def myTable(path1, path2, basefile):
 
         if file.startswith(basefile[:8]):
             if file.endswith('.tif') and not file.endswith('0.tif'):
-                # image2 = Image(path2 + file, height=300, width=200, mask='auto')
-                image3 = image2
+                if image1.imageWidth < image1.imageHeight:
+                    image3 = Image(mergeimages(path2, file), height=300, width=200, mask='auto')
+                else:
+                    image3 = Image(mergeimages(path2, file), height=150, width=400, mask='auto')
 
     if image1.imageWidth < image1.imageHeight:
         data = [['TCI', 'SCL'], [image2, image3]]
@@ -449,18 +462,52 @@ def myBarLegend(drawing, labels):
 
     return d
 
+@csrf_exempt
+#def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
+def PDFGenerator(request,purchase_id):
+
+    purchase = Purchase.objects.values('user__email', 'is_public', 'name', 'search__search_name',
+                                       'search__process_id__name', 'description').get(pk=purchase_id)
+    email = purchase['user__email']
+
+    ruta = USERS_PATH + email + '/' + purchase_id + '/'
+    thumbs = ruta + 'out/mask/TCI/thumbnails/'
+    SCL = ruta + 'out/mask/SCL/split/'
+    reporteDir = "mask"
+
+    with open(USERS_PATH + email + "/" + purchase_id + "/findProducts.json") as p:
+        dataProduct = json.load(p)
+        startDate = str(dataProduct['startDate'])[:4] + '-' + str(dataProduct['startDate'])[4:6] + '-' + str(
+            dataProduct['startDate'])[6:8]
+        endDate = str(dataProduct['endDate'])[:4] + '-' + str(dataProduct['endDate'])[4:6] + '-' + str(
+            dataProduct['endDate'])[6:8]
+
+    scl_data_path = USERS_PATH + email + "/" + purchase_id + "/scl_data.json"
+
+    graphData, label, defaultLabel, defaultDataset, datasets = ProcessChartData(scl_data_path)
+
 
-def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
-    thumbs = ruta + 'out/' + reporteDir + '/TCI/thumbnails/'
-    SCL = ruta + 'out/' + reporteDir + '/SCL/split/'
+    searchInfo = {
+        "title": purchase['name'],
+        # "title": purchase['search__search_name'],
+        "process": purchase['search__process_id__name'],
+        "startDate": startDate,
+        "endDate": endDate,
+        "clouds": dataProduct['clouds'],
+        "platform": dataProduct['platform'],
+        "productLevel": dataProduct['productLevel'],
+        "polygon": dataProduct['wkt'],
+        "description": purchase['description'],
+        "report_name": "SCL Image Classification Data(Km²)"
+    }
 
     story = []
 
-    story.append(tileinfo("hola"))
 
     # define the style for our paragraph text
     styles = getSampleStyleSheet()
     styles2 = getSampleStyleSheet()
+    styles3 = getSampleStyleSheet()
     styleN = styles['Normal']
     styleN.alignment = 1
     styleN.fontSize=25
@@ -468,6 +515,11 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
     style2 = styles2['Normal']
     style2.alignment = 1
     style2.fontSize = 15
+    style2.leading = 20
+
+    style3 = styles3['Normal']
+    style3.alignment = 1
+    style3.fontSize = 19
 
     # Header
     im = Image(USERS_PATH + 'header.png', width=300, height=70)
@@ -475,32 +527,31 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
     story.append(im)
 
     story.append(Spacer(1, 1.5 * inch))
+
     # add the title
     story.append(Paragraph("<strong>"+searchInfo['report_name']+"</strong>", styleN,))
-    story.append(Spacer(1, .60 * inch))
-    story.append(Paragraph("<strong>"+searchInfo['title']+"</strong>", styleN,))
-    story.append(Spacer(1, .40 * inch))
+    story.append(Spacer(1, .50 * inch))
+    story.append(Paragraph("<strong>"+searchInfo['title']+"</strong>", style3,))
+    story.append(Spacer(1, .30 * inch))
     story.append(Paragraph("<strong>("+searchInfo['startDate']+" - "+searchInfo['endDate']+")</strong>", style2,))
     story.append(Spacer(1, .60 * inch))
     story.append(Paragraph("<strong>Platform: "+searchInfo['platform']+"</strong>", style2,))
     story.append(Spacer(1, .40 * inch))
     story.append(Paragraph("<strong>Product level: "+searchInfo['productLevel']+"</strong>", style2,))
     story.append(Spacer(1, .40 * inch))
-    story.append(Paragraph("<strong>Process:"+searchInfo['process']+"</strong>", style2,))
+    story.append(Paragraph("<strong>Process: "+searchInfo['process']+"</strong>", style2,))
     story.append(Spacer(1, .40 * inch))
     story.append(Paragraph("<strong>Clouds: "+str(searchInfo['clouds'])+" %</strong>", style2,))
+    story.append(Spacer(1, .70 * inch))
+    story.append(Paragraph("<strong>Description: </strong>", style2, ))
+    story.append(Spacer(1, .10 * inch))
+    story.append(Paragraph(searchInfo['description'], style2,))
     story.append(Spacer(1, .40 * inch))
 
-    # convert data to paragraph form and then add paragraphs
-    #story.append(Paragraph(dataToParagraph(subject1, results1), styleN))
-    #story.append(Spacer(1, .25 * inch))
-    #story.append(Paragraph(dataToParagraph(subject2, results2), styleN))
-    #story.append(Spacer(1, .5 * inch))
-
     story.append(PageBreak())
 
     path, dirs, files = next(os.walk(thumbs))
-    print (len(files))
+
     for index, file in enumerate(files):
         values = []
         labels = []
@@ -516,12 +567,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
             labels.append(data['label'])
 
         path1 = thumbs + file
-        # Header
 
 
+        # Header
 
-        # print (width)
-        #########################33
         im = Image(USERS_PATH + 'header.png', width=300, height=70)
 
         im.hAlign = 'CENTER'
@@ -534,9 +583,8 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
         story.append(Spacer(1, .5 * inch))
 
         # add barchart and legend
-        # drawing = myBarChart(values[:len(values) - 1], maxi, file)
+
         drawing = myBarChart(values, maxi, file)
-        # drawing = myBarLegend(drawing, labels[:len(labels) - 1])
         drawing = myBarLegend(drawing, labels)
         drawing.hAlign = 'CENTER'
         story.append(drawing)
@@ -546,7 +594,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
     # build our document with the list of flowables we put together
     doc = SimpleDocTemplate(ruta + reporteDir + ".pdf", pagesize=letter, topMargin=0)
     doc.build(story)
-    pass
+    #return HttpResponse (request.POST.get('ruta'))
+
+    return FileResponse(open(ruta + reporteDir + ".pdf", 'rb'), content_type='application/pdf')
+
 
 
 # -----------------------------------------------------------------------------------------------------------------
@@ -617,7 +668,6 @@ def wsEditTitle(request):
         purchase.name = request.GET.get("zone")
         purchase.description = request.GET.get("description")
         purchase.save()
-        print ("hola")
         return HttpResponse("hola")
     else:
         raise Http404

users/templates/User_profile.html

@@ -122,7 +122,7 @@
             User Profile
         </h1>
         <ol class="breadcrumb">
-            <li><a href="../"><i class="fa fa-home"></i> Home</a></li>
+            <li><a href="{% url 'map' %}"><i class="fa fa-home"></i> Home</a></li>
             <li class="active">User profile</li>
         </ol>
     </section>
@@ -356,7 +356,8 @@
                 type: 'POST',
                 dataType: "json",
                 data: {'title': label, "user_id": $('#user_id').val()},
-                url: '../../users/ws/report_table',
+                //url: '../../users/ws/report_table',
+                url: '{% url "wsPurchasesPM" %}',
                 success: function (data) {
                     console.log(data);
                     $('#mostrar').empty();

users/templates/users_aside.html

@@ -2,7 +2,7 @@
     <br>
     <ul class="sidebar-menu" data-widget="tree">
         <li>
-            <a class="treeview " href="{{ BASE_URL }}/reports">
+            <a class="treeview " href="{% url 'reports' %}">
                 <i class="fa fa-files-o"></i>
                 <span>Reports</span>
                 <span class="pull-right-container">

users/views.py

@@ -35,14 +35,14 @@ def Users(request):
     purchases = Purchase.objects.filter(user_id=user.id)
     in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100)
 
-    bytes_size = 0
-    for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email):
-        for filename in files:
-            bytes_size += os.lstat(os.path.join(path, filename)).st_size
-        for directory in directories:
-            bytes_size += os.lstat(os.path.join(path, directory)).st_size
-    bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/" + user.email)
-    size_repsat = best_unit_size(bytes_size)
+    #bytes_size = 0
+    #for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email):
+    #    for filename in files:
+    #        bytes_size += os.lstat(os.path.join(path, filename)).st_size
+    #    for directory in directories:
+    #        bytes_size += os.lstat(os.path.join(path, directory)).st_size
+    #bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/" + user.email)
+    #size_repsat = best_unit_size(bytes_size)
 
     user_data.append({
         "user_id": user.id,
@@ -50,7 +50,7 @@ def Users(request):
         "searches": searches.count(),
         "purchases": purchases.count(),
         "in_process": in_process.count(),
-        "size": size_repsat,
+        #"size": size_repsat,
     })
 
     for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
@@ -155,13 +155,13 @@ def User_id(request, user_id):
     in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100)
 
     bytes_size = 0
-    for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/"+user.email):
-        for filename in files:
-            bytes_size += os.lstat(os.path.join(path, filename)).st_size
-        for directory in directories:
-            bytes_size += os.lstat(os.path.join(path, directory)).st_size
-    bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/"+user.email)
-    size_repsat = best_unit_size(bytes_size)
+    #for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/"+user.email):
+    #    for filename in files:
+    #        bytes_size += os.lstat(os.path.join(path, filename)).st_size
+    #    for directory in directories:
+    #        bytes_size += os.lstat(os.path.join(path, directory)).st_size
+    #bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/"+user.email)
+    #size_repsat = best_unit_size(bytes_size)
 
     user_data.append({
         "user_id": user.id,
@@ -169,7 +169,7 @@ def User_id(request, user_id):
         "searches": searches.count(),
         "purchases": purchases.count(),
         "in_process": in_process.count(),
-        "size": size_repsat,
+        #"size": size_repsat,
     })
 
     for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
@@ -269,13 +269,13 @@ def wsPurchasesPM(request):
 
         table_data = []
         data = Purchase.objects.values('user_id', 'search__endDate', 'search__startDate', 'aggreg_date',
-                                       'search__process_id__name', 'search__search_name').filter(
+                                       'search__process_id__name', 'name').filter(
             user_id=request.POST.get('user_id'), purchased=True,
             aggreg_date__month=to_if(request.POST.get('title'))).order_by('aggreg_date')
 
         for producto in data:
             table_data.append({
-                "search_name": producto['search__search_name'],
+                "search_name": producto['name'],
                 "process": producto['search__process_id__name'],
                 "purchase_date": str(producto['aggreg_date'])[:10],
                 "startDate": str(producto['search__startDate'])[:10],