source: extensions/GMaps/js/gmapsCategory.js @ 7128

Last change on this file since 7128 was 7128, checked in by grum, 14 years ago

Connect the plugin to the RBuilder component + fixe some small bugs
File size: 12.4 KB
Line 
1
2var currentMapLoad;
3
4/**
5 * create the map
6 *
7 * @param Object properties : map properties
8 * @param Integer gmapsIndex : index in the map list
9 */
10function createMap(properties, gmapsIndex)
11{
12  var map = new google.maps.Map($("#"+properties.id).get(0),
13    {
14      backgroundColor:'#ffffff',
15      mapTypeId: properties.mapType,
16      zoom: properties.zoomLevel,
17      center: gmaps.bounds.getCenter(),
18      navigationControl: (properties.navigationControl==-1)?false:true,
19      scrollwheel: (properties.navigationControl==-1)?false:true,
20      scaleControl: (properties.scaleControl=='n')?false:true,
21      mapTypeControl:(properties.mapTypeControl==-1)?false:true,
22      mapTypeControlOptions:
23        {
24          style:properties.mapTypeControl
25        },
26      markerTitle:'',
27    }
28  );
29
30  if(properties.kmlFileUrl!='')
31  {
32    kmlFile = new google.maps.KmlLayer(properties.kmlFileUrl,
33      {
34        preserveViewport:true
35      }
36    );
37  }
38  else
39  {
40    kmlFile=null;
41  }
42
43  map.kmlFile=kmlFile;
44  map.markers=new Array();
45  map.gmapsIndex=gmapsIndex;
46  properties.gMap=map;
47  properties.viewportInitialized=false;
48}
49
50/**
51 * load markers from the server
52 *
53 * @param Map map : the map
54 */
55function loadMarkers(map)
56{
57  datas={
58    requestId:gmaps.requestId,
59    bounds:{
60        north:map.getBounds().getNorthEast().lat(),
61        east:map.getBounds().getNorthEast().lng(),
62        south:map.getBounds().getSouthWest().lat(),
63        west:map.getBounds().getSouthWest().lng()
64      },
65    width:$(map.getDiv()).width(),
66    height:$(map.getDiv()).height(),
67    distanceTreshold:20
68  }
69
70  currentMapLoad=map;
71
72  $('#gmapsLoading').css('display', 'inline-block');
73  $('#gmapsNbPhotos').html('');
74  $('#iDialogGMapWaiting').css(
75    {
76      width:$('#iGMapsIcon').width()+'px',
77      height:$('#iGMapsIcon').height()+'px',
78      top:$('#iGMapsIcon').position().top+'px',
79      left:$('#iGMapsIcon').position().left+'px',
80      display:'block'
81    }
82  );
83
84  $.ajax(
85    {
86      type: "POST",
87      url: "plugins/GMaps/gmaps_ajax.php",
88      async: true,
89      data: { ajaxfct:"public.maps.getMarkers", datas:datas },
90      success:
91        function(msg)
92        {
93          tmp=$.parseJSON(msg);
94          tmp.markers.sort(compareMarkers);
95          applyMarkers(currentMapLoad, tmp.markers);
96          $('#gmapsLoading').css('display', 'none');
97          $('#gmapsNbPhotos').html('['+tmp.datas.nbPhotos+']');
98          $('#iDialogGMapWaiting').css('display', 'none');
99        }
100    }
101  );
102}
103
104/**
105 * apply markers to map
106 *
107 * @param Map map : the google map object
108 * @param Array markers : array of markers properties
109 *                        each marker is an object with properties :
110 *                          latitude, longitude, nbImages
111 */
112function applyMarkers(map, markers)
113{
114  if(currentMapLoad==null) return(false);
115
116  /*
117   * deleting markers from the map only if they are not in the new list
118   */
119  if(map.markers.length>0)
120  {
121    var i=0;
122    while(i<map.markers.length)
123    {
124      newListIndex=markerInList(map.markers[i].uniqueId, markers);
125      if(newListIndex==-1)
126      {
127        map.markers[i].marker.setMap(null);
128        map.markers.splice(i, 1);
129      }
130      else
131      {
132        markers.splice(newListIndex,1);
133        i++;
134      }
135    }
136  }
137
138  /*
139   * add new markers on the map
140   */
141  for(var i=0;i<markers.length;i++)
142  {
143    var marker = new google.maps.Marker(
144      {
145        position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
146        map: currentMapLoad,
147        title:markers[i].nbImgTxt
148      }
149    );
150
151    marker.info=markers[i];
152    marker.info.displayed=0;
153
154    map.markers.push(
155      {
156        marker:marker,
157        uniqueId:markers[i].uniqueId
158      }
159    );
160
161    google.maps.event.addListener(
162      marker,
163      'click',
164      function ()
165      {
166        displayWindowInfo(this);
167      }
168    );
169  }
170  currentMapLoad=null;
171}
172
173function compareMarkers(m1,m2)
174{
175  if(m1.uniqueId<m2.uniqueId)
176  {
177    return(-1);
178  }
179  else if(m1.uniqueId<m2.uniqueId)
180  {
181    return(1);
182  }
183  return(0);
184}
185
186function markerInList(uniqueId, markerList)
187{
188  for(var i=0;i<markerList.length;i++)
189  {
190    if(markerList[i].uniqueId==uniqueId) return(i)
191  }
192  return(-1);
193}
194
195/**
196 * display the infowindow
197 *
198 * @param Marker marker : the marker
199 */
200function displayWindowInfo(marker)
201{
202  gmaps.currentInfo=marker.info;
203  gmaps.infoWindow.close();
204  gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
205  gmaps.infoWindow.open(marker.map, marker);
206  displayPictureInfo(gmaps.currentInfo.displayed);
207}
208function renameId(i, e)
209{
210  if(e.id!='') e.id='c'+e.id;
211  $(e).children().each(renameId);
212}
213
214
215/**
216 *
217 */
218function displayPictureInfo(index)
219{
220  gmaps.currentInfo.displayed=index;
221  if(gmaps.currentInfo.imgName[index]=='')
222  {
223    $('#ciGMIWC_title').html('&nbsp;');
224  }
225  else
226  {
227    $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
228  }
229  $('#ciGMIWC_img').attr('src', './galleries/'+gmaps.currentInfo.imgTn[index]);
230
231  $('#ciGMIWC_img').unbind();
232  if(gmaps.currentInfo.imgCatsUrl[index].length==1)
233  {
234    $('#ciGMIWC_img').bind('click',
235      function ()
236      {
237        window.location=gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0];
238      }
239    );
240  }
241  else
242  {
243    $('#ciGMIWC_showcatList').html('');
244    for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
245    {
246      $('#ciGMIWC_showcatList')
247        .append('<li><a href="'+gmaps.currentInfo.imgCatsUrl[index][i]+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
248    }
249    $('#ciGMIWC_img, #ciGMIWC_showcat')
250      .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
251      .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
252  }
253
254  if(gmaps.currentInfo.nbImages>1)
255  {
256    $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
257    $('#ciWALeft, #ciWARight').css('display', 'inline-block');
258  }
259  else
260  {
261    $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
262    $('#ciWALeft, #ciWARight').css('display', 'none');
263  }
264}
265
266/**
267 *
268 */
269function displayPicturePrev()
270{
271  gmaps.currentInfo.displayed--;
272  if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImages-1;
273  displayPictureInfo(gmaps.currentInfo.displayed);
274}
275
276/**
277 *
278 */
279function displayPictureNext()
280{
281  gmaps.currentInfo.displayed++;
282  if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImages) gmaps.currentInfo.displayed=0;
283  displayPictureInfo(gmaps.currentInfo.displayed);
284}
285
286
287$(window).load(function ()
288  {
289    // all maps have the same intials bounds
290    gmaps.currentInfo=null;
291
292    gmaps.bounds = new google.maps.LatLngBounds(
293      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
294      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
295    );
296
297    gmaps.infoWindow = new google.maps.InfoWindow();
298    google.maps.event.addListener(
299     gmaps.infoWindow,
300     'closeclick',
301     function () {
302       $('body').append($('#iGMapsInfoWindowContent'));
303       gmaps.infoWindow.setContent('');
304       $('#ciGMIWC_img').unbind();
305     }
306    );
307
308
309    for(var i=0;i<gmaps.maps.length;i++)
310    {
311      // prepare google map maps
312      createMap(gmaps.maps[i], i);
313
314      // if size map depends from windows size, apply new dimensions to map
315      if(gmaps.maps[i].sizeMode=='A')
316      {
317        $('#'+gmaps.maps[i].id).css(
318          {
319            width: ($(window).width()*0.8)+'px',
320            height:($(window).height()*0.8)+'px'
321          }
322        );
323      }
324
325      // initialize dialog box for maps
326      $('#'+gmaps.maps[i].id+'Content').dialog(
327        {
328          autoOpen:false,
329          width:'auto',
330          height:'auto',
331          modal: true,
332          closeText:'X',
333          dialogClass: 'gmapsPopup',
334          title: gmaps.maps[i].title,
335          open: function ()
336            {
337              gmaps.currentMapLoadIndex=$(this).data('index');
338
339              /*
340               * initialize map on the server side (call the 'public.maps.init'
341               * function
342               */
343              $.ajax(
344                {
345                  type: "POST",
346                  url: "plugins/GMaps/gmaps_ajax.php",
347                  async: true,
348                  data: { ajaxfct:"public.maps.init", category:gmaps.categoryId },
349                  success:
350                    function(msg)
351                    {
352                      gmaps.requestId=msg;
353
354                      if(gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized==false)
355                      {
356                        /*
357                         * if the container is not visible when map are built, they are
358                         * not initialized correctly
359                         *
360                         * when dialog is opened for the first time, proceed to map
361                         * finalization :
362                         *  - resize
363                         *  - center the map
364                         *  - add handlers on events 'dragend' and 'zoom_change'
365                         *    allowing to reload markers according to the new viewport
366                         */
367                        google.maps.event.trigger(gmaps.maps[gmaps.currentMapLoadIndex].gMap, 'resize');
368
369
370                        if(gmaps.maps[gmaps.currentMapLoadIndex].fitToBounds)
371                        {
372                          gmaps.maps[gmaps.currentMapLoadIndex].gMap.fitBounds(gmaps.bounds);
373                        }
374                        else
375                        {
376                          gmaps.maps[gmaps.currentMapLoadIndex].gMap.setCenter(gmaps.bounds.getCenter());
377                        }
378
379                        // reduce copyright size... ^_^
380                        $('#'+gmaps.maps[gmaps.currentMapLoadIndex].id+' span, #'+gmaps.maps[gmaps.currentMapLoadIndex].id+' a').css('font-size', '55.0%');
381
382                        if(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile!=null)
383                          gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.setMap(gmaps.maps[gmaps.currentMapLoadIndex].gMap);
384
385                        google.maps.event.addListener(
386                          gmaps.maps[gmaps.currentMapLoadIndex].gMap,
387                          'dragend',
388                          function()
389                          {
390                            loadMarkers(this);
391                            $('#gmapsBoundMap').css('display', 'inline');
392                            $('#gmapsBoundKml').css('display', 'inline');
393                          }
394                        );
395
396                        google.maps.event.addListener(
397                          gmaps.maps[gmaps.currentMapLoadIndex].gMap,
398                          'zoom_changed',
399                          function()
400                          {
401                            loadMarkers(this);
402                            gmaps.infoWindow.close();
403                            $('#gmapsBoundMap').css('display', 'inline');
404                            $('#gmapsBoundKml').css('display', 'inline');
405                          }
406                        );
407
408                        // loads the markers
409                        loadMarkers(gmaps.maps[gmaps.currentMapLoadIndex].gMap);
410                        gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized=true;
411                      }
412
413                    }
414                }
415              );
416            }
417        }
418      ).data('index', i);
419
420      $('div.gmapsPopup div.ui-dialog-titlebar')
421      .append('<a href="" id="gmapsBoundMap" style="display:none;" onclick="gmaps.maps[gmaps.currentMapLoadIndex].gMap.fitBounds(gmaps.bounds); $(this).css(\'display\', \'none\').blur(); return(false);">'+
422              '<span>&there4;</span></a>');
423      $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap);
424
425      if(gmaps.maps[i].gMap.kmlFile!=null)
426      {
427        $('div.gmapsPopup div.ui-dialog-titlebar')
428          .append('<a href="" id="gmapsBoundKml" onclick="gmaps.maps[gmaps.currentMapLoadIndex].gMap.fitBounds(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.getDefaultViewport()); $(this).css(\'display\', \'none\').blur(); return(false);">'+
429                  '<span>&sim;</span></a>');
430        $('#gmapsBoundKml').attr('title', gmaps.lang.boundkml);
431      }
432
433      $('div.gmapsPopup div.ui-dialog-titlebar')
434      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');
435
436      $('#ui-dialog-title-iGMapsIconContent')
437      .append('<span id="gmapsNbPhotos"></span>');
438
439
440    }
441
442  }
443);
444
445
Note: See TracBrowser for help on using the repository browser.