Add the ability to auto center/zoom the map

The "autocenter" behavior was only active for the map displayed on the
category and main pages.
This patch adds an option "Auto center" in the left menu configuration
to use this behavior as well where it could be useful.

Note that this patch also set the default value '0,0' for the center
parameter. Prior to this patch, if it was not filled (empty string),
there was no default value, which caused some errors to be displayed in
the html ("Notice: Undefined variable: center_arr in ...")

Author: joubu

admin/admin_config.php

@@ -134,8 +134,8 @@
 if (isset($_POST['submit']) && !empty($_POST['osm_height']))
 {
 	// Check the center GPS position is valid
-	if (isset($_POST['osm_left_center']) and strlen($_POST['osm_left_center']) != 0)
-        $center_arr = explode(',', $_POST['osm_left_center']);
+        $osm_left_center = (isset($_POST['osm_left_center']) and strlen($_POST['osm_left_center']) != 0) ? $_POST['osm_left_center'] : '0,0';
+        $center_arr = explode(',', $osm_left_center);
         //print_r($center_arr);
         $latitude = $center_arr[0];
         $longitude = $center_arr[1];
@@ -168,7 +168,8 @@
             'popupinfo_comment' => isset($_POST['osm_left_popupinfo_comment']),
             'popupinfo_author'  => isset($_POST['osm_left_popupinfo_author']),
             'zoom'              => $_POST['osm_left_zoom'],
-            'center'            => $_POST['osm_left_center'],
+            'center'            => $osm_left_center,
+            'autocenter'        => get_boolean($_POST['osm_left_autocenter']),
             'layout'            => $_POST['osm_left_layout'],
 			),
         'category_description' => array(

admin/admin_config.tpl

@@ -110,13 +110,19 @@ Refer to the <a href="https://github.com/xbgmsharp/piwigo-openstreetmap/wiki" ta
 				<small>{'LEFTPOPUPINFO_DESC'|@translate}</small>
 			</li>
 			<li>
+				<label>{'Auto center'|@translate} : </label>
+				<label><input id="autocenter_enabled" type="radio" name="osm_left_autocenter" value="true" {if $left_menu.autocenter}checked="checked"{/if} onchange="autocenter_toggle(this);"/> {'Yes'|@translate}</label>
+				<label><input type="radio" name="osm_left_autocenter" value="false" {if not $left_menu.autocenter}checked="checked"{/if} onchange="autocenter_toggle(this);"/> {'No'|@translate}</label>
+				<br/><small>{'The map will be automatically centered and zoomed to contain all infos.'|@translate}</small>
+			</li>
+			<li id="osm_left_zoom_block">
 				<label>{'ZOOM'|@translate} : </label>
 				<select name="osm_left_zoom">
 					{html_options options=$AVAILABLE_ZOOM selected=$left_menu.zoom}
 				</select>
 				<br/><small>{'ZOOM_DESC'|@translate}</small>
 			</li>
-			<li>
+			<li id="osm_left_center_block">
 				<label>{'CENTER_MAP'|@translate} : </label>
 				<input type="text" value="{$left_menu.center}" name="osm_left_center" size="30" placeholder="0,0"/>
 				<br/><small>{'CENTER_MAP_DESC'|@translate}</small>
@@ -329,6 +335,21 @@ function pin_toggle()
 	pin_preview();
 }
 
