Commit b5d054ae authored by Luis Dominguez's avatar Luis Dominguez

Botones cambio de mapa en catalog

parent ce6749f2
...@@ -413,7 +413,7 @@ div .draw-button { ...@@ -413,7 +413,7 @@ div .draw-button {
div .sidebar-input { div .sidebar-input {
border-radius: 3px; border-radius: 3px;
border: 1px solid #374850; border: 1px solid #1397d4;
margin: 10px 10px; margin: 10px 10px;
} }
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
margin:0; margin:0;
padding:0; padding:0;
position:fixed; position:fixed;
/* display: none; */
/* border: 2px solid red;*/ /* border: 2px solid red;*/
} }
html, body html, body
...@@ -37,3 +38,15 @@ html, body ...@@ -37,3 +38,15 @@ html, body
#cloudPercentageSelector { #cloudPercentageSelector {
background: transparent; background: transparent;
} }
.mapControl{
width: 20%;
height: auto;
position: absolute;
right: 15px;
bottom: 15px;
z-index: 100;
background-color: white;
border-radius: 5px;
padding: 3px;
}
\ No newline at end of file
...@@ -3,6 +3,27 @@ ...@@ -3,6 +3,27 @@
/// @date 2016-04-14 /// @date 2016-04-14
/// ///
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
const light = 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
}),
visible: true,
});
const cycle = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
// url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
}),
visible: false,
});
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
/** /**
* Definitions for the languages. * Definitions for the languages.
...@@ -11,18 +32,19 @@ ...@@ -11,18 +32,19 @@
* @param lat Latitude * @param lat Latitude
* @param z Zoom * @param z Zoom
* @return OpenStreetMapsClass object * @return OpenStreetMapsClass object
*
*/ */
function OpenStreetMapsClass(divID, lng, lat, z) function OpenStreetMapsClass(divID, lng, lat, z)
{ {
//this.vectorLayers = []; //this.vectorLayers = [];
var self=this; var self=this;
this.vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: []})}); this.vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: []})});
this.layers = [
light, cycle,
this.vectorLayer,
]
this.map = new ol.Map({ this.map = new ol.Map({
layers: [new ol.layer.Tile({ layers: this.layers,
//source: new ol.source.OSM()
source: new ol.source.XYZ({url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'})
}),this.vectorLayer],
target: 'map', target: 'map',
controls: ol.control.defaults({attributionOptions: ({collapsible: true})}), controls: ol.control.defaults({attributionOptions: ({collapsible: true})}),
view: new ol.View({ center: ol.proj.fromLonLat([lng,lat]), zoom: z}) view: new ol.View({ center: ol.proj.fromLonLat([lng,lat]), zoom: z})
...@@ -271,4 +293,27 @@ function getRandomColor() { ...@@ -271,4 +293,27 @@ function getRandomColor() {
color += letters[Math.floor(Math.random() * 16)]; color += letters[Math.floor(Math.random() * 16)];
} }
return color; return color;
} }
\ No newline at end of file
OpenStreetMapsClass.prototype.changeMap = function (selectedMap) {
console.log("selectedMap: ", selectedMap)
console.log("this.map: ", this.map)
// map.selectedMap.setVisible(false);
// console.log(this.map.getLayers('selectedMap'));
if(selectedMap == "light"){
this.layers[0].setVisible(true)
this.layers[1].setVisible(false)
}else{
this.layers[1].setVisible(true)
this.layers[0].setVisible(false)
}
}
var cambio = new OpenStreetMapsClass();
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
/// @author Mario Chirinos Colunga /// @author Mario Chirinos Colunga
/// @date 2016-04-15 /// @date 2016-04-15
/// ///
Number.prototype.toRadians = function() Number.prototype.toRadians = function()
{ {
return this * Math.PI / 180; return this * Math.PI / 180;
...@@ -160,3 +161,4 @@ sidtMap.prototype.onMapClick = function(e) ...@@ -160,3 +161,4 @@ sidtMap.prototype.onMapClick = function(e)
}; };
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -34,221 +34,230 @@ ...@@ -34,221 +34,230 @@
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.css' %}">
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>--> <!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>--> <!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper"> <div class="wrmapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %} <a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
href="../../../" {% endif %}class="logo"> href="../../../" {% endif %}class="logo">
<!-- mini logo for sidebar mini 50x50 pixels --> <!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span> <span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices --> <!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Geo</b>int : <b>Rep</b>Sat</span> <span class="logo-lg"><b>Geo</b>int : <b>Rep</b>Sat</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a> </a>
{% if request.user.is_authenticated %} <!-- Header Navbar: style can be found in header.less -->
<div class="navbar-custom-menu"> <nav class="navbar navbar-static-top">
<ul class="nav navbar-nav"> <!-- Sidebar toggle button-->
{% block help %} <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
{% if request.user.is_authenticated %}
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li> <li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a> <a id="changeMaps"><i class="fas fa-map"></i></a>
</li> </li>
{% endblock %}
<li> {% block help %}
{% if request.user.is_superuser or request.user.is_staff %} <li>
<a href="../../../administration" title="super user"><i <a id="initGuide"><i class="fa fa-question-circle"></i></a>
class="fa fa-gears"></i></a> </li>
{% endif %}
</li>
<!-- Messages: style can be found in dropdown.less-->
<!-- <li class="dropdown messages-menu"> -->
{#% block messages %#}{#% endblock %#}
<!-- </li> -->
<!-- Notifications: style can be found in dropdown.less -->
<!-- <li class="dropdown notifications-menu"> -->
{#% block notifications %#}{#% endblock %#}
<!-- </li> -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- <li class="dropdown tasks-menu"> -->
{#% block tasks %}{% endblock %#}
<!-- </li> -->
<!-- History -->
<li class="dropdown user user-menu" id="panelHistory">
{% block history %}
{% endblock %} {% endblock %}
</li> <li>
<!-- History --> {% if request.user.is_superuser or request.user.is_staff %}
<!-- User Account: style can be found in dropdown.less --> <a href="../../../administration" title="super user"><i
<li class="dropdown user user-menu" id="panelUser"> class="fa fa-gears"></i></a>
{% block user %}{% endblock %}
</li>
<!-- Control Sidebar Toggle Button -->
{% if request.user.username == "demo" %}
{% else %}
<li id="panelShowCart">
{% if showcart %}
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
class="fa fa-shopping-cart"></i></a>
{% endif %} {% endif %}
</li> </li>
{% endif %} <!-- Messages: style can be found in dropdown.less-->
</ul> <!-- <li class="dropdown messages-menu"> -->
</div> {#% block messages %#}{#% endblock %#}
{% endif %} <!-- </li> -->
</nav> <!-- Notifications: style can be found in dropdown.less -->
</header> <!-- <li class="dropdown notifications-menu"> -->
<!-- Left side column. contains the logo and sidebar --> {#% block notifications %#}{#% endblock %#}
<aside class="main-sidebar"> <!-- </li> -->
<!-- sidebar: style can be found in sidebar.less --> <!-- Tasks: style can be found in dropdown.less -->
<section class="sidebar"> <!-- <li class="dropdown tasks-menu"> -->
{% block sidebar %}{% endblock %} {#% block tasks %}{% endblock %#}
<!-- </li> -->
</section> <!-- History -->
<!-- /.sidebar --> <li class="dropdown user user-menu" id="panelHistory">
</aside> {% block history %}
{% endblock %}
</li>
<!-- Content Wrapper. Contains page content --> <!-- History -->
<div class="content-wrapper" style="border:0px solid blue;"> <!-- User Account: style can be found in dropdown.less -->
{% block content %}{% endblock %} <li class="dropdown user user-menu" id="panelUser">
</div> {% block user %}{% endblock %}
<!-- /.content-wrapper --> </li>
<!-- <footer class="main-footer">--> <!-- Control Sidebar Toggle Button -->
<!-- <div class="pull-right hidden-xs">--> {% if request.user.username == "demo" %}
<!-- <b>Version</b> 2.4.0--> {% else %}
<!-- </div>--> <li id="panelShowCart">
<!-- <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights reserved.--> {% if showcart %}
<!-- </footer>--> <a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
class="fa fa-shopping-cart"></i></a>
<!-- Control Sidebar --> {% endif %}
<aside class="control-sidebar control-sidebar-dark"> </li>
<!-- Create the tabs --> {% endif %}
<ul class="nav nav-tabs nav-justified control-sidebar-tabs"> </ul>
<li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i </div>
class="fa fa-globe"></i></a></li> {% endif %}
{% if request.user.username == 'demo' %} </nav>
{% else %} </header>
<li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i <!-- Left side column. contains the logo and sidebar -->
class="fa fa-shopping-cart"></i></a> <aside class="main-sidebar">
</li> <!-- sidebar: style can be found in sidebar.less -->
{% endif %} <section class="sidebar">
</ul> {% block sidebar %}{% endblock %}
<!-- Tab panes -->
<div class="tab-content"> </section>
<!-- Home tab content --> <!-- /.sidebar -->
<div class="tab-pane active" id="control-sidebar-home-tab"> </aside>
<form id='product-to-cart-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>Products</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="add-cart" class="btn btn-primary">
{% if request.user.username == 'demo' %}
Process
{% else %}
Add to cart
{% endif %}
</button>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;">
{% block content %}{% endblock %}
{% block templates %}{% endblock %}
</div>
<!-- /.content-wrapper -->
<!-- <footer class="main-footer">-->
<!-- <div class="pull-right hidden-xs">-->
<!-- <b>Version</b> 2.4.0-->
<!-- </div>-->
<!-- <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights reserved.-->
<!-- </footer>-->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i
class="fa fa-globe"></i></a></li>
{% if request.user.username == 'demo' %}
{% else %}
<li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i
class="fa fa-shopping-cart"></i></a>
</li>
{% endif %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<form id='product-to-cart-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>Products</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="add-cart" class="btn btn-primary">
{% if request.user.username == 'demo' %}
Process
{% else %}
Add to cart
{% endif %}
</button>
</div>
</div> </div>
</div> <!-- this ul element is filled with data -->
<!-- this ul element is filled with data --> <ul id="product-list-globe" class="control-sidebar-menu" data-widget="tree"></ul>
<ul id="product-list-globe" class="control-sidebar-menu" data-widget="tree"></ul> <!-- /.control-sidebar-menu -->
<!-- /.control-sidebar-menu --> </form>
</form>
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
{% comment %}<form id='purchased-product-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>
</div> </div>
</div> <!-- /.tab-pane -->
<!-- this ul element is filled with data --> <!-- Stats tab content -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
</form>{% endcomment %} <!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
{% comment %}<form id='purchased-product-form' role="form" method="post">
{% csrf_token %}
<div class="container"> <div class="container">
<div class="sidebar-title"> <div class="sidebar-title">
<h3><b>My cart</b></h3> <h3><b>My cart</b></h3>
</div> </div>
<div class="sidebar-button"> <div class="sidebar-button">
{% comment %}<button type="submit" name="search" id="purchase" class="btn btn-primary"> <button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase Purchase
</button>{% endcomment %} </button>
{% comment %}<a href="cart" id="purchase" class="btn btn-primary">Purchase</a>{% endcomment %}
<button onclick="location.href='cart'" id="purchase" class="btn btn-primary">Purchase</button>
</div> </div>
</div> </div>
<!-- this ul element is filled with data --> <!-- this ul element is filled with data -->
<ul id="product-list-cart" class="control-sidebar-menu" data-widget="tree"></ul> <ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div> </form>{% endcomment %}
<!-- /.tab-pane --> <div class="container">
</div> <div class="sidebar-title">
</aside> <h3><b>My cart</b></h3>
<!-- /.control-sidebar --> </div>
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="sidebar-button">
<div class="control-sidebar-bg"></div> {% comment %}<button type="submit" name="search" id="purchase" class="btn btn-primary">
</div> Purchase
<!-- ./wrapper --> </button>{% endcomment %}
{% comment %}<a href="cart" id="purchase" class="btn btn-primary">Purchase</a>{% endcomment %}
<!-- T E M P L A T E S --> <button onclick="location.href='cart'" id="purchase" class="btn btn-primary">Purchase</button>
{% block templates %}{% endblock %} </div>
<!-- T E M P L A T E S --> </div>
<!-- MODAL 1 --> <!-- this ul element is filled with data -->
{% block modals %}{% endblock %} <ul id="product-list-cart" class="control-sidebar-menu" data-widget="tree"></ul>
<!-- MODAL 1 --> </div>
<!-- /.tab-pane -->
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
<!-- Fengyuan Chen's Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"
integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}"
type="text/javascript"></script>
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %}
<div id="ol"></div>
{% if messages %}
<div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
{% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>{{ message.tags }}!</strong> {{ message }}.
</div> </div>
{% endfor %} </aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div> </div>
{% endif %} <!-- ./wrapper -->
<!-- T E M P L A T E S -->
<!-- T E M P L A T E S -->
<!-- MODAL 1 -->
{% 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 -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
<!-- Fengyuan Chen's Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"
integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}"
type="text/javascript"></script>
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %}
{% if messages %}
<div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
{% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>{{ message.tags }}!</strong> {{ message }}.
</div>
{% endfor %}
</div>
{% endif %}
{% block guide %}
{% endblock %}
{% block guide %}
{% endblock %}
</body> </body>
</html> </html>
...@@ -239,6 +239,38 @@ ...@@ -239,6 +239,38 @@
{% block content %} {% block content %}
<div id="map" class="map" tabindex="0"></div> <div id="map" class="map" tabindex="0"></div>
<!-- control de version de mapas -->
<div class="mapControl">
<div id="controlMap" class="controlContainer">
<div class="row">
<div class="col-lg-6">
<label>
<div class="baseMap" onclick="cambio.changeMap('light')">
<img src="../../static/images/light.png" width="100%" height="100%">
<span class="mapSelector">
<input id="light" type="radio" name="layerOption" checked="">
<span>light</span>
</span>
</div>
</label>
</div>
<div class="col-lg-6">
<label>
<div class="baseMap" onclick="cambio.changeMap('cycle')">
<img src="../../static/images/cycle.png" width="100%" height="100%">
<span class="mapSelector">
<input id="streets" type="radio" name="layerOption">
<span>cycle</span>
</span>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- control de version de mapas -->
<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" style="bottom: 0; position: absolute">
<!-- Footer Elements --> <!-- Footer Elements -->
<div class="container"> <div class="container">
...@@ -275,6 +307,7 @@ ...@@ -275,6 +307,7 @@
</div> </div>
<!-- Footer Elements --> <!-- Footer Elements -->
<!-- Copyright --> <!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2019 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> <a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
...@@ -285,6 +318,8 @@ ...@@ -285,6 +318,8 @@
<div class="waitingModal"></div> <div class="waitingModal"></div>
{% endblock %} {% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %} {% block templates %}{% include "templates.html" %}{% endblock %}
{% block modal1 %}{% include "mssgModal.html" %}{% endblock %} {% block modal1 %}{% include "mssgModal.html" %}{% endblock %}
......
reports/static/images/cycle.png

183 KB | W: | H:

reports/static/images/cycle.png

266 KB | W: | H:

reports/static/images/cycle.png
reports/static/images/cycle.png
reports/static/images/cycle.png
reports/static/images/cycle.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment