source: extensions/GMaps/js/gmapsMarkup.js @ 12204

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

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