source option added to ol.control.FullScreen including an example

This commit is contained in:
Yashar Moradi
2016-01-12 13:07:37 +01:00
parent 682e65fead
commit 299a62804c
5 changed files with 112 additions and 7 deletions

View File

@@ -0,0 +1,44 @@
.fullscreen:-moz-full-screen {
height: 100%;
}
.fullscreen:-webkit-full-screen {
height: 100%;
}
.fullscreen:-ms-fullscreen {
height: 100%;
}
.fullscreen:fullscreen {
height: 100%;
}
.fullscreen {
margin-bottom: 10px;
width: 100%;
height: 400px;
}
.ol-rotate {
top: 3em;
}
.map {
width: 80%;
height: 100%;
float: left;
}
.sidepanel {
background: #1F6B75;
width: 20%;
height: 100%;
float: left;
}
.sidepanel-title {
width: 100%;
font-size: 3em;
color: #ffffff;
display: block;
text-align: center;
}

View File

@@ -0,0 +1,16 @@
---
layout: example.html
title: Full Screen Control with extended source element
shortdesc: Example of a full screen control with a source option definition.
docs: >
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
tags: "full-screen, source, fullScreenSource, osm, osm-maps"
---
<div id="fullscreen" class="fullscreen">
<div id="map" class="map"></div>
<div class="sidepanel">
<span class="sidepanel-title">Side Panel</span>
</div>
</div>

View File

@@ -0,0 +1,28 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.control.FullScreen');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
var view = new ol.View({
center: [-9101767, 2822912],
zoom: 14
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen({
source: 'fullscreen'
})
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
renderer: common.getRendererFromQueryString(),
target: 'map',
view: view
});