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

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

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