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 {
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})
......@@ -272,3 +294,26 @@ function getRandomColor() {
}
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 @@
/// @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,10 +34,10 @@
<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 id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper">
<div class="wrmapper">
<header class="main-header">
<!-- Logo -->
<a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
......@@ -57,6 +57,11 @@
{% if request.user.is_authenticated %}
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a id="changeMaps"><i class="fas fa-map"></i></a>
</li>
{% block help %}
<li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a>
......@@ -119,6 +124,7 @@
<!-- 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">-->
......@@ -209,34 +215,36 @@
<!-- /.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"
</div>
<!-- ./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' %}"
<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 %}
{% 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 %}>
......@@ -245,10 +253,11 @@
</div>
{% endfor %}
</div>
{% endif %}
{% 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