Changeset 12706 for extensions/rv_gmaps

Timestamp:

Dec 8, 2011, 10:36:35 PM (13 years ago)

Author:

rvelices

Message:

rv_gmaps use places autocomplete + added new markers + better algo for displaying markers

Location:

extensions/rv_gmaps/trunk

Files:

• admin/admin_config.php (modified) (3 diffs)
• changelog.txt (modified) (1 diff)
• icons/lib/22earth_a.png (deleted)
• icons/lib/22earth_b.png (deleted)
• icons/lib/24earth_a.png (deleted)
• language/ar_SA/lang.php (modified) (1 diff)
• language/cs_CZ/lang.php (modified) (1 diff)
• language/de_DE/lang.php (modified) (1 diff)
• language/en_UK/lang.php (modified) (1 diff)
• language/es_ES/lang.php (modified) (1 diff)
• language/fr_FR/lang.php (modified) (1 diff)
• language/hu_HU/lang.php (modified) (1 diff)
• language/it_IT/lang.php (modified) (1 diff)
• language/lv_LV/lang.php (modified) (1 diff)
• language/nl_NL/lang.php (modified) (1 diff)
• language/no_NO/lang.php (modified) (1 diff)
• language/pl_PL/lang.php (modified) (1 diff)
• language/ru_RU/lang.php (modified) (1 diff)
• language/sk_SK/lang.php (modified) (1 diff)
• main.inc.php (modified) (2 diffs)
• map_data.php (modified) (2 diffs)
• template/data_handler.js (modified) (6 diffs)
• template/data_loader.js (modified) (3 diffs)
• template/map.tpl (modified) (4 diffs)
• template/markers/medium_gradient_blue.png (added)
• template/markers/medium_gradient_blue.tpl (added)
• template/markers/medium_gradient_purple.png (added)
• template/markers/medium_gradient_purple.tpl (added)
• template/markers/medium_gradient_red.png (added)
• template/markers/medium_gradient_red.tpl (added)
• template/markers/medium_standard_red.png (added)
• template/markers/medium_standard_red.tpl (added)
• template/picture_map_content.tpl (modified) (1 diff)
• template/style.css (modified) (1 diff)

extensions/rv_gmaps/trunk/admin/admin_config.php

@@ -63 +63 @@
   );
 
+$files = array();
 $path=PHPWG_PLUGINS_PATH.$rvm_dir.'/template/markers/';
 $dir_contents = opendir($path);
@@ -69 +70 @@
   if (!is_file($path.'/'.$filename) or get_extension($filename)!='tpl')
     continue;
