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
Show 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 { ...@@ -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;
} }
......
catalog/static/catalog/css/map.css
View file @ b5d054ae
...@@ -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
catalog/static/catalog/js/openLayers4.js
View file @ b5d054ae
...@@ -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})
...@@ -272,3 +294,26 @@ function getRandomColor() { ...@@ -272,3 +294,26 @@ function getRandomColor() {
} }
return color; return color;
} }
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 @@ ...@@ -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)
}; };
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
catalog/templates/base_top.html
View file @ b5d054ae
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
<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 %}
...@@ -57,6 +57,11 @@ ...@@ -57,6 +57,11 @@
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="navbar-custom-menu"> <div class="navbar-custom-menu">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li>
<a id="changeMaps"><i class="fas fa-map"></i></a>
</li>
{% block help %} {% block help %}
<li> <li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a> <a id="initGuide"><i class="fa fa-question-circle"></i></a>
...@@ -119,6 +124,7 @@ ...@@ -119,6 +124,7 @@
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;"> <div class="content-wrapper" style="border:0px solid blue;">
{% block content %}{% endblock %} {% block content %}{% endblock %}
{% block templates %}{% endblock %}
</div> </div>
<!-- /.content-wrapper --> <!-- /.content-wrapper -->
<!-- <footer class="main-footer">--> <!-- <footer class="main-footer">-->
...@@ -209,34 +215,36 @@ ...@@ -209,34 +215,36 @@
<!-- /.control-sidebar --> <!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div> <div class="control-sidebar-bg"></div>
</div> </div>
<!-- ./wrapper --> <!-- ./wrapper -->
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
{% block templates %}{% endblock %}
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
<!-- MODAL 1 --> <!-- MODAL 1 -->
{% block modals %}{% endblock %} {% block modals %}{% endblock %}
<!-- MODAL 1 --> <!-- MODAL 1 -->
<!-- Bootstrap 3.3.7 --> <!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script> <script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file --> <!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script> <script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- Chartsjs --> <!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script> <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
<!-- Fengyuan Chen's Datepicker --> <!-- Fengyuan Chen's Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"
integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script> integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}" <script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}"
type="text/javascript"></script> type="text/javascript"></script>
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %} {% block footer %}{% endblock %}
<div id="ol"></div>
{% if messages %} {% 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"> <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 %} {% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}> <div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
...@@ -245,10 +253,11 @@ ...@@ -245,10 +253,11 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% block guide %}
{% endblock %}
{% block guide %}
{% endblock %}
</body> </body>
</html> </html>
catalog/templates/map.html
View file @ b5d054ae
...@@ -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
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