Merge branch 'dev' of gitlab.geoint.mx:mario.chirinos/GeoInt_SIDT into multi-select

administration/views.py

@@ -196,7 +196,6 @@ def wsPurchasesPM(request):
                 'storage':storage,
                 'in_process': pending.count(),
             })
-            print (table_data)
         return HttpResponse(json.dumps(table_data))
     else:
         raise Http404

catalog/templates/base_top.html

@@ -187,9 +187,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 -->
@@ -199,6 +200,7 @@
 <!-- Chartsjs -->
 <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
 
+{% block footer %}{% endblock %}
 {% block scripts %}{% endblock %}
 </body>
 </html>

catalog/templates/show_cart.html

@@ -2,213 +2,235 @@
 {% load staticfiles %}
 
 {% block headMedia %}
-<link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
-<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
-<link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
-<!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
-<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
+    <link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
+    <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
+    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.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>
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
-<!--  <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
-<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
+    <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>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
+    <!--  <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
+    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 
-<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
-<script src="{% static 'catalog/js/sidtMap.js' %}"></script>
+    <script src="{% static 'catalog/js/openLayers4.js' %}"></script>
+    <script src="{% static 'catalog/js/sidtMap.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>
+    <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>
+    <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>
+                </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>
+    <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>
-                    </div>
-                </a>
-            </li>
-            <!-- end task item -->
-        </ul>
-    </li>
-    <li class="footer">
-        <a href="#">View all tasks</a>
-    </li>
-</ul>
+                    </a>
+                </li>
+                <!-- end task item -->
+            </ul>
+        </li>
+        <li class="footer">
+            <a href="#">View all tasks</a>
+        </li>
+    </ul>
 {% endblock %}
 {% block sidebar %}
-<div class="form-group">
-    <br>
-    <ul class="sidebar-menu" data-widget="tree">
-        <li>
-            <a class="treeview " href="../../catalog">
-                <i class="fa fa-map"></i>
-                <span>Home</span>
-                <span class="pull-right-container">
+    <div class="form-group">
+        <br>
+        <ul class="sidebar-menu" data-widget="tree">
+            <li>
+                <a class="treeview " href="../../catalog">
+                    <i class="fa fa-map"></i>
+                    <span>Home</span>
+                    <span class="pull-right-container">
               <span class="label label-primary pull-right"></span>
             </span>
-            </a>
-        </li>
-    </ul>
-</div>
-<!-- form-group-->
+                </a>
+            </li>
+        </ul>
+    </div>
+    <!-- form-group-->
 {% endblock %}
 {% block user %}
-{% include "user_button.html" %}
+    {% include "user_button.html" %}
 {% endblock %}
 {% block content %}
-<!-- Content Wrapper. Contains page content -->
-<!-- Main content -->
-<div id="cartPage" class="wrapper" style="background-color: #ecf0f5">
-    <div class="text-center"><h1>Shopping Cart</h1></div>
     <!-- Content Wrapper. Contains page content -->
     <!-- Main content -->
-    <section class="content" style="overflow-y: auto; height: 85vh">
-        <div class="row">
-            {% if total_products == 0 %}
-                <div class="col-md-8 col-md-offset-2">
-                    <h2 class="text-center">Your Shopping Cart is empty.</h2>
-                </div>
-            {% else %}
-                <div class="col-md-5 col-md-offset-2">
-                    {% for product in product_list %}
-                    <div class="box box-warning collapsed-box" style="margin-bottom: 10px">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">{{ product.process }}: {{ product.aggreg_date }}</h3>
-                            <div class="box-tools pull-right">
-                                <span class="badge bg-green">Price ${{ product.price }}</span>
-                                <button type="button" class="btn btn-box-tool" data-widget="collapse">
-                                    <i class="fa fa-plus"></i>
-                                </button>
-                                <button type="button" class="btn btn-box-tool" data-toggle="tooltip" data-original-title="Delete" onclick="deleteProductFromShoppingCart({{ product.id }})">
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="box-body" style="display: none">
-                            <ul class="products-list product-list-in-box">
-                                {% for catalog in product.catalog %}
-                                <li class="item">
-                                    <div class="product-img">
-                                        <img src="{% static 'catalog/images/sat_preview/' %}{{ catalog.info.identifier }}_preview.png">
-                                        <!--<img src="{{ catalog.info.img }}"> -->
+    <div id="cartPage" class="wrapper" style="background-color: #ecf0f5">
+        <div class="text-center"><h1>Shopping Cart</h1></div>
+        <!-- Content Wrapper. Contains page content -->
+        <!-- Main content -->
+        <section class="content" style="overflow-y: auto; height: 85vh">
+            <div class="row">
+                {% if total_products == 0 %}
+                    <div class="col-md-8 col-md-offset-2">
+                        <h2 class="text-center">Your Shopping Cart is empty.</h2>
+                    </div>
+                {% else %}
+                    <div class="col-md-5 col-md-offset-2">
+                        {% for product in product_list %}
+                            <div class="box box-warning collapsed-box" style="margin-bottom: 10px">
+                                <div class="box-header with-border">
+                                    <h3 class="box-title">{{ product.process }}: {{ product.aggreg_date }}</h3>
+                                    <div class="box-tools pull-right">
+                                        <span class="badge bg-green">Price ${{ product.price }}</span>
+                                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
+                                            <i class="fa fa-plus"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-box-tool" data-toggle="tooltip"
+                                                data-original-title="Delete"
+                                                onclick="deleteProductFromShoppingCart({{ product.id }})">
+                                            <i class="fa fa-trash"></i>
+                                        </button>
                                     </div>
