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

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

implement feature:1950

File size: 13.0 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    kmlFile.setMap(map);
54  }
55  else
56  {
57    kmlFile=null;
58  }
59
60  re=/^mS(\d\d)_.*/i;
61  iM=re.exec(properties.markerImg);
62  if(iM!=null) iM=new Number(iM[1]);
63
64  if(iM!=null)
65  {
66    map.markerImg = new google.maps.MarkerImage('plugins/GMaps/img/'+properties.markerImg,
67        new google.maps.Size(markerImgProp[iM].w, markerImgProp[iM].h),
68        new google.maps.Point(0,0),
69        new google.maps.Point(markerImgProp[iM].x, markerImgProp[iM].y));
70  }
71  else
72  {
73    map.markerImg = null;
74  }
75
76  map.kmlFile=kmlFile;
77  map.markers=new Array();
78  map.gmapsIndex=gmapsIndex;
79  properties.gMap=map;
80  properties.viewportInitialized=false;
81}
82
83/**
84 * load markers from the server
85 *
86 * @param Map map : the map
87 */
88function loadMarkers(map)
89{
90  gmaps.callId++;
91
92  datas={
93    requestId:gmaps.requestId,
94    callId:gmaps.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  };
105
106  currentMapLoad=map;
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.callId==tmp.callId)
122          {
123            tmp.markers.sort(compareMarkers);
124            applyMarkers(currentMapLoad, 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  if(currentMapLoad==null) return(false);
144
145  /*
146   * deleting markers from the map only if they are not in the new list
147   */
148  if(map.markers.length>0)
149  {
150    var i=0;
151    while(i<map.markers.length)
152    {
153      newListIndex=markerInList(map.markers[i].uId, markers);
154      if(newListIndex==-1)
155      {
156        map.markers[i].marker.setMap(null);
157        map.markers.splice(i, 1);
158      }
159      else
160      {
161        markers.splice(newListIndex,1);
162        i++;
163      }
164    }
165  }
166
167  /*
168   * add new markers on the map
169   */
170  for(var i=0;i<markers.length;i++)
171  {
172    var marker = new google.maps.Marker(
173      {
174        position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
175        map: currentMapLoad,
176        title:markers[i].nbImgTxt
177      }
178    );
179
180    if(map.markerImg!=null) marker.setIcon(map.markerImg);
181
182    marker.info=markers[i];
183    marker.info.displayed=0;
184
185    map.markers.push(
186      {
187        marker:marker,
188        uId:markers[i].uId
189      }
190    );
191
192    google.maps.event.addListener(
193      marker,
194      'click',
195      function ()
196      {
197        displayWindowInfo(this);
198      }
199    );
200
201    for(var index=0;index<marker.info.imgTn.length;index++)
202    {
203      switch(marker.info.imgTn[index].charAt(0))
204      {
205        case 'G':
206          marker.info.imgTn[index]='./galleries/'+marker.info.imgTn[index].substr(1);
207          break;
208        case 'U':
209          marker.info.imgTn[index]='./upload/'+marker.info.imgTn[index].substr(1);
210          break;
211      }
212    }
213  }
214  currentMapLoad=null;
215}
216
217function compareMarkers(m1,m2)
218{
219  if(m1.uId<m2.uId)
220  {
221    return(-1);
222  }
223  else if(m1.uId<m2.uId)
224  {
225    return(1);
226  }
227  return(0);
228}
229
230function markerInList(uniqueId, markerList)
231{
232  for(var i=0;i<markerList.length;i++)
233  {
234    if(markerList[i].uId==uniqueId) return(i)
235  }
236  return(-1);
237}
238
239/**
240 * display the infowindow
241 *
242 * @param Marker marker : the marker
243 */
244function displayWindowInfo(marker)
245{
246  gmaps.currentInfo=marker.info;
247  gmaps.infoWindow.close();
248  gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
249  gmaps.infoWindow.open(marker.map, marker);
250  displayPictureInfo(gmaps.currentInfo.displayed);
251}
252function renameId(i, e)
253{
254  if(e.id!='') e.id='c'+e.id;
255  $(e).children().each(renameId);
256}
257
258
259/**
260 *
261 */
262function displayPictureInfo(index)
263{
264  gmaps.currentInfo.displayed=index;
265  if(gmaps.currentInfo.imgName[index]=='')
266  {
267    $('#ciGMIWC_title').html('&nbsp;');
268  }
269  else
270  {
271    $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
272  }
273  $('#ciGMIWC_img').attr('src', gmaps.currentInfo.imgTn[index]);
274
275  $('#ciGMIWC_img').unbind();
276  if(gmaps.currentInfo.imgCatsUrl[index].length==1)
277  {
278    $('#ciGMIWC_img').bind('click',
279      function ()
280      {
281        window.location=gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0];
282      }
283    );
284  }
285  else
286  {
287    $('#ciGMIWC_showcatList').html('');
288    for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
289    {
290      $('#ciGMIWC_showcatList')
291        .append('<li><a href="'+gmaps.currentInfo.imgCatsUrl[index][i]+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
292    }
293    $('#ciGMIWC_img, #ciGMIWC_showcat')
294      .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
295      .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
296  }
297
298  if(gmaps.currentInfo.nbImg>1)
299  {
300    $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
301    $('#ciWALeft, #ciWARight').css('display', 'inline-block');
302  }
303  else
304  {
305    $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
306    $('#ciWALeft, #ciWARight').css('display', 'none');
307  }
308}
309
310/**
311 *
312 */
313function displayPicturePrev()
314{
315  gmaps.currentInfo.displayed--;
316  if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImg-1;
317  displayPictureInfo(gmaps.currentInfo.displayed);
318}
319
320/**
321 *
322 */
323function displayPictureNext()
324{
325  gmaps.currentInfo.displayed++;
326  if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImg) gmaps.currentInfo.displayed=0;
327  displayPictureInfo(gmaps.currentInfo.displayed);
328}
329
330
331/**
332 * check if zoomLevel
333 */
334function fitToBounds(bounds)
335{
336  gmaps.maps[gmaps.currentMapLoadIndex].gMap.fitBounds(bounds);
337
338  if(gmaps.maps[gmaps.currentMapLoadIndex].zoomLevelMaxActivated &&
339     gmaps.maps[gmaps.currentMapLoadIndex].gMap.getZoom() > gmaps.maps[gmaps.currentMapLoadIndex].zoomLevel)
340  {
341    gmaps.maps[gmaps.currentMapLoadIndex].gMap.setZoom(gmaps.maps[gmaps.currentMapLoadIndex].zoomLevel);
342  }
343}
344
345function initializeMapViewport(mode)
346{
347  if(gmaps.currentMapLoadIndex>-1 &&
348     ($('#'+gmaps.maps[gmaps.currentMapLoadIndex].id+'Content').dialog('isOpen') && mode=='loaded' || mode=='open') &&
349     (gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized==false)
350    )
351  {
352    /*
353     * if the container is not visible when map are built, they are
354     * not initialized correctly
355     *
356     * when dialog is opened for the first time, proceed to map
357     * finalization :
358     *  - resize
359     *  - center the map
360     *  - add handlers on events 'dragend' and 'zoom_change'
361     *    allowing to reload markers according to the new viewport
362     */
363    google.maps.event.trigger(gmaps.maps[gmaps.currentMapLoadIndex].gMap, 'resize');
364
365    // reduce copyright size... ^_^
366    $('#'+gmaps.maps[gmaps.currentMapLoadIndex].id+' span, #'+gmaps.maps[gmaps.currentMapLoadIndex].id+' a').css('font-size', '55.0%');
367
368
369    if(gmaps.geolocated)
370    {
371      if(gmaps.maps[gmaps.currentMapLoadIndex].fitToBounds)
372      {
373        fitToBounds(gmaps.bounds);
374      }
375      else
376      {
377        gmaps.maps[gmaps.currentMapLoadIndex].gMap.setCenter(gmaps.bounds.getCenter());
378      }
379    }
380    else
381    {
382      fitToBounds(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.getDefaultViewport());
383    }
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    gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized=true;
409  }
410
411  if(gmaps.currentMapLoadIndex>-1) loadMarkers(gmaps.maps[gmaps.currentMapLoadIndex].gMap);
412}
413
414
415$(window).load(function ()
416  {
417    // all maps have the same initials bounds
418    gmaps.currentInfo=null;
419    gmaps.currentMapLoadIndex=-1;
420
421    gmaps.bounds = new google.maps.LatLngBounds(
422      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
423      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
424    );
425
426    gmaps.infoWindow = new google.maps.InfoWindow();
427    google.maps.event.addListener(
428     gmaps.infoWindow,
429     'closeclick',
430     function () {
431       $('body').append($('#iGMapsInfoWindowContent'));
432       gmaps.infoWindow.setContent('');
433       $('#ciGMIWC_img').unbind();
434     }
435    );
436
437
438    for(var i=0;i<gmaps.maps.length;i++)
439    {
440      // prepare google map maps
441      createMap(gmaps.maps[i], i);
442
443      // if size map depends from windows size, apply new dimensions to map
444      if(gmaps.maps[i].sizeMode=='A')
445      {
446        $('#'+gmaps.maps[i].id).css(
447          {
448            width: ($(window).width()*gmaps.popupAutomaticSize)+'px',
449            height:($(window).height()*gmaps.popupAutomaticSize)+'px'
450          }
451        );
452      }
453
454      /*
455       * initialize map on the server side (call the 'public.maps.init'
456       * function)
457       */
458      $.ajax(
459        {
460          type: "POST",
461          url: "plugins/GMaps/gmaps_ajax.php",
462          async: true,
463          data: { ajaxfct:"public.maps.init", category:gmaps.categoryId },
464          success:
465            function(msg)
466            {
467              gmaps.requestId=msg;
468              initializeMapViewport('loaded');
469            }
470        }
471      );
472
473
474      // initialize dialog box for maps
475      $('#'+gmaps.maps[i].id+'Content').dialog(
476        {
477          autoOpen:false,
478          width:'auto',
479          height:'auto',
480          modal: true,
481          closeText:'X',
482          dialogClass: 'gmapsPopup',
483          title: gmaps.maps[i].title,
484          open: function ()
485            {
486              gmaps.currentMapLoadIndex=$(this).data('index');
487              initializeMapViewport('open');
488            }
489        }
490      ).data('index', i);
491
492      if(gmaps.geolocated)
493      {
494        $('div.gmapsPopup div.ui-dialog-titlebar')
495        .append('<a href="#" id="gmapsBoundMap" style="display:none;" onclick="fitToBounds(gmaps.bounds); $(this).css(\'display\', \'none\').blur(); return(false);">'+
496                '<span>&there4;</span></a>');
497        $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap);
498      }
499
500      if(gmaps.maps[i].gMap.kmlFile!=null)
501      {
502        $('div.gmapsPopup div.ui-dialog-titlebar')
503          .append('<a href="#" id="gmapsBoundKml" onclick="fitToBounds(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.getDefaultViewport()); $(this).css(\'display\', \'none\').blur(); return(false);">'+
504                  '<span>&sim;</span></a>');
505        $('#gmapsBoundKml').attr('title', gmaps.lang.boundkml);
506      }
507
508      $('div.gmapsPopup div.ui-dialog-titlebar')
509      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');
510
511      $('#ui-dialog-title-iGMapsIconContent')
512      .append('<span id="gmapsNbPhotos"></span>');
513
514
515    }
516
517  }
518);
519
520
Note: See TracBrowser for help on using the repository browser.