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

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

fix bug and implement new features
bug:1926, bug:1927, bug:1929, bug:1930, bug:1931, bug:1939, bug:1946
File size: 12.5 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: gmapsCategory.js
4 * file version: 1.1.0
5 * date: 2010-10-20
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  currentMapLoad=null;
201}
202
203function compareMarkers(m1,m2)
204{
205  if(m1.uId<m2.uId)
206  {
207    return(-1);
208  }
209  else if(m1.uId<m2.uId)
210  {
211    return(1);
212  }
213  return(0);
214}
215
216function markerInList(uniqueId, markerList)
217{
218  for(var i=0;i<markerList.length;i++)
219  {
220    if(markerList[i].uId==uniqueId) return(i)
221  }
222  return(-1);
223}
224
225/**
226 * display the infowindow
227 *
228 * @param Marker marker : the marker
229 */
230function displayWindowInfo(marker)
231{
232  gmaps.currentInfo=marker.info;
233  gmaps.infoWindow.close();
234  gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
235  gmaps.infoWindow.open(marker.map, marker);
236  displayPictureInfo(gmaps.currentInfo.displayed);
237}
238function renameId(i, e)
239{
240  if(e.id!='') e.id='c'+e.id;
241  $(e).children().each(renameId);
242}
243
244
245/**
246 *
247 */
248function displayPictureInfo(index)
249{
250  gmaps.currentInfo.displayed=index;
251  if(gmaps.currentInfo.imgName[index]=='')
252  {
253    $('#ciGMIWC_title').html('&nbsp;');
254  }
255  else
256  {
257    $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
258  }
259  $('#ciGMIWC_img').attr('src', './galleries/'+gmaps.currentInfo.imgTn[index]);
260
261  $('#ciGMIWC_img').unbind();
262  if(gmaps.currentInfo.imgCatsUrl[index].length==1)
263  {
264    $('#ciGMIWC_img').bind('click',
265      function ()
266      {
267        window.location=gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0];
268      }
269    );
270  }
271  else
272  {
273    $('#ciGMIWC_showcatList').html('');
274    for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
275    {
276      $('#ciGMIWC_showcatList')
277        .append('<li><a href="'+gmaps.currentInfo.imgCatsUrl[index][i]+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
278    }
279    $('#ciGMIWC_img, #ciGMIWC_showcat')
280      .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
281      .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
282  }
283
284  if(gmaps.currentInfo.nbImg>1)
285  {
286    $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
287    $('#ciWALeft, #ciWARight').css('display', 'inline-block');
288  }
289  else
290  {
291    $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
292    $('#ciWALeft, #ciWARight').css('display', 'none');
293  }
294}
295
296/**
297 *
298 */
299function displayPicturePrev()
300{
301  gmaps.currentInfo.displayed--;
302  if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImg-1;
303  displayPictureInfo(gmaps.currentInfo.displayed);
304}
305
306/**
307 *
308 */
309function displayPictureNext()
310{
311  gmaps.currentInfo.displayed++;
312  if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImg) gmaps.currentInfo.displayed=0;
313  displayPictureInfo(gmaps.currentInfo.displayed);
314}
315
316
317/**
318 * check if zoomLevel
319 */
320function fitToBounds(bounds)
321{
322  gmaps.maps[gmaps.currentMapLoadIndex].gMap.fitBounds(bounds);
323
324  if(gmaps.maps[gmaps.currentMapLoadIndex].zoomLevelMaxActivated &&
325     gmaps.maps[gmaps.currentMapLoadIndex].gMap.getZoom() > gmaps.maps[gmaps.currentMapLoadIndex].zoomLevel)
326  {
327    gmaps.maps[gmaps.currentMapLoadIndex].gMap.setZoom(gmaps.maps[gmaps.currentMapLoadIndex].zoomLevel);
328  }
329}
330
331function initializeMapViewport(mode)
332{
333  if(gmaps.currentMapLoadIndex>-1 &&
334     ($('#'+gmaps.maps[gmaps.currentMapLoadIndex].id+'Content').dialog('isOpen') && mode=='loaded' || mode=='open') &&
335     (gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized==false)
336    )
337  {
338    /*
339     * if the container is not visible when map are built, they are
340     * not initialized correctly
341     *
342     * when dialog is opened for the first time, proceed to map
343     * finalization :
344     *  - resize
345     *  - center the map
346     *  - add handlers on events 'dragend' and 'zoom_change'
347     *    allowing to reload markers according to the new viewport
348     */
349    google.maps.event.trigger(gmaps.maps[gmaps.currentMapLoadIndex].gMap, 'resize');
350
351
352    if(gmaps.maps[gmaps.currentMapLoadIndex].fitToBounds)
353    {
354      fitToBounds(gmaps.bounds)
355    }
356    else
357    {
358      gmaps.maps[gmaps.currentMapLoadIndex].gMap.setCenter(gmaps.bounds.getCenter());
359    }
360
361    // reduce copyright size... ^_^
362    $('#'+gmaps.maps[gmaps.currentMapLoadIndex].id+' span, #'+gmaps.maps[gmaps.currentMapLoadIndex].id+' a').css('font-size', '55.0%');
363
364    if(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile!=null)
365      gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.setMap(gmaps.maps[gmaps.currentMapLoadIndex].gMap);
366
367    google.maps.event.addListener(
368      gmaps.maps[gmaps.currentMapLoadIndex].gMap,
369      'dragend',
370      function()
371      {
372        loadMarkers(this);
373        $('#gmapsBoundMap').css('display', 'inline');
374        $('#gmapsBoundKml').css('display', 'inline');
375      }
376    );
377
378    google.maps.event.addListener(
379      gmaps.maps[gmaps.currentMapLoadIndex].gMap,
380      'zoom_changed',
381      function()
382      {
383        loadMarkers(this);
384        gmaps.infoWindow.close();
385        $('#gmapsBoundMap').css('display', 'inline');
386        $('#gmapsBoundKml').css('display', 'inline');
387      }
388    );
389
390    gmaps.maps[gmaps.currentMapLoadIndex].viewportInitialized=true;
391  }
392
393  if(gmaps.currentMapLoadIndex>-1) loadMarkers(gmaps.maps[gmaps.currentMapLoadIndex].gMap);
394}
395
396$(window).load(function ()
397  {
398    // all maps have the same initials bounds
399    gmaps.currentInfo=null;
400    gmaps.currentMapLoadIndex=-1;
401
402    gmaps.bounds = new google.maps.LatLngBounds(
403      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
404      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
405    );
406
407    gmaps.infoWindow = new google.maps.InfoWindow();
408    google.maps.event.addListener(
409     gmaps.infoWindow,
410     'closeclick',
411     function () {
412       $('body').append($('#iGMapsInfoWindowContent'));
413       gmaps.infoWindow.setContent('');
414       $('#ciGMIWC_img').unbind();
415     }
416    );
417
418
419    for(var i=0;i<gmaps.maps.length;i++)
420    {
421      // prepare google map maps
422      createMap(gmaps.maps[i], i);
423
424      // if size map depends from windows size, apply new dimensions to map
425      if(gmaps.maps[i].sizeMode=='A')
426      {
427        $('#'+gmaps.maps[i].id).css(
428          {
429            width: ($(window).width()*gmaps.popupAutomaticSize)+'px',
430            height:($(window).height()*gmaps.popupAutomaticSize)+'px'
431          }
432        );
433      }
434
435      /*
436       * initialize map on the server side (call the 'public.maps.init'
437       * function
438       */
439      $.ajax(
440        {
441          type: "POST",
442          url: "plugins/GMaps/gmaps_ajax.php",
443          async: true,
444          data: { ajaxfct:"public.maps.init", category:gmaps.categoryId },
445          success:
446            function(msg)
447            {
448              gmaps.requestId=msg;
449              initializeMapViewport('loaded');
450            }
451        }
452      );
453
454
455      // initialize dialog box for maps
456      $('#'+gmaps.maps[i].id+'Content').dialog(
457        {
458          autoOpen:false,
459          width:'auto',
460          height:'auto',
461          modal: true,
462          closeText:'X',
463          dialogClass: 'gmapsPopup',
464          title: gmaps.maps[i].title,
465          open: function ()
466            {
467              gmaps.currentMapLoadIndex=$(this).data('index');
468              initializeMapViewport('open');
469            }
470        }
471      ).data('index', i);
472
473      $('div.gmapsPopup div.ui-dialog-titlebar')
474      .append('<a href="#" id="gmapsBoundMap" style="display:none;" onclick="fitToBounds(gmaps.bounds); $(this).css(\'display\', \'none\').blur(); return(false);">'+
475              '<span>&there4;</span></a>');
476      $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap);
477
478      if(gmaps.maps[i].gMap.kmlFile!=null)
479      {
480        $('div.gmapsPopup div.ui-dialog-titlebar')
481          .append('<a href="#" id="gmapsBoundKml" onclick="fitToBounds(gmaps.maps[gmaps.currentMapLoadIndex].gMap.kmlFile.getDefaultViewport()); $(this).css(\'display\', \'none\').blur(); return(false);">'+
482                  '<span>&sim;</span></a>');
483        $('#gmapsBoundKml').attr('title', gmaps.lang.boundkml);
484      }
485
486      $('div.gmapsPopup div.ui-dialog-titlebar')
487      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');
488
489      $('#ui-dialog-title-iGMapsIconContent')
490      .append('<span id="gmapsNbPhotos"></span>');
491
492
493    }
494
495  }
496);
497
498
Note: See TracBrowser for help on using the repository browser.