Update the width of the map popups
authorSteve Sutton <steve@gaslightmedia.com>
Wed, 29 Aug 2018 14:59:01 +0000 (10:59 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Wed, 29 Aug 2018 14:59:01 +0000 (10:59 -0400)
Also change Web site to Website.

glm-member-db/views/front/members/list.html

index 0b75ade..d69b31c 100644 (file)
@@ -45,7 +45,7 @@ Search Terms:
     {$selected_region = $smarty.request.regionUserSearch[0]}
 {/if}
 
-            {if $settings.selected_map_interface == 1} 
+            {if $settings.selected_map_interface == 1}
                 <!--  Leaflet Map -->
                 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
                 <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
@@ -54,8 +54,8 @@ Search Terms:
                 <link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
                 <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
             {/if}
-            
-            {if $settings.selected_map_interface == 2}            
+
+            {if $settings.selected_map_interface == 2}
                 <!-- Google Map -->
                 <script src="//maps.googleapis.com/maps/api/js?&key={$settings.google_maps_api_key}"></script>
             {/if}
@@ -163,12 +163,12 @@ Search Terms:
         {apply_filters('glm-member-db-front-members-list-mapTop', '')}
         <div id="glm-locationMap-container">
 
-            {if $settings.selected_map_interface == 1} 
+            {if $settings.selected_map_interface == 1}
                 <!--  Leaflet Map -->
                 <div id="LeafletMapContainer" style="height: 400px; width: 100%; border: 1px black solid; z-index: +0;"></div>
             {/if}
-            
-            {if $settings.selected_map_interface == 2}            
+
+            {if $settings.selected_map_interface == 2}
                 <!-- Google Map -->
             <div id="glm-locationMap" class="glm-map">(map loads here)</div>
             {/if}
@@ -213,7 +213,7 @@ Search Terms:
                     <p>
                         {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {apply_filters('glm_associate_phone_filter', $m.phone)}<br>{/if}
                         {if $m.toll_free && $settings.list_map_show_tollfree}{apply_filters('glm_associate_phone_filter', $m.toll_free)}<br>{/if}
-                        {if $m.url && $settings.list_map_show_url}<b>Web site:</b> <a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>{$m.url}</a><br>{/if}
+                        {if $m.url && $settings.list_map_show_url}<b>Website:</b> <a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>{$m.url}</a><br>{/if}
                         {if $m.email && $settings.list_map_show_email}<b>E-Mail Address:</b> <a href="mailto:{$m.email}">{$m.email}</a><br>{/if}
                         {if $m.region && $settings.list_map_show_region}<b>Region:</b> {$m.region}{/if}
                     </p>
@@ -668,13 +668,13 @@ Search Terms:
             /*
              * Map operations
              */
-             
+
             var startLat = $('#glmLat').val();
             var startLon = $('#glmLng').val();
             var defZoom = Number({$settings.maps_default_zoom});
-            
-      {if $settings.selected_map_interface == 1}    
-                    
+
+      {if $settings.selected_map_interface == 1}
+
             /*
              *  Leaflet Map
              *  API reference: https://leafletjs.com/reference-1.3.2.html
@@ -688,14 +688,14 @@ Search Terms:
                 var leafletMaxZoom = 19;
                 var clusterRadiusMax = 40;
                 var geocoder;
-    
+
                 // Loading features
                 var loadingControl = L.Control.loading({
                     separate: true,
                     delayIndicator: 500
                 });
                 leafletMap.addControl(loadingControl);
-                
+
                 // Init Map
                 L.tileLayer(leafletTileServer, {
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
@@ -703,8 +703,8 @@ Search Terms:
                    maxZoom: leafletMaxZoom,
                    id: 'nothot'
                 }).addTo(leafletMap);
-    
-    
+
+
             {if $mapItems}
 
               {if $settings.use_cluster_markers}
@@ -716,41 +716,44 @@ Search Terms:
                     maxClusterRadius: clusterRadiusMax
                 });
               {/if}
-        
-                            
+
+
               {foreach $mapItems as $m}
                 {if $m.lat != 0 && $m.lon != 0}
-    
-                // Create marker for this member and and to Feature Group 
+
+                // Create marker for this member and and to Feature Group
                 var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title:  '{$m.member_name|escape:quotes}' })
-                    .bindPopup($('#map_info_' + {$m.id}).html())
+                    .bindPopup($('#map_info_' + {$m.id}).html(), {
+                        maxWidth: 600
+                    })
                     .addTo(markerGroup);
-    
+
             {/if}
-              {/foreach}          
-    
+              {/foreach}
+
                 leafletMap.addLayer(markerGroup);
-    
+
                 // Get outer bounds of all markers in the Feature Group
-                leafletMap.fitBounds(markerGroup.getBounds());               
-    
+                leafletMap.fitBounds(markerGroup.getBounds());
+
             {/if} // havemembers
-    
+
                 // When a marker is clicked, display the pop-up near the center of the map.
-    
+
                 leafletMap.on('popupopen', function(e) {
                     var px = leafletMap.project(e.popup._latlng);
+                    px.x -= 20;
                     px.y -= e.popup._container.clientHeight/2;
                     leafletMap.panTo(leafletMap.unproject(px),{ animate: true });
                 });
-    
+
 
             }
 
       {/if}
-            
-      {if $settings.selected_map_interface == 2}    
-    
+
+      {if $settings.selected_map_interface == 2}
+
                         /*
                          * Google Maps
                          *  API reference: https://developers.google.com/maps/documentation/javascript/reference
@@ -785,7 +788,7 @@ Search Terms:
                                     scrollTop: $("#glm-locationMap-container").offset().top-100
                                 }, 400);
                             }
-    
+
                         var geocoder = new google.maps.Geocoder();
                         var bounds = new google.maps.LatLngBounds();
                         var infowindow = new google.maps.InfoWindow();
@@ -874,7 +877,7 @@ Search Terms:
 
                 {/if} // havemembers
 
-      {/if}                
+      {/if}
 
             {/if}   // settings.list_show_map