-                                    <div class="product-info" style="word-break: break-all">
+                                </div>
+                                <div class="box-body" style="display: none">
+                                    <ul class="products-list product-list-in-box">
+                                        {% for catalog in product.catalog %}
+                                            <li class="item">
+                                                <div class="product-img">
+                                                    <img src="
+
+                                                            {% static 'catalog/images/sat_preview/' %}{{ catalog.info.identifier }}_preview.png">
+                                                    <!--<img src="{{ catalog.info.img }}"> -->
+                                                </div>
+                                                <div class="product-info" style="word-break: break-all">
                                         <span class="product-title">
                                             {{ catalog.info.identifier }}
                                         </span>
-                                        <span class="product-description">
+                                                    <span class="product-description">
                                             {{ catalog.info.instrumentname }}
                                         </span>
-                                    </div>
-                                </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
+                                                </div>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </div>
+                        {% endfor %}
                     </div>
-                    {% endfor %}
-                </div>
-                <div class="col-md-3">
-                    <div class="box box-warning">
-                        <div class="box-header with-border">
-                            <h3 class="box-title">Summary</h3>
-                        </div>
-                        <div class="box-body">
-                            <div class="table-responsive">
-                                <table class="table">
-                                    <tbody>
-                                    <tr>
-                                        <th>Total products:</th>
-                                        <td>{{ total_products }}</td>
-                                    </tr>
-                                    <tr>
-                                        <th>Total price:</th>
-                                        <td>${{ total_price }}</td>
-                                    </tr>
-                                    </tbody>
-                                    <tfoot>
-                                    <tr>
-                                        <td>
-                                            <a href="../pay" class="btn btn-primary pull-right">Pay</a>
-                                        </td>
-                                        <td class="text-center">
-                                            <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
+                    <div class="col-md-3">
+                        <div class="box box-warning">
+                            <div class="box-header with-border">
+                                <h3 class="box-title">Summary</h3>
+                            </div>
+                            <div class="box-body">
+                                <div class="table-responsive">
+                                    <table class="table">
+                                        <tbody>
+                                        <tr>
+                                            <th>Total products:</th>
+                                            <td>{{ total_products }}</td>
+                                        </tr>
+                                        <tr>
+                                            <th>Total price:</th>
+                                            <td>${{ total_price }}</td>
+                                        </tr>
+                                        </tbody>
+                                        <tfoot>
+                                        <tr>
+                                            <td class="text-center">
+
+                                            </td>
+                                            <td class="text-center">
+
+
+                                            </td>
+                                        </tr>
+                                        </tfoot>
+                                    </table>
+                                    <div class="text-center">
+                                        <a href="../pay">
+                                            <input type="image"
+                                                   src="https://www.sandbox.paypal.com/es_XC/MX/i/btn/btn_buynowCC_LG.gif"
+                                                   border="0" name="submit"
+                                                   alt="PayPal, la forma más segura y rápida de pagar en línea.">
+                                            <img alt="" border="0"
+                                                 src="https://www.sandbox.paypal.com/es_XC/i/scr/pixel.gif" width="1"
+                                                 height="1">
+                                        </a>
+
+
+                                        <!--form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
                                                 <input type="hidden" name="cmd" value="_cart">
                                                 <input type="hidden" name="upload" value="1">
                                                 <input type="hidden" name="business"
@@ -238,7 +260,7 @@
                                                  height="1">
                                             </form>
 
-                                            <form method="post" action="http://repsat.geoint.mx/catalog/ipn/">
+                                            <!--form method="post" action="http://repsat.geoint.mx/catalog/ipn/">
                                                     <input type="text" name="nombre" value="">
                                                     <input type="submit">
                                             </form>
@@ -246,69 +268,66 @@
                                             <form method="post" action="../ipn/">
                                                     <input type="text" name="nombre" value="">
                                                     <input type="submit">
-                                            </form>
+                                            </form-->
 
+                                    </div>
 