-  $filename = get_filename_wo_extension( $filename );
-  $template->append('marker_icons',
+        $files[] = get_filename_wo_extension($filename);
+ }
+closedir($dir_contents);
+
+sort($files);
+foreach($files as $file)
+{
+        $template->append('marker_icons',
       array(
-        $filename => str_replace( '_', ' ', $filename),
+        $file => str_replace( '_', ' ', $file),
       ),
       true
@@ -79 +86 @@
 $template->assign('selected_marker_icon', rvm_get_config_var('marker_icon', '') );
 
-closedir($dir_contents);
+
 ?>

extensions/rv_gmaps/trunk/changelog.txt

@@ +1 @@
+2.3.b
+- search for places / location uses now google auto complete
+- fix some bad markers not showing (google removed some images from their servers)
+- added some new marker icons
+- full migration to maps api v3
+
 2.3.a
 - fix jquery version

extensions/rv_gmaps/trunk/language/ar_SA/lang.php

@@ -13 +13 @@
 $lang['Show all']='اظهار الكل';
 $lang['show all pictures around this location']='اظهر كل الصور المحيطة بهذه';
-$lang['Search a location...']='البحث عن منطقة...';
 
 $lang['Loading']='تحميل';

extensions/rv_gmaps/trunk/language/cs_CZ/lang.php

@@ -13 +13 @@
 $lang['Show all']='Zobrazit vše';
 $lang['show all photos around this location']='zobrazit fotografie v okolí';
-$lang['Search a location...']='Najít polohu...';
 
 $lang['Loading']='Nahrávání';

extensions/rv_gmaps/trunk/language/de_DE/lang.php

@@ -13 +13 @@
 $lang['Show all']='Zeigt Alle';
 $lang['show all photos around this location']='zeigt alle Bilder rund um dieser Position';
-$lang['Search a location...']='Suche eine Position...';
 
 $lang['Loading']='lädt';

extensions/rv_gmaps/trunk/language/en_UK/lang.php

@@ -13 +13 @@
 $lang['Show all']='Show all';
 $lang['show all photos around this location']='show all photos around this location';
-$lang['Search a location...']='Search a location...';
 
 $lang['Loading']='Loading';

extensions/rv_gmaps/trunk/language/es_ES/lang.php

@@ -13 +13 @@
 $lang['Show all']='Presenta todo';
 $lang['show all photos around this location']='Presenta todas las imágenes cerca de estas coordenadas';
-$lang['Search a location...']='Buscar un lugar...';
 
 $lang['Loading']='Carga';

extensions/rv_gmaps/trunk/language/fr_FR/lang.php

@@ -13 +13 @@
 $lang['Show all']='Présente tout';
 $lang['show all photos around this location']='Présente toutes les images à proximité de ces coordonnées';
-$lang['Search a location...']='Rechercher un lieu...';
 
 $lang['Loading']='Chargement';

extensions/rv_gmaps/trunk/language/hu_HU/lang.php

@@ -13 +13 @@
 $lang['Show all']='Összes megjelenítése';
 $lang['show all photos around this location']='Összes kép mellé ezeket a koordinátákat';
-$lang['Search a location...']='Hely keresése...';
 
 $lang['Loading']='Töltés';

extensions/rv_gmaps/trunk/language/it_IT/lang.php

@@ -13 +13 @@
 $lang['Show all']='Presenta tutto';
 $lang['show all photos around this location']='Presenta tutte le immagini in prossimità di queste coordinate';
-$lang['Search a location...']='Cecare un luogo...';
 
 $lang['Loading']='Caricamento';

extensions/rv_gmaps/trunk/language/lv_LV/lang.php

@@ -13 +13 @@
 $lang['Show all']='Rādīt visu';
 $lang['show all photos around this location']='rādīt visus attēlus ap šo (vietu) lokāciju';
-$lang['Search a location...']='Meklēt lokāciju...';
 
 $lang['Loading']='Lādēšana';

extensions/rv_gmaps/trunk/language/nl_NL/lang.php

@@ -13 +13 @@
 $lang['Show all']='Toon alles';
 $lang['show all photos around this location']='toon alle afbeeldingen in de buurt van deze locatie';
-$lang['Search a location...']='Zoek een locatie...';
 
 $lang['Loading']='Laden';

extensions/rv_gmaps/trunk/language/no_NO/lang.php

@@ -13 +13 @@
 $lang['Show all']='Vis alle';
 $lang['show all photos around this location']='vis alle bilder rundt denne lokalisasjonen';
-$lang['Search a location...']='Søk på en lokalisasjon...';
 
 $lang['Loading']='Laster';

extensions/rv_gmaps/trunk/language/pl_PL/lang.php

@@ -14 +14 @@
 $lang['Show all']='Pokaż wszystko';
 $lang['show all photos around this location']='pokaż wszystkie obrazy w pobliżu tej lokalizacji';
-$lang['Search a location...']='Szukaj lokalizacji...';
 
 $lang['Loading']='Wczytywanie';

extensions/rv_gmaps/trunk/language/ru_RU/lang.php

@@ -13 +13 @@
 $lang['Show all']='Показать все';
 $lang['show all photos around this location']='Показать все фотографии вблизи от этой точки';
-$lang['Search a location...']='Поиск места...';
 
 $lang['Loading']='Загрузка';

extensions/rv_gmaps/trunk/language/sk_SK/lang.php

@@ -13 +13 @@
 $lang['Show all']='Zobraziť všetko';
 $lang['show all pictures around this location']='zobraziť fotografie v okolí';
-$lang['Search a location...']='Nájsť polohu...';
 
 $lang['Loading']='Nahrávanie';

extensions/rv_gmaps/trunk/main.inc.php

@@ -1 +1 @@
 <?php /*
 Plugin Name: RV Maps&Earth
-Version: 2.3.b-alpha
+Version: 2.3.b
 Description: Extend your gallery with Google Maps and Google Earth ...
 Plugin URI: http://piwigo.org/ext/extension_view.php?eid=122
@@ -7 +7 @@
 Author URI: http://www.modusoptimus.com/
 */
-define( 'RVM_PLUGIN_VERSION', '2.3.b-alpha');
+define( 'RVM_PLUGIN_VERSION', '2.3.b');
 defined('PHPWG_ROOT_PATH') or die('Hacking attempt!');
 

extensions/rv_gmaps/trunk/map_data.php

@@ -132 +132 @@
   rvo( ",\n" );
 
-  rvo( 'kml_url: "'.rvm_duplicate_kml_index_url(array('box'=>$c['bounds'], 'flat'=>1), array('start') ). '"' );
-  rvo( ",\n" );
-
   $max_per_cluster = rvm_get_config_var('nb_images_per_marker',20);
   if ( count($c['items']) >  $max_per_cluster )
@@ -160 +157 @@
     rvo( "{" );
     rvo( "tn: ".jsgm_str( get_thumbnail_url( $img ) ) );
-    rvo( "," );
-    rvo( "name: ".jsgm_str( trigger_event('render_element_description', $title) ) );
-    rvo( "," );
-    rvo( "comment: ".jsgm_str( trigger_event('render_element_description', $img['comment']) ) );
-    rvo( "," );
-    rvo( "page_url: ".jsgm_str( $page_url ) );
+    rvo( ",name: ".jsgm_str( trigger_event('render_element_description', $title) ) );
+    rvo( ",comment: ".jsgm_str( trigger_event('render_element_description', $img['comment']) ) );
+    rvo( ",page_url: ".jsgm_str( $page_url ) );
     rvo( "}" );
   }

extensions/rv_gmaps/trunk/template/data_handler.js

@@ -12 +12 @@
 
         google.maps.event.bind( this._map, "click", this, this._onMapClick);
-        //google.maps.event.bind( this._infoWindow, "domready", this, this._onInfoWindowDomReady);
 }
 
