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

Last change on this file since 7453 was 7453, checked in by grum, 13 years ago

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