-                                        </td>
-                                    </tr>
-                                    </tfoot>
-                                </table>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            {% endif %}
-        </div>
-    </section>
-    <!-- /.content -->
-</div>
-<!-- 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 -->
-
+                {% endif %}
+            </div>
+        </section>
+        <!-- /.content -->
     </div>
-    <!-- Footer Elements -->
+    <!-- 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 -->
 
-    <!-- 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 -->
+        </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>
-<!-- Footer -->
+    </footer>
+    <!-- Footer -->
 
-<!-- /.content -->
+    <!-- /.content -->
 {% endblock %}
 {% block scripts %}
     <!-- page script -->

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/Reports.css

@@ -61,4 +61,4 @@ input:checked + .slider:before {
 
 .slider.round:before {
     border-radius: 50%;
-}
\ No newline at end of file
+}

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

@@ -60,27 +60,12 @@ $(function () {
 });
 
 
-$(document).ready(function () {
-    $('#example').DataTable
-    ({
-
-        responsive:
-            {
-                details:
-                    {
-                        type: 'column',
-                        target: 'tr'
-                    }
-            },
-        columnDefs:
-            [{
-                className: 'control',
-                orderable: false,
-                targets: 0
-            }],
-        order: [1, 'asc']
-    });
-});
+ $(document).ready(function () {
+            var table = $('#example').DataTable({
+                responsive: true
+            });
+
+        });
 
 
 $(function () {

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,114 +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) {
-      const layer_types = getSelectedCheckbox();
-
-      currentDate = labelDate;
-      removeImageLayers()
-
-      // add layer
-      layer_types.forEach(layer_type => {
-        const xyz = new ol.layer.Tile({
-          name: layer_type,
-          opacity: currentOpacity,
-          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
-          })
-        });
-
-        if (layer_type == 'TCI') {
-          xyz.setOpacity(1)
-        }
-
-        map.addLayer(xyz);
+    success: response => {
+      changeLayers(data.layerName);
+      setOpacity($('#opacitySlide').val());
+      map.getView().setMinZoom(response.zoom.min);
+      map.getView().setMaxZoom(response.zoom.max);
+    }
+  });
+}
+
+// remove old layers and add layers with new date
+function changeLayers(especific_layerName) {
+  const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
+
+  removeLayer(especific_layerName);
+
+  layersToChance.forEach(layerName => {
+    const xyz = new ol.layer.Tile({
+      name: layerName,
+      source: new ol.source.XYZ({
+        projection: 'EPSG:3857',
+        url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layerName+'/'+currentDate+'/{z}/{x}/{-y}.png',
+        tilePixelRatio: 2
       })
+    });
 
-      // fit and zoom
-      map.getView().setMinZoom(data.zoom.min);
-      map.getView().setMaxZoom(data.zoom.max);
+    if (layerName === 'TCI') {
+      map.getLayers().insertAt(FIRST_IMAGE_LAYER_INDEX, xyz);
+    } else {
+      map.addLayer(xyz);
     }
+
+    layers.set(layerName, xyz);
   });
 }
 
-function removeImageLayers() {
-  var imageLayers = map.getLayers().getArray().slice();
-  imageLayers.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) {
-  var imageLayers = map.getLayers().getArray().slice();
-
-  currentOpacity = value;
-  imageLayers.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 getSelectedCheckbox() {
-  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
 
-  return values;
+//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;
+
+  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 getDataIndexByCheckboxId(dataset, 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);
+    }
+  });
 
