Jeroen De Dauw has submitted this change and it was merged.
Change subject: Added a toggle fullscreen button to Maps that is enabled trough
the parameter enablefullscreen=true
......................................................................
Added a toggle fullscreen button to Maps that is enabled trough the parameter
enablefullscreen=true
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/Maps_GoogleMaps3.php
M includes/services/GoogleMaps3/jquery.googlemap.js
4 files changed, 100 insertions(+), 27 deletions(-)
Approvals:
Jeroen De Dauw: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Maps.i18n.php b/Maps.i18n.php
index 5c41493..60a12a4 100644
--- a/Maps.i18n.php
+++ b/Maps.i18n.php
@@ -123,6 +123,10 @@
'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.',
+ 'maps-googlemaps3-par-enable-fullscreen' => 'Enable fullscreen button',
+
// 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.',
@@ -260,6 +264,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-kml-parsing-failed' => 'text displayed in the event of parsing
failure of kml file(s).',
'maps-layer-property' => '{{Identical|Property}}',
@@ -361,6 +367,7 @@
KML stands for [[w:Keyhole Markup Language|Keyhole Markup Language]].',
'maps-googlemaps3-par-poi' => '{{maps-par|googlemaps3|poi}}',
+ 'maps-googlemaps3-par-enable-fullscreen' =>
'{{maps-par|googlemaps3|enablefullscreen}}',
'mapeditor' => 'title of the special page [[Special:MapEditor]].',
'specialpages-group-maps' =>
'{{doc-special-group|like=[[Special:MapEditor]]}}
{{Identical|Map}}',
diff --git a/includes/services/GoogleMaps3/GoogleMaps3.php
b/includes/services/GoogleMaps3/GoogleMaps3.php
index 83b2639..f245ae3 100644
--- a/includes/services/GoogleMaps3/GoogleMaps3.php
+++ b/includes/services/GoogleMaps3/GoogleMaps3.php
@@ -37,6 +37,8 @@
'maps-googlemaps3-incompatbrowser',
'maps-copycoords-prompt',
'maps-searchmarkers-text',
+ 'maps-fullscreen-button',
+ 'maps-fullscreen-button-tooltip',
)
);
diff --git a/includes/services/GoogleMaps3/Maps_GoogleMaps3.php
b/includes/services/GoogleMaps3/Maps_GoogleMaps3.php
index 34c0507..069f3ce 100644
--- a/includes/services/GoogleMaps3/Maps_GoogleMaps3.php
+++ b/includes/services/GoogleMaps3/Maps_GoogleMaps3.php
@@ -219,6 +219,12 @@
'message' => 'maps-googlemaps3-par-searchmarkers',
// new CriterionSearchMarkers() FIXME
);
+
+ $params['enablefullscreen'] = array(
+ 'type' => 'boolean',
+ 'default' => false,
+ 'message' => 'maps-googlemaps3-par-enable-fullscreen',
+ );
}
/**
diff --git a/includes/services/GoogleMaps3/jquery.googlemap.js
b/includes/services/GoogleMaps3/jquery.googlemap.js
index aca6176..c90b9a1 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
@@ -373,22 +373,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) {
@@ -703,11 +703,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.copycoords) {
@@ -766,8 +766,66 @@
map.mapTypes.set('OpenLayers', openlayersWMS);
map.setMapTypeId('OpenLayers');
}
+
+ //Add custom controls
+ // - Fullscreen
+ if(options.enablefullscreen){
+
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: merged
Gerrit-Change-Id: Ie019385ee0dd8e62712a42ef5d84e9a1a65d2560
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/Maps
Gerrit-Branch: master
Gerrit-Owner: Netbrain <[email protected]>
Gerrit-Reviewer: Daniel Werner <[email protected]>
Gerrit-Reviewer: Jeroen De Dauw <[email protected]>
Gerrit-Reviewer: Netbrain <[email protected]>
Gerrit-Reviewer: Nischayn22 <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