+function autocenter_toggle()
+{
+	var radio = document.getElementById("autocenter_enabled");
+	var zoom_block = document.getElementById("osm_left_zoom_block");
+	var center_block = document.getElementById("osm_left_center_block");
+	if (radio.checked) // If autocenter
+	{
+		zoom_block.setAttribute("style", "display:none;");
+		center_block.setAttribute("style", "display:none;");
+	} else {
+		zoom_block.removeAttribute("style");
+		center_block.removeAttribute("style");
+	}
+}
+
 function tile_preview()
 {
 	var select = document.getElementById("osm_baselayer");
@@ -385,6 +406,7 @@ function pin_preview()
 
 window.onload = pin_preview();
 window.onload = tile_preview();
+window.onload = autocenter_toggle()
 
 </script>
 {/literal}

category.inc.php

@@ -55,7 +55,7 @@ function osm_render_category()
             $local_conf['center_lat'] = 0;
             $local_conf['center_lng'] = 0;
             $local_conf['zoom'] = 2;
-            $local_conf['auto_center'] = 0;
+            $local_conf['autocenter'] = 1;
             $local_conf['paths'] = osm_get_gps($page);
             $height = isset($conf['osm_conf']['category_description']['height']) ? $conf['osm_conf']['category_description']['height'] : '200';
             $width = isset($conf['osm_conf']['category_description']['width']) ? $conf['osm_conf']['category_description']['width'] : 'auto';

include/functions_map.php

@@ -279,17 +279,26 @@ function osm_get_js($conf, $local_conf, $js_data)
     $divname = isset($local_conf['divname']) ? $local_conf['divname'] : 'map';
 
     /* If the config include parameters get them */
-    $zoom = isset($conf['osm_conf']['left_menu']['zoom']) ? $conf['osm_conf']['left_menu']['zoom'] : 2;
     $center = isset($conf['osm_conf']['left_menu']['center']) ? $conf['osm_conf']['left_menu']['center'] : '0,0';
     $center_arr = preg_split('/,/', $center);
     $center_lat = isset($center_arr) ? $center_arr[0] : 0;
     $center_lng = isset($center_arr) ? $center_arr[1] : 0;
 
     /* If we have zoom and center coordonate, set it otherwise fallback default */
-    $zoom = isset($_GET['zoom']) ? $_GET['zoom'] : $zoom;
+    $zoom = isset($_GET['zoom'])
+        ? $_GET['zoom']
+        : (
+            isset($local_conf['zoom'])
+                ? $local_conf['zoom']
+                : 2
+            );
     $center_lat = isset($_GET['center_lat']) ? $_GET['center_lat'] : $center_lat;
     $center_lng = isset($_GET['center_lng']) ? $_GET['center_lng'] : $center_lng;
 
+    $autocenter = isset($local_conf['autocenter'])
+        ? $local_conf['autocenter']
+        : 0;
+
     // Load baselayerURL
     if     ($baselayer == 'mapnik')     $baselayerurl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
     else if($baselayer == 'mapquest')   $baselayerurl = 'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png';
@@ -344,7 +353,7 @@ function osm_get_js($conf, $local_conf, $js_data)
         $js .= "\nvar Url = '".$baselayerurl."',
         Attribution = '".$attribution."',
         TileLayer = new L.TileLayer(Url, {maxZoom: 18, noWrap: ".$nowarp.", attribution: Attribution});\n";
-        $js .= "var " . $divname . " = new L.Map('" . $divname . "', {" . $worldcopyjump . ", zoom: ".$local_conf['zoom'].", layers: [TileLayer], contextmenu: " . $local_conf['contextmenu'] . "});\n";
+        $js .= "var " . $divname . " = new L.Map('" . $divname . "', {" . $worldcopyjump . ", zoom: ".$zoom.", layers: [TileLayer], contextmenu: " . $local_conf['contextmenu'] . "});\n";
         $js .= $divname . ".attributionControl.setPrefix('');\n";
         $js .= "\nL.control.scale().addTo(" . $divname . ");\n";
         return $js;
@@ -354,7 +363,7 @@ function osm_get_js($conf, $local_conf, $js_data)
         Attribution = '".$attribution."',
         TileLayer = new L.TileLayer(Url, {maxZoom: 18, noWrap: ".$nowarp.", attribution: Attribution}),
         latlng = new L.LatLng(".$local_conf['center_lat'].", ".$local_conf['center_lng'].");\n";
-        $js .= "var " . $divname . " = new L.Map('" . $divname . "', {" . $worldcopyjump . ", center: latlng, ".$editor." zoom: ".$local_conf['zoom'].", layers: [TileLayer], contextmenu: " . $local_conf['contextmenu'] . "});\n";
+        $js .= "var " . $divname . " = new L.Map('" . $divname . "', {" . $worldcopyjump . ", center: latlng, ".$editor." zoom: ".$zoom.", layers: [TileLayer], contextmenu: " . $local_conf['contextmenu'] . "});\n";
         $js .= $divname . ".attributionControl.setPrefix('');\n";
         $js .= "var MarkerClusterList=[];\n";
         $js .= "if (typeof L.MarkerClusterGroup === 'function')\n";
@@ -508,7 +517,7 @@ function osm_get_js($conf, $local_conf, $js_data)
     }
     $js .= "\nif (typeof L.MarkerClusterGroup === 'function')\n";
     $js .= "    " . $divname . ".addLayer(markers);\n";
-    if (isset($local_conf['auto_center']) and $local_conf['auto_center'] === 0 ) {
+    if ( $autocenter ) {
         $js .= "var group = new L.featureGroup(MarkerClusterList);";
         $js .= "this." . $divname . ".whenReady(function () {
         window.setTimeout(function () {

menu.inc.php

@@ -65,7 +65,7 @@ function osm_apply_menu($menu_ref_arr)
                 $local_conf['center_lat'] = 0;
                 $local_conf['center_lng'] = 0;
                 $local_conf['zoom'] = 2;
-                $local_conf['auto_center'] = 0;
+                $local_conf['autocenter'] = 1;
                 $local_conf['divname'] = 'mapmenu';
                 $local_conf['paths'] = osm_get_gps($page);
                 $height = isset($conf['osm_conf']['main_menu']['height']) ? $conf['osm_conf']['main_menu']['height'] : '200';