Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit b5d054ae authored by Luis Dominguez's avatar Luis Dominguez
Browse files
Options

Botones cambio de mapa en catalog

parent ce6749f2
Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 203 deletions
catalog/static/catalog/css/body.css
View file @ b5d054ae
......@@ -413,7 +413,7 @@ div .draw-button {
div .sidebar-input {
border-radius: 3px;
border: 1px solid #374850;
border: 1px solid #1397d4;
margin: 10px 10px;
}
......
catalog/static/catalog/css/map.css
View file @ b5d054ae
......@@ -5,6 +5,7 @@
margin:0;
padding:0;
position:fixed;
/* display: none; */
/* border: 2px solid red;*/
}
html, body
......@@ -37,3 +38,15 @@ html, body
#cloudPercentageSelector {
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
catalog/static/catalog/js/openLayers4.js
View file @ b5d054ae
......@@ -3,6 +3,27 @@
/// @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.
......@@ -11,18 +32,19 @@
* @param lat Latitude
* @param z Zoom
* @return OpenStreetMapsClass object
*
*/
function OpenStreetMapsClass(divID, lng, lat, z)
{
//this.vectorLayers = [];
var self=this;
this.vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: []})});
this.layers = [
light, cycle,
this.vectorLayer,
]
this.map = new ol.Map({
layers: [new ol.layer.Tile({
//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],
layers: this.layers,
target: 'map',
controls: ol.control.defaults({attributionOptions: ({collapsible: true})}),
view: new ol.View({ center: ol.proj.fromLonLat([lng,lat]), zoom: z})
......@@ -271,4 +293,27 @@ function getRandomColor() {
color += letters[Math.floor(Math.random() * 16)];
}
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();
catalog/static/catalog/js/sidtMap.js
View file @ b5d054ae
......@@ -2,6 +2,7 @@
/// @author Mario Chirinos Colunga
/// @date 2016-04-15
///
Number.prototype.toRadians = function()
{
return this * Math.PI / 180;
......@@ -160,3 +161,4 @@ sidtMap.prototype.onMapClick = function(e)
};
//------------------------------------------------------------------------------
catalog/templates/base_top.html
View file @ b5d054ae
......@@ -34,221 +34,230 @@
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.css' %}">
</head>
<body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper">
<header class="main-header">
<!-- Logo -->
<a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
href="../../../" {% endif %}class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices -->
<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>
<!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper">
<header class="main-header">
<!-- Logo -->
<a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
href="../../../" {% endif %}class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Geo</b>int : <b>Rep</b>Sat</span>
</a>
{% if request.user.is_authenticated %}
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
{% block help %}
<!-- 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>
{% if request.user.is_authenticated %}
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a>
<a id="changeMaps"><i class="fas fa-map"></i></a>
</li>
{% endblock %}
<li>
{% if request.user.is_superuser or request.user.is_staff %}
<a href="../../../administration" title="super user"><i
class="fa fa-gears"></i></a>
{% 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 %}
{% block help %}
<li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a>
</li>
{% endblock %}
</li>
<!-- History -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu" id="panelUser">
{% 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>
<li>
{% if request.user.is_superuser or request.user.is_staff %}
<a href="../../../administration" title="super user"><i
class="fa fa-gears"></i></a>
{% endif %}
</li>
{% endif %}
</ul>
</div>
{% endif %}
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;">
{% block content %}{% 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 %}
<!-- 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 %}
</li>
<!-- History -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu" id="panelUser">
{% 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 %}
</li>
{% endif %}
</ul>
</div>
{% endif %}
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
</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>
<!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu" data-widget="tree"></ul>
<!-- /.control-sidebar-menu -->
</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>
<!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu" data-widget="tree"></ul>
<!-- /.control-sidebar-menu -->
</form>
</div>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</form>{% endcomment %}
<!-- /.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>
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
{% comment %}<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>{% endcomment %}
{% 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>
<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>
</div>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="control-sidebar-menu" data-widget="tree"></ul>
</div>
<!-- /.tab-pane -->
</div>
</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>
<!-- ./wrapper -->
<!-- T E M P L A T E S -->
{% block templates %}{% endblock %}
<!-- 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 %}
<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 }}.
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</form>{% endcomment %}
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
{% comment %}<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>{% endcomment %}
{% 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>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="control-sidebar-menu" data-widget="tree"></ul>
</div>
<!-- /.tab-pane -->
</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>
{% 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>
</html>
catalog/templates/map.html
View file @ b5d054ae
......@@ -239,6 +239,38 @@
{% block content %}
<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 Elements -->
<div class="container">
......@@ -275,6 +307,7 @@
</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>
......@@ -285,6 +318,8 @@
<div class="waitingModal"></div>
{% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %}
{% block modal1 %}{% include "mssgModal.html" %}{% endblock %}
......
reports/static/images/cycle.png
View replaced file @ ce6749f2 View file @ b5d054ae
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