ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #2159 from tonio/attributions

Browse Source 
Merge Logo control into Attribution
This commit is contained in:
Antoine Abt
2014-07-11 11:48:21 +02:00
parent 121d19e0ba e707e918aa
commit aafa578805
37 changed files with 547 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
css/ol.css
View File

@@ -1,53 +1,3 @@
.ol-attribution {
position: absolute;
text-align: right;
bottom: 0;
right: 0;
padding: 6px;
color: #000000;
color: rgba(238,238,238,1);
background: rgba(0,60,136,0.3);
}
.ol-attribution a {
text-decoration: none;
color: #7b98bc;
color: rgba(255,255,255,1);
}
.ol-attribution ul {
margin: 0;
padding: 0;
font-size: 10px;
line-height: 12px;
}
.ol-attribution li {
display: inline;
list-style: none;
line-height: inherit;
}
.ol-attribution li:not(:last-child):after {
content: "\2003";
}
.ol-attribution-bing-tos {
float:right;
padding-top: 2px;
white-space: nowrap;
}
.ol-logo {
bottom: 0;
left: 0;
padding: 2px;
position: absolute;
}
.ol-logo ul {
margin: 0;
padding: 0;
}
.ol-logo ul li {
display: inline;
list-style: none;
}
.ol-mouse-position {
top: 8px;
@@ -226,11 +176,65 @@ button.ol-full-screen-true:after {
}
.ol-rotate .ol-has-tooltip:hover [role=tooltip],
.ol-rotate .ol-has-tooltip:focus [role=tooltip],
.ol-attribution .ol-has-tooltip:hover [role=tooltip],
.ol-attribution .ol-has-tooltip:focus [role=tooltip],
.ol-full-screen .ol-has-tooltip:hover [role=tooltip],
.ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
right: 2.2em;
left: auto;
border-radius: 4px 0 0 4px;
border-left-width: 3px;
border-right-width: 0;
}
.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
}
.ol-attribution ul {
margin: 0;
padding: 0 .5em;
font-size: .7rem;
line-height: 1.375em;
color: #000;
text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
display: inline;
list-style: none;
line-height: inherit;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
}
.ol-attribution ul, .ol-attribution button {
display: inline-block;
}
.ol-attribution:not(.ol-collapsed) button:hover [role=tooltip],
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {

6
examples/accessible.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -12,6 +13,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/animation.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.animation');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.OSM');
@@ -55,6 +56,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

51
examples/attributions.html Normal file
View File

@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Attributions example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Attributions example</h4>
<p id="shortdesc">Example of a attributions visibily change on map resize, to collapse them on small maps.</p>
<div id="docs">
<p>See the <a href="attributions.js" target="_blank">attributions.js source</a> to see how this is done.</p>
</div>
<div id="tags">attributions, openstreetmap</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=attributions" type="text/javascript"></script>
</body>
</html>

33
examples/attributions.js Normal file
View File