@@ -23 +22 @@
 _navHtmlIds: ["gotoPrevImage", "gotoNextImage"],
 _navHtmlHandles: [],
-_recursionProtect: 0,
 _prevResult: { nb_items:0 },
 
@@ -70 +68 @@
         if (changed)
         {
-                var newMarkers = [];
+// BEGIN NEW ****************   
+                var markersToRemove=[], clustersToAdd=[], newMarkers=[];
+                data.image_clusters.sort( function(a,b) { return PwgDataHandler.cmpll( a.position, b.position); } );
+                for (i=0; i<data.image_clusters.length; i++)
+                {
+                        var cluster = data.image_clusters[i];
+                        while(this._markers.length)
+                        {
+                                var marker = this._markers[0];
+                                if (PwgDataHandler.cmpll(cluster.position, marker.getPosition()) == 0)
+                                {
+                                        marker.pwg = {
+                                                nb_items: cluster.nb_items,
+                                                images: cluster.items,
+                                                bounds: cluster.bounds,
+                                                blowup_url: cluster.blowup_url
+                                                };
+                                        newMarkers.push(marker);
+                                        this._markers.shift();
+                                        cluster = null;
+                                        break;
+                                }
+                                else if (PwgDataHandler.cmpll(cluster.position, marker.getPosition()) < 0)
+                                {
+                                        break;
+                                }
+                                else
+                                {
+                                        markersToRemove.push(marker);
+                                        this._markers.shift();
+                                }
+                        }
+
+                        if (cluster)
+                                clustersToAdd.push(cluster);
+                }
+
+                if (document.is_debug) glog('reused ' + newMarkers.length + ' exact markers');
+                markersToRemove = markersToRemove.concat( this._markers );
+
+                var infoWindowMarker = this._infoWindow.getAnchor();
+                for (i=0; i<clustersToAdd.length; i++)
+                {
+                        var cluster = clustersToAdd[i];
+                        var theTitle = "";
+                        if (cluster.nb_items>1)
+                                theTitle = Localization.fmt1("%d photos", cluster.nb_items);
+                        else
+                                theTitle = cluster.items[0].name;
+
+                        var marker = markersToRemove.pop();
+                        if (marker && marker==infoWindowMarker)
+                        {
+                                marker.setMap(null);
+                                google.maps.event.clearInstanceListeners(marker);
+                                if (document.is_debug) glog('removed marker with infoWindow');
+                                marker = this._markers.pop();
+                        }
+
+                        if (!marker)
+                        {
+                                marker = new google.maps.Marker(this.options.markerOptions);
+                                marker.setPosition(cluster.position);
+                                marker.setTitle(theTitle);
+                                google.maps.event.addListener( marker, "click", pwgBind(this, this._onMarkerClick, marker) );
+                                google.maps.event.addListener( marker, "dblclick", pwgBind(this, this._onMarkerDblClick, marker) );
+                                marker.setMap(this._map);
+                        }
+                        else
+                        {
+                                marker.currentImageIndex=0;
+                                marker.setPosition( cluster.position );
+                                marker.setTitle(theTitle);
+                        }
+
+                        newMarkers.push(marker);
+
+                        marker.pwg = {
+                                nb_items: cluster.nb_items,
+                                images: cluster.items,
+                                bounds: cluster.bounds,
+                                blowup_url: cluster.blowup_url
+                                };
+                }
+
+                for (i=0; i<markersToRemove.length; i++)
+                {
+                        markersToRemove[i].setMap(null);
+                        google.maps.event.clearInstanceListeners(markersToRemove[i]);
+                }
+
+                this._markers = newMarkers;
+                this._markers.sort( function(a,b) { return PwgDataHandler.cmpll( a.getPosition(), b.getPosition()); } );
+// END new
+                
+/*              var newMarkers = [];
                 var infoWindowMarker = this._infoWindow.getAnchor();
 
@@ -123 +216 @@
                         google.maps.event.clearInstanceListeners(this._markers[i]);
                 }
-
+*/
                 this._markers = newMarkers;
                 this._prevResult.nb_items=data.nb_items;
@@ -207 +300 @@
 _onInfoWindowDomReady: function()
 {
-        if (this._recursionProtect)
-                return;
         if (!this._infoWindow.getAnchor() || this._infoWindow.getAnchor().pwg.images.length<2)
                 return;
-        try {
-                this._recursionProtect = 1;
-                for (var i=0; i< this._navHtmlIds.length; i++)
-                {
-                        var elt = document.getElementById( this._navHtmlIds[i] );
-                        if (elt)
-                                this._navHtmlHandles.push( google.maps.event.addDomListener(elt, "click", pwgBind(this, this._onPictureNavigate, this._infoWindow.getAnchor(), i) ) );
-                }
-        }
-        finally {
-                this._recursionProtect = 0;
+        for (var i=0; i< this._navHtmlIds.length; i++)
+        {
+                var elt = document.getElementById( this._navHtmlIds[i] );
+                if (elt)
+                        this._navHtmlHandles.push( google.maps.event.addDomListener(elt, "click", pwgBind(this, this._onPictureNavigate, this._infoWindow.getAnchor(), i) ) );
         }
 },
@@ -267 +352 @@
 }
 
+PwgDataHandler.cmpll = function(a,b) {
+        var d= a.lng() - b.lng();
+        if (d < -.5e-6)
+                return -1;
+        else if (d > .5e-6)
+                return 1;
+        d= a.lat() - b.lat();
+        if (d < -.5e-6)
+                return -1;
+        else if (d > .5e-6)
+                return 1;
+        return 0;
+}
 
 String.prototype.urlNoHtm = function()

extensions/rv_gmaps/trunk/template/data_loader.js

@@ -77 +77 @@
         var bounds = new google.maps.LatLngBounds( this._map.getBounds().getSouthWest(), this._map.getBounds().getNorthEast() );
         
-        //bug as of v 3.7 - 
+        //BEGIN BUG in maps api as of v3.7 - when map wraps horizontally more than 360 deg - the getBounds is wrong
         var isOver = false;
         if (bounds.getSouthWest().lng() < bounds.getNorthEast().lng())
@@ -90 +90 @@
                 isOver = true;
         }
