Commit e748b5bd authored by Jorge Samuel Mendes de Jesus's avatar Jorge Samuel Mendes de Jesus
Browse files

Added OL button and some other fixes

Former-commit-id: 45b76176
Former-commit-id: ffc809dcd12ae497f809b93a7be5bba139519382 [formerly cc470c3e60ccf9f0e7df54174f0363855fba327e]
Former-commit-id: c3d4351bad6efa996dbd7fbf657ae59fa22f2960
parent 326e037d
#maprot{
bottom: 7.0em;
right: 1.0em;
width: 10%;
height: 10%;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
position:absolute;}
.ol-control div {/* right: 10em; */
/*bottom: 2em; */
padding: 5px 5px 3px;/*border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;*/}
.ol-rotate-base {right:1.1em;bottom:10px; width: 200px;height:100px; display: fixed;}
div.map {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
}
\ No newline at end of file
......@@ -19,7 +19,7 @@
var layerCollection=l.getLayers()
layerRemoved=layerCollection.removeAt(0)
layerCollection.insertAt(1, layerRemoved);
//baseLayers.dispatchEvent("rotate")
baseLayers.dispatchEvent("rotate")
}})
};
//
......@@ -109,6 +109,42 @@ var PROXY=FULLPATH+"proxy.php" ;
function updateRotateButton(){
$("#maprot").attr('src',mapMapToIcon[map.getBaseVisibleLayer().get("name")])
}
/* controler */
RotateBaseLayer = function(opt_options) {
var options = opt_options || {};
var div = document.createElement('div');
// button.className = "ol-button-rotate";
div.innerHTML = '<img id="maprot" src="'+FULLPATH+'/assets/iconsOL/sat_icon.png'+'" alt="Rotate Map Button"/>';
// div.innerHTML = '<img id="maprot" src='+FULLPATH+'"/icons/geography_icon.png" alt="Rotate Map Button"/>';
var rotateCurrentMap = function(e) {
e.stopPropagation();
e.preventDefault();
map.RotateBaseVisibleLayer()
updateRotateButton()
};
div.addEventListener('click',rotateCurrentMap, false);
div.addEventListener('touchstart', rotateCurrentMap, false);
var element = document.createElement('div');
console.log(element)
element.className = 'ol-rotate-base ol-unselectable ol-control';
element.appendChild(div);
ol.control.Control.call(this, {
element: element,
target: options.target
});
};
ol.inherits(RotateBaseLayer, ol.control.Control);
/* Map structure*/
view = new ol.View({projection:"EPSG:3857", zoom:2,center: ol.proj.transform([40, 0],'EPSG:4326', 'EPSG:3857')})
var bingRoad = new ol.layer.Tile({name:"bingRoad", visible:true,source: new ol.source.BingMaps({key: BING_KEY,imagerySet: 'Road'})})
......@@ -120,15 +156,15 @@ var baseLayers = new ol.layer.Group({
map = new ol.Map({
target: 'map',
controls:ol.control.defaults({attribution:false,rotate:false,zoom:true,attributionOptions:({collapsible: false})}).extend([]),
controls:ol.control.defaults({attribution:false,rotate:false,zoom:true,attributionOptions:({collapsible: false})}).extend([new RotateBaseLayer()]),
renderer:'canvas',
layers: [baseLayers],
view: view
})//end map
//controls:ol.control.defaults({attribution:false,rotate:true,zoom:false,attributionOptions:({collapsible: false})}).extend([new RotateBaseLayer()]),
controls:ol.control.defaults({attribution:false,rotate:true,zoom:false,attributionOptions:({collapsible: false})}).extend([new RotateBaseLayer()]),
//baseLayers.addEventListener('rotate', function (e) { console.log("rotate")}, false)
baseLayers.addEventListener('rotate', function (e) { console.log("rotate")}, false)
map.on("click", function(e) {map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
e.preventDefault();
window.open(feature.get("monolithdescurl"));
......
......@@ -48,7 +48,6 @@
<meta name="twitter:description" content="World Soil Museum, generic museum information and content online for visual tour" />
<meta name="twitter:image" content="http://wsm.isric.org/images/misc/World_Soil_Museum_ISRIC.png" />
<!-- we meed Jquery to load subsections -->
<script src="assets/js/jquery-1.11.2.min.js"></script>
......@@ -60,6 +59,13 @@
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap theme -->
<link href="assets/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<!-- OL3 -->
<link rel="stylesheet" href="assets/css/ol3.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/maps.css" type="text/css" media="screen" />
<style>
</style>
<!-- vegas bg -->
<link href="assets/js/vegas/jquery.vegas.min.css" rel="stylesheet" />
<!-- intro animations -->
......@@ -94,11 +100,7 @@
<!-- data-overlay: "true" - semi-transparent black overlay on top of bg enabled, "false" - disabled -->
<!-- data-overlay-opacity: set the opacity/transparency of the black overlay -->
<body data-default-background-img="./images/background/bg5.jpg" data-overlay="true" data-overlay-opacity="0.35">
<script>
</script>
<!-- Outer Container -->
<div id="outer-container">
......
......@@ -2,10 +2,7 @@
<br />
<script src="assets/js/ol.js" type="text/javascript"></script>
<script src="assets/js/maps.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/ol3.css" type="text/css" media="screen" />
<style>
</style>
<article id="mapsMono" class="section-wrapper clearfix hidden-xs" data-custom-background-img="images/background/bg4.jpg">
<div class="content-wrapper clearfix wow fadeInDown content-wrapper-top" data-wow-delay="0.6s">
......
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