@@ -0,0 +1,33 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.control.Attribution');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
var attribution = new ol.control.Attribution({
collapsible: false
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
controls: ol.control.defaults({ attribution: false }).extend([attribution]),
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
function checkSize() {
var small = map.getSize()[0] < 600;
attribution.setCollapsible(small);
attribution.setCollapsed(small);
}
$(window).on('resize', checkSize);
checkSize();

6
examples/bind-input.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.BrowserFeature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.dom.Input');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -29,6 +30,11 @@ var map = new ol.Map({
layers: [layer],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

6
examples/canvas-tiles.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.OSM');
@@ -23,6 +24,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.transform(
[-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),

4
examples/center.html
View File

@@ -21,10 +21,6 @@
top: 178px;
left: 158px;
}
div.ol-logo {
left: 150px;
bottom: 30px;
}
div.ol-attribution {
bottom: 30px;
right: 50px;

6
examples/center.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.geom.Point');
goog.require('ol.geom.SimpleGeometry');
goog.require('ol.layer.Tile');
@@ -50,6 +51,11 @@ var map = new ol.Map({
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

6
examples/custom-controls.js
View File

@@ -62,7 +62,11 @@ ol.inherits(app.RotateNorthControl, ol.control.Control);
var map = new ol.Map({
controls: ol.control.defaults().extend([
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([
new app.RotateNorthControl()
]),
layers: [

6
examples/device-orientation.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.DeviceOrientation');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.dom.Input');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
@@ -21,6 +22,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

6
examples/export-map.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -11,6 +12,11 @@ var map = new ol.Map({
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/geojson.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.geom.Circle');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
@@ -188,6 +189,11 @@ var map = new ol.Map({
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/geolocation-orientation.js
View File

@@ -2,6 +2,7 @@ goog.require('ol.Geolocation');
goog.require('ol.Map');
goog.require('ol.Overlay');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.geom.LineString');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
@@ -21,6 +22,11 @@ var map = new ol.Map({
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

6
examples/geolocation.js
View File

@@ -3,6 +3,7 @@ goog.require('ol.FeatureOverlay');
goog.require('ol.Geolocation');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.dom.Input');
goog.require('ol.geom.Point');
goog.require('ol.layer.Tile');
@@ -21,6 +22,11 @@ var map = new ol.Map({
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});

3
examples/google-map.html
View File

@@ -10,9 +10,6 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style type="text/css">
div.ol-logo {
left: 65px;
}
div.fill {
width: 100%;
height: 100%;

6
examples/igc.js
View File

@@ -3,6 +3,7 @@ goog.require('ol.Feature');
goog.require('ol.FeatureOverlay');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.geom.LineString');
goog.require('ol.geom.Point');
goog.require('ol.layer.Tile');
@@ -83,6 +84,11 @@ var map = new ol.Map({
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [703365.7089403362, 5714629.865071137],
zoom: 9

6
examples/layer-clipping-webgl.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.BrowserFeature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -20,6 +21,11 @@ if (!ol.BrowserFeature.HAS_WEBGL) {
layers: [osm],
renderer: 'webgl',
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/layer-clipping.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -10,6 +11,11 @@ var osm = new ol.layer.Tile({
var map = new ol.Map({
layers: [osm],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/layer-swipe.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.BingMaps');
goog.require('ol.source.OSM');
@@ -17,6 +18,11 @@ var bing = new ol.layer.Tile({
var map = new ol.Map({
layers: [osm, bing],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/localized-openstreetmap.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -42,6 +43,11 @@ var map = new ol.Map({
openSeaMapLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
maxZoom: 18,
center: [-244780.24508882355, 5986452.183179816],

6
examples/min-max-resolution.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
goog.require('ol.source.TileJSON');
@@ -27,6 +28,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [653600, 5723680],
zoom: 5

6
examples/mouse-position.js
View File

@@ -19,7 +19,11 @@ var mousePositionControl = new ol.control.MousePosition({
});
var map = new ol.Map({
controls: ol.control.defaults().extend([mousePositionControl]),
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([mousePositionControl]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()

6
examples/moveend.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
@@ -14,6 +15,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/navigation-controls.js
View File

@@ -7,7 +7,11 @@ goog.require('ol.source.OSM');
var map = new ol.Map({
controls: ol.control.defaults().extend([
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([
new ol.control.ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,

6
examples/rotation.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -12,6 +13,11 @@ var map = new ol.Map({
],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [-25860000, 4130000],
rotation: Math.PI / 6,

6
examples/scale-line.js
View File

@@ -10,7 +10,11 @@ goog.require('ol.source.OSM');
var scaleLineControl = new ol.control.ScaleLine();
var map = new ol.Map({
controls: ol.control.defaults().extend([
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([
scaleLineControl
]),
layers: [

6
examples/simple.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -10,6 +11,11 @@ var map = new ol.Map({
source: new ol.source.OSM()
})
],
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: new ol.View({

6
examples/teleport.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -11,6 +12,11 @@ var map = new ol.Map({
})
],
renderer: exampleNS.getRendererFromQueryString(),
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2

6
examples/vector-osm.js
View File

@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.format.OSMXML');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
@@ -131,6 +132,11 @@ var raster = new ol.layer.Tile({
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [739218, 5906096],
maxZoom: 19,

6
examples/wmts.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
@@ -53,6 +54,11 @@ var map = new ol.Map({
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [-11158582, 4813697],
zoom: 4

6
examples/xyz.js
View File

@@ -1,6 +1,7 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
goog.require('ol.source.XYZ');
@@ -13,6 +14,11 @@ var attribution = new ol.Attribution({
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({

74
externs/olx.js
View File

@@ -660,6 +660,42 @@ olx.control.AttributionOptions.prototype.className;
olx.control.AttributionOptions.prototype.target;
/**
* Specify if attributions can be collapsed. If you use an OSM source,
* should be set to `false` — see
* {@link http://www.openstreetmap.org/copyright OSM Copyright} —
* Default is `true`.
* @type {boolean|undefined}
*/
olx.control.AttributionOptions.prototype.collapsible;
/**
* Specify if attributions should be collapsed at startup. Default is `true`.
* @type {boolean|undefined}
*/
olx.control.AttributionOptions.prototype.collapsed;
/**
* Text label to use for the button tip. Default is `Attributions`
* @type {string|undefined}
*/
olx.control.AttributionOptions.prototype.tipLabel;
/**
* Text label to use for the collapsed attributions button. Default is `i`
* @type {string|undefined}
*/
olx.control.AttributionOptions.prototype.label;
/**
* Text label to use for the expanded attributions button. Default is `»`
* @type {string|undefined}
*/
olx.control.AttributionOptions.prototype.collapseLabel;
/**
* @typedef {{element: (Element|undefined),
* target: (Element|string|undefined)}}
@@ -687,8 +723,6 @@ olx.control.ControlOptions.prototype.target;
/**
* @typedef {{attribution: (boolean|undefined),
* attributionOptions: (olx.control.AttributionOptions|undefined),
* logo: (boolean|undefined),
* logoOptions: (olx.control.LogoOptions|undefined),
* zoom: (boolean|undefined),
* rotateOptions: (olx.control.RotateOptions|undefined),
* zoomOptions: (olx.control.ZoomOptions|undefined)}}
@@ -711,20 +745,6 @@ olx.control.DefaultsOptions.prototype.attribution;
olx.control.DefaultsOptions.prototype.attributionOptions;
/**
* Logo. Default is `true`.
* @type {boolean|undefined}
*/
olx.control.DefaultsOptions.prototype.logo;
/**
* Logo options.
* @type {olx.control.LogoOptions|undefined}
*/
olx.control.DefaultsOptions.prototype.logoOptions;
/**
* Rotate. Default is `true`.
* @type {boolean|undefined}
@@ -791,28 +811,6 @@ olx.control.FullScreenOptions.prototype.keys;
olx.control.FullScreenOptions.prototype.target;
/**
* @typedef {{className: (string|undefined),
* target: (Element|undefined)}}
* @api
*/
olx.control.LogoOptions;
/**
* CSS class name. Default is `ol-logo`.
* @type {string|undefined}
*/
olx.control.LogoOptions.prototype.className;
/**
* Target.
* @type {Element|undefined}
*/
olx.control.LogoOptions.prototype.target;
/**
* @typedef {{className: (string|undefined),
* coordinateFormat: (ol.CoordinateFormatType|undefined),

2
resources/layout.css
View File

@@ -9,7 +9,7 @@ body {
background: url(textured_paper.jpeg) repeat;
}
.ol-attribution {
max-width: 50%;
max-width: calc(100%-3em);
}
#tags {
display: none;

217
src/ol/control/attributioncontrol.js
View File

@@ -4,11 +4,15 @@ goog.provide('ol.control.Attribution');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.dom.classes');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('goog.style');
goog.require('ol.Attribution');
goog.require('ol.control.Control');
goog.require('ol.css');
goog.require('ol.pointer.PointerEventHandler');
@@ -34,11 +38,88 @@ ol.control.Attribution = function(opt_options) {
*/
this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
/**
* @private
* @type {Element}
*/
this.logoLi_ = goog.dom.createElement(goog.dom.TagName.LI);
goog.dom.appendChild(this.ulElement_, this.logoLi_);
goog.style.setElementShown(this.logoLi_, false);
/**
* @private
* @type {boolean}
*/
this.collapsed_ = goog.isDef(options.collapsed) ? options.collapsed : true;
/**
* @private
* @type {boolean}
*/
this.collapsible_ = goog.isDef(options.collapsible) ?
options.collapsible : true;
if (!this.collapsible_) {
this.collapsed_ = false;
}
var className = goog.isDef(options.className) ?
options.className : 'ol-attribution';
var tipLabel = goog.isDef(options.tipLabel) ?
options.tipLabel : 'Attributions';
var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
'role' : 'tooltip'
}, tipLabel);
/**
* @private
* @type {string}
*/
this.collapseLabel_ = goog.isDef(options.collapseLabel) ?
options.collapseLabel : '\u00BB';
/**
* @private
* @type {string}
*/
this.label_ = goog.isDef(options.label) ? options.label : 'i';
var label = goog.dom.createDom(goog.dom.TagName.SPAN, {},
(this.collapsible_ && !this.collapsed_) ?
this.collapseLabel_ : this.label_);
/**
* @private
* @type {Element}
*/
this.labelSpan_ = label;
var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
'class': 'ol-has-tooltip'
}, this.labelSpan_);
goog.dom.appendChild(button, tip);
var buttonHandler = new ol.pointer.PointerEventHandler(button);
this.registerDisposable(buttonHandler);
goog.events.listen(buttonHandler, ol.pointer.EventType.POINTERUP,
this.handlePointerUp_, false, this);
goog.events.listen(button, goog.events.EventType.CLICK,
this.handleClick_, false, this);
goog.events.listen(button, [
goog.events.EventType.MOUSEOUT,
goog.events.EventType.FOCUSOUT
], function() {
this.blur();
}, false);
var element = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
}, this.ulElement_);
'class': className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
ol.css.CLASS_CONTROL +
(this.collapsed_ && this.collapsible_ ? ' ol-collapsed' : '') +
(this.collapsible_ ? '' : ' ol-uncollapsible')
}, this.ulElement_, button);
goog.base(this, {
element: element,
@@ -63,6 +144,12 @@ ol.control.Attribution = function(opt_options) {
*/
this.attributionElementRenderedVisible_ = {};
/**
* @private
* @type {Object.<string, Element>}
*/
this.logoElements_ = {};
};
goog.inherits(ol.control.Attribution, ol.control.Control);
@@ -180,10 +267,134 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
}
var renderVisible =
!goog.object.isEmpty(this.attributionElementRenderedVisible_);
!goog.object.isEmpty(this.attributionElementRenderedVisible_) ||
!goog.object.isEmpty(frameState.logos);
if (this.renderedVisible_ != renderVisible) {
goog.style.setElementShown(this.element, renderVisible);
this.renderedVisible_ = renderVisible;
}
this.insertLogos_(frameState);
};
/**
* @param {?olx.FrameState} frameState Frame state.
* @private
*/
ol.control.Attribution.prototype.insertLogos_ = function(frameState) {
var logo;
var logos = frameState.logos;
var logoElements = this.logoElements_;
for (logo in logoElements) {
if (!(logo in logos)) {
goog.dom.removeNode(logoElements[logo]);
delete logoElements[logo];
}
}
var image, logoElement, logoKey;
for (logoKey in logos) {
if (!(logoKey in logoElements)) {
image = new Image();
image.src = logoKey;
var logoValue = logos[logoKey];
if (logoValue === '') {
logoElement = image;
} else {
logoElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': logoValue,
'target': '_blank'
});
logoElement.appendChild(image);
}
goog.dom.appendChild(this.logoLi_, logoElement);
logoElements[logoKey] = logoElement;
}
}
goog.style.setElementShown(this.logoLi_, !goog.object.isEmpty(logos));
};
/**
* @param {goog.events.BrowserEvent} event The event to handle
* @private
*/
ol.control.Attribution.prototype.handleClick_ = function(event) {
if (event.screenX !== 0 && event.screenY !== 0) {
return;
}
this.handleToggle_();
};
/**
* @param {ol.pointer.PointerEvent} pointerEvent The event to handle
* @private
*/
ol.control.Attribution.prototype.handlePointerUp_ = function(pointerEvent) {
pointerEvent.browserEvent.preventDefault();
this.handleToggle_();
};
/**
* @private
*/
ol.control.Attribution.prototype.handleToggle_ = function() {
goog.dom.classes.toggle(this.element, 'ol-collapsed');
goog.dom.setTextContent(this.labelSpan_,
(this.collapsed_) ? this.collapseLabel_ : this.label_);
this.collapsed_ = !this.collapsed_;
};
/**
* @return {boolean} True is the widget is collapsible.
* @api
*/
ol.control.Attribution.prototype.getCollapsible = function() {
return this.collapsible_;
};
/**
* @param {boolean} collapsible True is the widget is collapsible.
* @api
*/
ol.control.Attribution.prototype.setCollapsible = function(collapsible) {
if (this.collapsible_ === collapsible) {
return;
}
this.collapsible_ = collapsible;
goog.dom.classes.toggle(this.element, 'ol-uncollapsible');
if (!collapsible && this.collapsed_) {
this.handleToggle_();
}
};
/**
* @param {boolean} collapsed True is the widget is collapsed.
* @api
*/
ol.control.Attribution.prototype.setCollapsed = function(collapsed) {
if (!this.collapsible_ || this.collapsed_ === collapsed) {
return;
}
this.handleToggle_();
};
/**
* @return {boolean} True is the widget is collapsed.
* @api
*/
ol.control.Attribution.prototype.getCollapsed = function() {
return this.collapsed_;
};

8
src/ol/control/controldefaults.js
View File

@@ -2,7 +2,6 @@ goog.provide('ol.control');
goog.require('ol.Collection');
goog.require('ol.control.Attribution');
goog.require('ol.control.Logo');
goog.require('ol.control.Rotate');
goog.require('ol.control.Zoom');
@@ -15,7 +14,6 @@ goog.require('ol.control.Zoom');
* * {@link ol.control.Zoom}
* * {@link ol.control.Rotate}
* * {@link ol.control.Attribution}
* * {@link ol.control.Logo}
*
* @param {olx.control.DefaultsOptions=} opt_options Defaults options.
* @return {ol.Collection} Controls.
@@ -45,12 +43,6 @@ ol.control.defaults = function(opt_options) {
controls.push(new ol.control.Attribution(options.attributionOptions));
}
var logoControl = goog.isDef(options.logo) ?
options.logo : true;
if (logoControl) {
controls.push(new ol.control.Logo(options.logoOptions));
}
return controls;
};

122
src/ol/control/logocontrol.js
View File

@@ -1,122 +0,0 @@
goog.provide('ol.control.Logo');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.object');
goog.require('goog.style');
goog.require('ol.control.Control');
goog.require('ol.css');
/**
* @classdesc
* Shows a logo for all the layer sources in the map that have a logo
* associated with them, such as Bing. This control is part of a default map.
* By default it will show in the bottom-left portion of the map, but it can
* be styled by using a css selector for `.ol-logo`.
*
* @constructor
* @extends {ol.control.Control}
* @param {olx.control.LogoOptions=} opt_options Logo options.
* @api
*/
ol.control.Logo = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {Element}
*/
this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
var className = goog.isDef(options.className) ? options.className : 'ol-logo';
var element = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
}, this.ulElement_);
goog.base(this, {
element: element,
target: options.target
});
/**
* @private
* @type {boolean}
*/
this.renderedVisible_ = true;
/**
* @private
* @type {Object.<string, Element>}
*/
this.logoElements_ = {};
};
goog.inherits(ol.control.Logo, ol.control.Control);
/**
* @param {ol.MapEvent} mapEvent Map event.
*/
ol.control.Logo.prototype.handleMapPostrender = function(mapEvent) {
this.updateElement_(mapEvent.frameState);
};
/**
* @param {?olx.FrameState} frameState Frame state.
* @private
*/
ol.control.Logo.prototype.updateElement_ = function(frameState) {
if (goog.isNull(frameState)) {
if (this.renderedVisible_) {
goog.style.setElementShown(this.element, false);
this.renderedVisible_ = false;
}
return;
}
var logo;
var logos = frameState.logos;
var logoElements = this.logoElements_;
for (logo in logoElements) {
if (!(logo in logos)) {
goog.dom.removeNode(logoElements[logo]);
delete logoElements[logo];
}
}
var image, logoElement, logoKey;
for (logoKey in logos) {
if (!(logoKey in logoElements)) {
image = new Image();
image.src = logoKey;
var logoValue = logos[logoKey];
var child;
if (logoValue === '') {
child = image;
} else {
child = goog.dom.createDom(goog.dom.TagName.A, {
'href': logoValue,
'target': '_blank'
});
child.appendChild(image);
}
logoElement = goog.dom.createDom(goog.dom.TagName.LI, undefined, child);
goog.dom.appendChild(this.ulElement_, logoElement);
logoElements[logoKey] = logoElement;
}
}
var renderVisible = !goog.object.isEmpty(logos);
if (this.renderedVisible_ != renderVisible) {
goog.style.setElementShown(this.element, renderVisible);
this.renderedVisible_ = renderVisible;
}
};