+        if (!isOver)
+        {//very emprical tests
+                if (this._map.getDiv().offsetWidth / this._map.getDiv().offsetHeight > 1.3
+                                && this._map.getZoom()<3
+                                && bounds.getSouthWest().lat() < -50
+                                && bounds.getNorthEast().lat() > 50)
+                {
+                        isOver = true;
+                }
+        }
         
         if (isOver)
                 bounds = new google.maps.LatLngBounds( new google.maps.LatLng(this._map.getBounds().getSouthWest().lat(),-179.9), new google.maps.LatLng(this._map.getBounds().getNorthEast().lat(), 179.9) );
-        //end bug
+        //END bug
         
         
@@ -117 +127 @@
         /*if ( !bounds.isFullLat() )*/
         {
-                nd = latRange*12/100;
-                sd = latRange*4/100;
+                nd = latRange*0.12;
+                sd = latRange*0.04;
         }
         /*if ( !bounds.isFullLng() )*/
         {
-                ed = lonRange*9/100;
-                wd = lonRange*7/100;
+                ed = lonRange*0.09;
+                wd = lonRange*0.07;
         }
         var digits = Math.max( getLatLonDigits(latRange,4,2), getLatLonDigits(lonRange,4,2) );

extensions/rv_gmaps/trunk/template/map.tpl

