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

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

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