controlMap added to proyect

parent a363db4e
...@@ -437,7 +437,6 @@ ...@@ -437,7 +437,6 @@
} }
], ],
end: function () { end: function () {
console.log("Finished")
$('.main-header').removeClass('activateMainHeader'); $('.main-header').removeClass('activateMainHeader');
} }
}); });
......
.mapControl{
width: auto;
height: auto;
position: absolute;
right: 0;
top:14em;
z-index: 2;
}
.controlContainer{
width: auto;
overflow-y: scroll;
max-height: 60vh;
border-radius: 8px;
padding: 3px;
padding-right: 5px;
}
.controlContainer::-webkit-scrollbar{
background-color: #ffffff;
border-radius: 20px;
width: 10px;
}
.controlContainer::-webkit-scrollbar-track{
border-radius: 20px;
}
.controlContainer::-webkit-scrollbar-thumb{
background-color: #A6A6A6;
border: 2px solid #ffffff;
border-radius: 10px;
}
.baseMap{
height: 158px;
width: 296px;
padding:3px;
cursor: pointer;
background-color: white;
border-radius: 2px;
}
.mapSelector input[type="radio"]{
margin-right: 2px;
vertical-align: sub;
}
.mapSelector span{
font-weight: bold;
}
.baseMap img{
border-radius: 8px;
}
.mapSelector{
position: relative;
bottom: 2em;
padding: 4px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
#mapId{
width: 500px;
height: 500px;
}
\ No newline at end of file
...@@ -10,13 +10,48 @@ const polygonFeature = wktFormat.readFeature(polygon, { ...@@ -10,13 +10,48 @@ const polygonFeature = wktFormat.readFeature(polygon, {
}); });
// Create layers // Create layers
const mapLayer = new ol.layer.Tile({ const light = new ol.layer.Tile({
name: 'mapbox', name: 'mapbox',
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
}) })
}); });
const streets = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
const cycle = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6ca0387fb7d64c68b9af3a636f384d53'
})
});
const traffic = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
})
});
const night = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
})
});
const satellite = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
})
});
const polygonLayer = new ol.layer.Vector({ const polygonLayer = new ol.layer.Vector({
name: 'polygon', name: 'polygon',
source: new ol.source.Vector({ source: new ol.source.Vector({
...@@ -29,7 +64,7 @@ const layers = new Map(); ...@@ -29,7 +64,7 @@ const layers = new Map();
// create map // create map
const map = new ol.Map({ const map = new ol.Map({
target: 'minimap', target: 'minimap',
layers: [mapLayer, polygonLayer], layers: [light, polygonLayer],
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]), center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 4, zoom: 4,
...@@ -250,3 +285,111 @@ function setCompareDirection(direction){ ...@@ -250,3 +285,111 @@ function setCompareDirection(direction){
} }
// Fin funciones de comparacion // Fin funciones de comparacion
//****************************** //******************************
/************************* Functions de layer Sources ******************************/
let currentMap = light;
function initControlMap(){
let baseMaps = {
"light": {
layer: light,
name: "Claro",
imgURL: "../../static/images/light.png",
active: true
},
"streets": {
layer: streets,
name: "Calles",
imgURL: "../../static/images/Streets.png",
active: true
},
"cycle": {
layer: cycle,
name: "Rutas",
imgURL: "../../static/images/cycle.png",
active: false
},
"traffic": {
layer: traffic,
name: "Trafico",
imgURL: "../../static/images/traffic.png",
active: false
},
"night": {
layer: night,
name: "Oscuro",
imgURL: "../../static/images/night.png",
active: false
},
"satellite": {
layer: satellite,
name: "Satelital",
imgURL: "../../static/images/satellite.png",
active: false
}
};
let controlMap = $('#controlMap');
for (let map in baseMaps) {
let htmlString = '';
htmlString = '<div class="baseMap" onclick="changeMap(\'' + map + '\')">';
htmlString += '<img src="' + baseMaps[map].imgURL + '" width="100%" height="100%"/>';
htmlString += '<span class="mapSelector">';
if (map === 'light') {
htmlString += '<input id="' + map + '" type="radio" name="layerOption" checked><span>' + baseMaps[map].name + '</span>';
} else {
htmlString += '<input id="' + map + '" type="radio" name="layerOption"><span>' + baseMaps[map].name + '</span>';
}
htmlString += '</span>';
htmlString += '</div>';
controlMap.append(htmlString);
}
}
initControlMap();
function changeMap(selectedMap) {
map.getLayers().getArray().forEach(function (layer) {
if (layer.values_.name == "mapbox") {
map.removeLayer(layer)
}
})
$('#' + selectedMap).prop('checked', true);
switch (selectedMap) {
case 'light':
map.getLayers().insertAt(0, light);
currentMap = light;
break;
case 'streets':
map.getLayers().insertAt(0, streets);
currentMap = streets;
break;
case 'cycle':
map.getLayers().insertAt(0, cycle);
currentMap = cycle;
break;
case 'traffic':
map.getLayers().insertAt(0, traffic);
currentMap = traffic;
break;
case 'night':
map.getLayers().insertAt(0, night);
currentMap = night;
break;
case 'satellite':
map.getLayers().insertAt(0, satellite);
currentMap = satellite;
break;
}
}
function showControlMap(){
if ($('#showControlMap').is(':visible')) {
$("#showControlMap").hide();
$("#hideControlMap").show();
$(".mapControl").show();
} else {
$("#showControlMap").show();
$("#hideControlMap").hide();
$(".mapControl").hide();
}
}
\ No newline at end of file
...@@ -284,6 +284,18 @@ ...@@ -284,6 +284,18 @@
</ul> </ul>
</li> </li>
<li>
<a class="treeview " href="#" onclick="showControlMap()">
<i class="fa fa-globe"></i>
<i class="fa fa-globe" style="display:none"></i>
<span id="showControlMap">Show Maps</span>
<span id="hideControlMap" style="display:none">Hide Maps</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- <li> <!-- <li>
<a class="treeview " href="#" onclick="showComparisons()"> <a class="treeview " href="#" onclick="showComparisons()">
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css"> <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/scldata.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/control-map.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/ol-ext.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> <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" <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
...@@ -157,6 +158,9 @@ ...@@ -157,6 +158,9 @@
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5"> <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div id="minimap" class="minimap"></div> <div id="minimap" class="minimap"></div>
<div class="mapControl" style="display: none">
<div id="controlMap" class="controlContainer"></div>
</div>
<section class="content"> <section class="content">
<div class="row col-lg-11 title"> <div class="row col-lg-11 title">
......
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