@@ -7 +7 @@
 <title>{$GALLERY_TITLE}</title>
 
-<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}" type="text/javascript"></script>
+<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}&amp;libraries=places" type="text/javascript"></script>
 
 {combine_script id='jquery' load='header' path='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'}
@@ -51 +51 @@
         if (console)
         {
-                console.log(msg + " b="+map.getBounds().toUrlValue() + " c="+map.getCenter().toUrlValue() + " z="+map.getZoom() );
+                var b = map.getBounds();
+                if (b)
+                        console.log(msg + " b="+b.toUrlValue() + " c="+map.getCenter().toUrlValue() + " z="+map.getZoom() );
+                else
+                        console.log(msg);
         }
 }
@@ -111 +115 @@
 
         map.pwgDataLoader.start( "{/literal}{$U_MAP_DATA}{literal}" );
+        
+        var ac = new google.maps.places.Autocomplete( document.getElementById('q') );
+        ac.bindTo('bounds', map);
+        google.maps.event.addListener(ac, 'place_changed', function() {
+                var place = ac.getPlace();
+                if (place.geometry.viewport) {
+                        map.fitBounds(place.geometry.viewport);
+                } else {
+                        map.setCenter(place.geometry.location);
+                        map.setZoom(17);  // Why 17? Because it looks good.
+                }
+        } );
 }
 
@@ -198 +214 @@
                 </a>
     <span class="gmnoprint">
-                        <form action="#" onsubmit="if (this.q.value!='' &amp;&amp; this.q.value!='{'Search a location...'|@translate|@escape:javascript}') searchLocation(this.q.value);return false;">
-                                <input type="text" size="32" name="q"
-                                        value="{'Search a location...'|@translate}"
-                                        onfocus="if (value=='{'Search a location...'|@translate|@escape:javascript}') value='';"
-                                        onblur="if (value=='') value='{'Search a location...'|@translate|@escape:javascript}'" />
-                                <input type="submit" value="{'Search'|@translate}"/>
-                        </form>
+                        <input type="text" size="48" id="q" />
                 </span>
   </div>

extensions/rv_gmaps/trunk/template/picture_map_content.tpl

@@ -1 +1 @@
 
 {html_head}
-<script src="http://maps.google.com/maps/api/js?sensor=false&amp;hl={$lang_info.code}" type="text/javascript"></script>
+<script src="http://maps.google<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}" type="text/javascript"></script>
 {combine_script id='jquery' load='header' path='themes/default/js/jquery.min.js'}
 {combine_script id='jquery.nyroModal' load='async' path="`$PLUGIN_LOCATION`/template/nyroModal/jquery.nyroModal-1.6.2.js" version='1.6.2'}

extensions/rv_gmaps/trunk/template/style.css

@@ -49 +49 @@
 }
 
-#titlebar FORM {
-  display:inline;
-  margin:0;
-}
-
-#titlebar FORM INPUT {
+#titlebar INPUT {
   border: 1px solid gray;
   font-size:80%;
-}
-
-#titlebar FORM INPUT {
   color: #404040;
   background-color: #dddddd;
 }
 
-#titlebar FORM INPUT:focus {
+
+#titlebar INPUT:focus {
   color: black;
   background-color: #ffffff;