Netbrain has uploaded a new change for review.
https://gerrit.wikimedia.org/r/73738
Change subject: Added a toggle fullscreen button to Maps.
......................................................................
Added a toggle fullscreen button to Maps.
Upon receiving the click event, the map container gets the following css styles
set:
positon: fixed
top: 0px
left: 0px
width: 100%
height: 100%
z-index: 10000
which effectively displays the map as fullscreen, overlaying all other
dom elements.
When the button is clicked again, the css styles is reverted to its original
state.
This functionality is only enabled for google maps, however i see no reason
why this should not work with any map service.
Change-Id: Ie019385ee0dd8e62712a42ef5d84e9a1a65d2560
---
M Maps.i18n.php
M includes/services/GoogleMaps3/GoogleMaps3.php
M includes/services/GoogleMaps3/jquery.googlemap.js
3 files changed, 91 insertions(+), 27 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Maps
refs/changes/38/73738/1
diff --git a/Maps.i18n.php b/Maps.i18n.php
index fc0b0f2..ed8640e 100644
--- a/Maps.i18n.php
+++ b/Maps.i18n.php
@@ -122,6 +122,9 @@
'maps-displaymap-par-static' => 'If the map should be static',
'maps-displaymap-par-wmsoverlay' => 'Use a WMS overlay',
+ 'maps-fullscreen-button' => 'Toggle fullscreen',
+ 'maps-fullscreen-button-tooltip' => 'View the map as
fullscreen/embedded.',
+
// Validation
'validation-error-invalid-location' => 'Parameter $1 must be a valid
location.',
'validation-error-invalid-locations' => 'Parameter $1 must be one or
more valid locations.',
@@ -259,6 +262,8 @@
'right-geocode' => '{{doc-right|geocode}}',
'maps_map' => '{{Identical|Map}}',
'maps-copycoords-prompt' => 'text displayed in javascript prompt to
indicate first press ctrl+c to copy text, and press enter to close prompt',
+ 'maps-fullscreen-button' => 'Text displayed in the map as a button to
toggle fullscreen view',
+ 'maps-fullscreen-button-tooltip' => 'Text displayed when hovering over
"maps-fullscreen-button"',
'maps-others' => '{{Identical|Other}}',
'maps-layer-property' => '{{Identical|Property}}',
'maps-layer-value' => '{{Identical|Value}}',
diff --git a/includes/services/GoogleMaps3/GoogleMaps3.php
b/includes/services/GoogleMaps3/GoogleMaps3.php
index 8f74e34..7cc783a 100644
--- a/includes/services/GoogleMaps3/GoogleMaps3.php
+++ b/includes/services/GoogleMaps3/GoogleMaps3.php
@@ -34,6 +34,8 @@
'maps-googlemaps3-incompatbrowser',
'maps-copycoords-prompt',
'maps-searchmarkers-text',
+ 'maps-fullscreen-button',
+ 'maps-fullscreen-button-tooltip',
)
);
diff --git a/includes/services/GoogleMaps3/jquery.googlemap.js
b/includes/services/GoogleMaps3/jquery.googlemap.js
index ca6cfa1..ac1734f 100644
--- a/includes/services/GoogleMaps3/jquery.googlemap.js
+++ b/includes/services/GoogleMaps3/jquery.googlemap.js
@@ -39,19 +39,19 @@
this.circles = [];
- /**
- * All rectangles on the map
- */
- this.rectangles = [];
+ /**
+ * All rectangles on the map
+ */
+ this.rectangles = [];
- /**
- * All image overlays on the map
- */
- this.imageoverlays = [];
+ /**
+ * All image overlays on the map
+ */
+ this.imageoverlays = [];
- /**
+ /**
* Creates a new marker with the provided data,
* adds it to the map, and returns it.
* @param {Object} markerData Contains the fields lat, lon,
title, text and icon
@@ -319,22 +319,22 @@
});
};
- this.addImageOverlay = function(properties){
- var imageBounds = new google.maps.LatLngBounds(
- new google.maps.LatLng(properties.sw.lat,properties.sw.lon),
- new google.maps.LatLng(properties.ne.lat,properties.ne.lon)
- );
+ this.addImageOverlay = function(properties){
+ var imageBounds = new google.maps.LatLngBounds(
+ new
google.maps.LatLng(properties.sw.lat,properties.sw.lon),
+ new
google.maps.LatLng(properties.ne.lat,properties.ne.lon)
+ );
- var image = new
google.maps.GroundOverlay(properties.image,imageBounds);
- image.setMap(this.map);
+ var image = new
google.maps.GroundOverlay(properties.image,imageBounds);
+ image.setMap(this.map);
- this.imageoverlays.push(image);
+ this.imageoverlays.push(image);
- //add click event
- google.maps.event.addListener(image, "click", function (event) {
- openBubbleOrLink.call(this, properties, event, image);
- });
- };
+ //add click event
+ google.maps.event.addListener(image, "click", function
(event) {
+ openBubbleOrLink.call(this, properties, event,
image);
+ });
+ };
this.removePolygon = function (polygon) {
@@ -670,11 +670,11 @@
});
}
- if(options.imageoverlays){
- for (var i = 0; i < options.imageoverlays.length; i++) {
- this.addImageOverlay(options.imageoverlays[i]);
- }
- }
+ if(options.imageoverlays){
+ for (var i = 0; i <
options.imageoverlays.length; i++) {
+
this.addImageOverlay(options.imageoverlays[i]);
+ }
+ }
if (options.wmsoverlay) {
var wmsOptions = {
@@ -720,8 +720,65 @@
map.mapTypes.set('OpenLayers', openlayersWMS);
map.setMapTypeId('OpenLayers');
}
+
+ //Add custom controls
+ // - Fullscreen
+
this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new
FullscreenControl(this.map));
+
};
+ function FullscreenControl(map) {
+
+ var controlDiv = document.createElement('div');
+ controlDiv.style.padding = '5px';
+ controlDiv.index = 1;
+
+ var controlUI = document.createElement('div');
+ controlUI.style.backgroundColor = 'white';
+ controlUI.style.borderStyle = 'solid';
+ controlUI.style.borderWidth = '1px';
+ controlUI.style.cursor = 'pointer';
+ controlUI.style.textAlign = 'center';
+ controlUI.title =
mediaWiki.msg('maps-fullscreen-button-tooltip');
+ controlDiv.appendChild(controlUI);
+
+ var controlText = document.createElement('div');
+ controlText.style.fontFamily = 'Arial,sans-serif';
+ controlText.style.fontSize = '12px';
+ controlText.style.paddingLeft = '4px';
+ controlText.style.paddingRight = '4px';
+ controlText.innerHTML =
mediaWiki.msg('maps-fullscreen-button');
+ controlUI.appendChild(controlText);
+
+ google.maps.event.addDomListener(controlUI, 'click',
function() {
+ var mapDiv = $(map.getDiv());
+ if(mapDiv.data('preFullscreenCss') != null){
+
mapDiv.css(mapDiv.data('preFullscreenCss'));
+ mapDiv.removeData('preFullscreenCss');
+ }else{
+ var fullscreenCss = {
+ position:'fixed',
+ top: 0,
+ left:0,
+ width:'100%',
+ height:'100%',
+ zIndex:10000
+ };
+ var oldState = {};
+ for(var cssProp in fullscreenCss){
+ oldState[cssProp] =
mapDiv.css(cssProp);
+ }
+
mapDiv.data('preFullscreenCss',oldState);
+ mapDiv.css(fullscreenCss);
+ }
+
+
+ });
+
+ return controlDiv;
+ }
+
+
function openBubbleOrLink(properties, event, obj) {
if (properties.link) {
window.location.href = properties.link;
--
To view, visit https://gerrit.wikimedia.org/r/73738
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie019385ee0dd8e62712a42ef5d84e9a1a65d2560
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Maps
Gerrit-Branch: master
Gerrit-Owner: Netbrain <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
