Adding a fullscreen button underneath the zoom controls would be a great default or optional feature.
I found this plugin that does exactly what I mean, maybe it can be integrated in the leaflet module?
http://brunob.github.io/leaflet.fullscreen/

Great module by the way!

Comments

danon1981’s picture

Issue summary: View changes
interdruper’s picture

It should be not difficult to get it running after doing minor changes to your theme's .info file and to leaflet.drupal.js file:

  1. Download the .css and the .js files to your theme's root dir.
  2. Add this couple of lines to your theme's .info file:
    stylesheets[all][] = Control.FullScreen.css
    scripts[] = Control.FullScreen.js
    
  3. Edit leaflet.drupal.js and after the line 20:
    // instantiate our new map
    var lMap = new L.Map(this.mapId, settings);
    

    add the following lines:

    var fullScreen = new L.Control.FullScreen(); 
    lMap.addControl(fullScreen);
    

Let me know if it works...

danon1981’s picture

Thanks for the suggestion although I think this is a good feature to be included in the module not something that needs to be created for each individual use.

jmanny’s picture

Thanks, but is not working for me. I'm using Leaflet 7.x-1.0-beta3, is it the version?

jmanny’s picture

Got it working, thanks to @interdruper.
For those using Leaflet Markercluster 7.x-1.0-beta1 add these two lines to leaflet_markercluster.drupal.js instead of leaflet.drupal.js

var fullScreen = new L.Control.FullScreen();
lMap.addControl(fullScreen);

Chrome ok
Firefox ok
Safari 6.0.5 not working

danon1981’s picture

If someone is going to follow the instructions above, also change the following to match the look of the controls.

Around line 8 of Control.FullScreen.js
Change

onAdd: function (map) {
		var className = 'leaflet-control-zoom-fullscreen', container;

Into

onAdd: function (map) {
		var className = 'leaflet-control-zoom-fullscreen leaflet-bar-part leaflet-bar-part-bottom', container;

And for hover effect make a sprite image.

vistree’s picture

This works great! Combining #2 and #6 work great for me!!
Can anyone explane how we can extend the leaflet.widget (https://drupal.org/project/leaflet_widget) to get fullscreen in edit mode?

suburbanmarx’s picture

I too was able to make this work with leaflet-markercluster as mentioned in comment#5, however, wasn't able to make the map be fullscreen by default upon load.

Any ideas on how to do this? I thought there would be some statement I could modify in the javascript to set the default fullscreen, but haven't been able to find it. Will keep trying. Sorry for the ignorant question- I have no experience with javascript whatsoever.

jmanny’s picture

Fullscreen by default is a great idea. If you have any news let us know.

RdeBoer’s picture

FYI, http://drupal.org/project/ip_geoloc has had a Fullscreen option for a while. It is not full-screen by default, though.

Bram Linssen’s picture

With the function hook_leaflet_map_info() it is possible to set fullscreenControl: true without altering the leaflet.drupal.js or leaflet_markercluster.drupal.js file.
Just add 'fullscreenControl' => TRUE, to the settings array as in the example below.

function hook_leaflet_map_info() {
  return array(
    'OSM Mapnik' => array(
      'label' => 'OSM Mapnik',
      'description' => t('Leaflet default map.'),
      'settings' => array(
        'fullscreenControl' => TRUE,
        'dragging' => TRUE,
        'touchZoom' => TRUE,
        'scrollWheelZoom' => TRUE,
        'doubleClickZoom' => TRUE,
        'zoomControl' => TRUE,
        'attributionControl' => TRUE,
        'trackResize' => TRUE,
        'fadeAnimation' => TRUE,
        'zoomAnimation' => TRUE,
        'closePopupOnClick' => TRUE,
        'layerControl' => TRUE,
        // 'minZoom' => 10,
        // 'maxZoom' => 15,
        // 'zoom' => 15, // set the map zoom fixed to 15
      ),
      'layers' => array(
        'earth' => array(
          'urlTemplate' => 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'options' => array(
            'attribution' => 'OSM Mapnik',
          ),
        ),
      ),
      // Uncomment the lines below to use a custom icon
      // 'icon' => array(
      //   'iconUrl'       => '/sites/default/files/icon.png',
      //   'iconSize'      => array('x' => '20', 'y' => '40'),
      //   'iconAnchor'    => array('x' => '20', 'y' => '40'),
      //   'popupAnchor'   => array('x' => '-8', 'y' => '-32'),
      //   'shadowUrl'     => '/sites/default/files/icon-shadow.png',
      //   'shadowSize'    => array('x' => '25', 'y' => '27'),
      //   'shadowAnchor'  => array('x' => '0', 'y' => '27'),
      // ),
    ),
  );
}

Add this function to a custom module and select the map.
(You still need to add the Control.FullScreen.css and Control.FullScreen.js files to the relevant webpages)

clemens.tolboom’s picture

Thanks for the hints. This is what I did including .info from #2

/**
 * Implements leaflet_map_prebuild_alter().
 *
 * @param $settings
 */
function my_custom_leaflet_map_prebuild_alter(&$settings) {
  $settings['map']['settings']['fullscreenControl'] = true;
}
sano’s picture

None of these instructions work for drupal installation which include the IP Geolocation Views & Maps module. While that module contains its own (working) implementation of the fullscreen control, it is missing some other features that patched base leaflet offers (dynamic styling of vector objects). That's one reason why somebody might want to use IPGV on some pages and Leaflet Views on another. Apparently this has some drawbacks. :-(

Edit: The .css and .js files I downloaded were corrupted. After fixing that I still didn't see the control, but I realized that I have the Markercluster module installed, so I made the change as advised in #5 - and the control showed up. Thanks everybody.