-  dataset.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 dataset = myChart.config.data.datasets;
-  const index = getDataIndexByCheckboxId(dataset, 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

@@ -2,9 +2,7 @@
 {% 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>
 
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
           type="text/css">
@@ -13,6 +11,24 @@
     <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
+
+    <!-- nose-->
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
+
+
+    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script type="text/javascript" language="javascript"
+            src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" language="javascript"
+            src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
+    <script type="text/javascript">
+
+
+
+
+
+    </script>
 {% endblock %}
 {% block messages %}
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -155,15 +171,15 @@
                     <table data-toggle="table" id="example" class="table table-striped table-bordered"
                            style="width:100%">
                         <thead>
-                        <th>Title</th>
-                        <th>Process</th>
-                        <th>Purchase date</th>
-                        <th>Start Date</th>
-                        <th>End Date</th>
+                        <th width="16%" class="all">Title</th>
+                        <th width="12%">Process</th>
+                        <th width="12%">Purchase date</th>
+                        <th width="12%">Start Date</th>
+                        <th width="12%">End Date</th>
                         <!--th>Clouds %</th-->
-                        <th>Estimated Size</th>
-                        <th>Public</th>
-                        <th>Actions</th>
+                        <th width="12%">Estimated Size</th>
+                        <th width="6%">Public</th>
+                        <th width="12%" class="all">Actions</th>
                         </thead>
                         <tbody id="table_body">
                         {% for product in productList %}
@@ -210,14 +226,14 @@
                                                 {% if product.initial_folder %}
                                            href="../reports/{{ product.purchase_id }}"
                                                 {% endif %}
-                                           class="btn btn-success">
+                                           class="btn btn-success btn-sm col-md-6 col-xs-6 col-sm-6 col-lg-6 col-xl-6">
                                             <i class="fa fa-eye"></i>
                                         </a>
                                         <a title="Download zip" {% if product.progress == 100 %}
                                            href="../../static/reports/tmpImages/repsat_test_dev/{{ request.user.email }}/{{ product.purchase_id }}/myzip.zip"
                                         {% else %}
                                            href="#"
-                                        {% endif %} class="btn btn-warning">
+                                        {% endif %} class="btn btn-warning btn-sm col-md-6 col-xs-6 col-sm-6 col-lg-6 col-xl-6">
                                             <i class="fa fa-file-zip-o"></i>
                                         </a>
                                         <!--a title="View Log" href="#" class="btn btn-info"
@@ -236,7 +252,7 @@
         <!-- /.content -->
     </div>
     <!-- Footer -->
-    <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
+    <footer class=" page-footer font-small special-color-dark pt-5" >
         <!-- Footer Elements -->
         <div class="container">
         </div>

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">

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,10 +119,10 @@
 {% 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="1" max="{{ labels|length }}" step="1" value="1" data-thumbwidth="20" style="background: transparent;">
+            <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;">
 
 
             <datalist class="range__list" id="number">
@@ -131,6 +133,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>
@@ -275,31 +297,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;
@@ -310,20 +329,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) {
@@ -331,14 +349,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;
           }
@@ -350,6 +376,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/views.py

@@ -16,6 +16,7 @@ from reportlab.pdfgen import canvas
 from django.views.decorators.csrf import csrf_exempt
 
 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
@@ -64,10 +65,7 @@ def report_L2ASCL(request, purchase_id):
     image_path = email + "/" + purchase_id + "/" + "out/" + reporteDir + "/TCI/thumbnails/"
     SCL_path = email + "/" + purchase_id + "/" + "out/" + reporteDir + "/SCL/"
 
-    if os.path.exists(path + reporteDir + ".pdf"):
-        print ("si existe")
-    else:
-        PDFGenerator(request, path, reporteDir, datasets)
+
 
     searchInfo = {
         "title": purchase['name'],
@@ -82,6 +80,11 @@ def report_L2ASCL(request, purchase_id):
         "report_name": "SCL Image Classification Data(Km²)"
     }
 
+    if os.path.exists(path + reporteDir + ".pdf"):
+        print ("si existe")
+    else:
+        PDFGenerator(request, path, reporteDir, datasets,searchInfo)
+
     return render(request, template, {"graphData": json.dumps(graphData),
                                       "searchInfo": searchInfo, "IMAGE_PATH": image_path,
                                       "SCL_PATH": SCL_path, 'dafaultLabel': defaultLabel,
@@ -133,11 +136,10 @@ def Reports(request):
 
         for p in json.loads(producto['productList']):
             size = size + float(p['info']['size'][:-3])
-            if size > 1000:
-                size2 = size / 1000
-                final_size = str(round(size2, 2)) + " GB"
-            else:
-                final_size = str(round(size, 2)) + " MB"
+
+        size = size *1048576
+        final_size = best_unit_size(size)
+
 
         initial_folder = "."
         absolute_path = USERS_PATH + request.user.email + "/" + str(producto['id']) + "/"
@@ -448,31 +450,52 @@ def myBarLegend(drawing, labels):
     return d
 
 
-def PDFGenerator(request, ruta, reporteDir, datasets):
-
+def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
     thumbs = ruta + 'out/' + reporteDir + '/TCI/thumbnails/'
     SCL = ruta + 'out/' + reporteDir + '/SCL/split/'
 
     story = []
 
+    #story.append(tileinfo("hola"))
+
     # define the style for our paragraph text
     styles = getSampleStyleSheet()
+    styles2 = getSampleStyleSheet()
     styleN = styles['Normal']
+    styleN.alignment = 1
+    styleN.fontSize=25
+
+    style2 = styles2['Normal']
+    style2.alignment = 1
+    style2.fontSize = 15
 
     # Header
     im = Image(USERS_PATH + 'header.png', width=300, height=70)
     im.hAlign = 'CENTER'
     story.append(im)
 
+    story.append(Spacer(1, 1.5 * inch))
     # add the title
-    # story.append(Paragraph("<strong>Results for Vizard Experiment</strong>", styleN))
-    # story.append(Spacer(1, .25 * inch))
+    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(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(Spacer(1, .40 * inch))
+    story.append(Paragraph("<strong>Clouds: "+str(searchInfo['clouds'])+" %</strong>", 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(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())