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

Last change on this file since 15345 was 15345, checked in by grum, 12 years ago

feature:2638 - Compatibility with Piwigo 2.4
  • Property svn:executable set to *
File size: 12.9 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        marker.info.imgTn[index]=replaceRoot(marker.info.imgTn[index]);
240      }
241    }
242  };
243
244  var replaceRoot=function(value)
245  {
246    var returned=value;
247    switch(value.charAt(0))
248    {
249      case 'G':
250        returned='./_data/i/galleries/'+value.substr(1);
251        break;
252      case 'I':
253        returned='./i.php?/galleries/'+value.substr(1);
254        break;
255      case 'P':
256        returned='./picture.php?/'+value.substr(1);
257        break;
258    }
259    return(returned);
260  }
261
262  var compareMarkers=function(m1,m2)
263  {
264    if(m1.uId<m2.uId)
265    {
266      return(-1);
267    }
268    else if(m1.uId<m2.uId)
269    {
270      return(1);
271    }
272    return(0);
273  };
274
275  this.markerInList=function(uniqueId, markerList)
276  {
277    for(var i=0;i<markerList.length;i++)
278    {
279      if(markerList[i].uId==uniqueId) return(i)
280    }
281    return(-1);
282  };
283
284  /**
285   * display the infowindow
286   *
287   * @param Marker marker : the marker
288   */
289  this.displayWindowInfo=function(marker)
290  {
291    if(gmapsCM && gmapsCM instanceof categoryMaps) gmapsCM.closePictureInfo();
292
293    gmapsMarkup.currentInfo=marker.info;
294    gmapsMarkup.infoWindow.close();
295    gmapsMarkup.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
296    gmapsMarkup.infoWindow.open(marker.map, marker);
297    $('#ciWALeft, #ciWARight').unbind('click');
298    $('#ciWARight').bind('click', function(event) { __this.displayPictureNext(); } );
299    $('#ciWALeft').bind('click', function(event) { __this.displayPicturePrev(); } );
300    this.displayPictureInfo(gmapsMarkup.currentInfo.displayed);
301  };
302  var renameId=function(i, e)
303  {
304    if(e.id!='') e.id='c'+e.id;
305    $(e).children().each(renameId);
306  };
307
308
309  this.closePictureInfo = function ()
310  {
311    gmapsMarkup.currentInfo=null;
312    gmapsMarkup.infoWindow.setContent('');
313    gmapsMarkup.infoWindow.close();
314    $('#ciWALeft, #ciWARight').unbind('click');
315  }
316
317  /**
318   *
319   */
320  this.displayPictureInfo=function(index)
321  {
322    var __this=this;
323
324    $('#ciWALeft,#ciWARight').unbind('click');
325    $('#ciWARight').bind('click',
326      function(event)
327      {
328        __this.displayPictureNext();
329      }
330    );
331    $('#ciWALeft').bind('click',
332      function(event)
333      {
334        __this.displayPicturePrev();
335      }
336    );
337
338    gmapsMarkup.currentInfo.displayed=index;
339    if(gmapsMarkup.currentInfo.imgName[index]=='')
340    {
341      $('#ciGMIWC_title').html('&nbsp;');
342    }
343    else
344    {
345      $('#ciGMIWC_title').html(gmapsMarkup.currentInfo.imgName[index]);
346    }
347    $('#ciGMIWC_img').attr('src', gmapsMarkup.currentInfo.imgTn[index]);
348
349    $('#ciGMIWC_img').unbind();
350    if(gmapsMarkup.currentInfo.imgCatsUrl[index].length==1)
351    {
352      $('#ciGMIWC_img').bind('click',
353        function ()
354        {
355          window.location=replaceRoot(gmapsMarkup.currentInfo.imgCatsUrl[gmapsMarkup.currentInfo.displayed][0]);
356        }
357      );
358    }
359    else
360    {
361      $('#ciGMIWC_showcatList').html('');
362      for(var i=0;i<gmapsMarkup.currentInfo.imgCatsUrl[index].length;i++)
363      {
364        $('#ciGMIWC_showcatList')
365          .append('<li><a href="'+replaceRoot(gmapsMarkup.currentInfo.imgCatsUrl[index][i])+'">'+gmapsMarkup.currentInfo.imgCatsNames[index][i]+'</a></li>');
366      }
367      $('#ciGMIWC_img, #ciGMIWC_showcat')
368        .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
369        .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
370    }
371
372    if(gmapsMarkup.currentInfo.nbImg>1)
373    {
374      $('#ciGMIWC_picnum').html((index+1)+'/'+gmapsMarkup.currentInfo.nbImgTxt);
375      $('#ciWALeft, #ciWARight').css('display', 'inline-block');
376    }
377    else
378    {
379      $('#ciGMIWC_picnum').html(gmapsMarkup.currentInfo.nbImgTxt);
380      $('#ciWALeft, #ciWARight').css('display', 'none');
381    }
382  };
383
384  /**
385   *
386   */
387  this.displayPicturePrev=function()
388  {
389    gmapsMarkup.currentInfo.displayed--;
390    if(gmapsMarkup.currentInfo.displayed<0) gmapsMarkup.currentInfo.displayed=gmapsMarkup.currentInfo.nbImg-1;
391    this.displayPictureInfo(gmapsMarkup.currentInfo.displayed);
392  };
393
394  /**
395   *
396   */
397  this.displayPictureNext=function()
398  {
399    gmapsMarkup.currentInfo.displayed++;
400    if(gmapsMarkup.currentInfo.displayed>=gmapsMarkup.currentInfo.nbImg) gmapsMarkup.currentInfo.displayed=0;
401    this.displayPictureInfo(gmapsMarkup.currentInfo.displayed);
402  };
403
404
405  /**
406   * check if zoomLevel
407   */
408  this.fitToBounds=function(bounds, mapIndex)
409  {
410    gmapsMarkup.maps[mapIndex].gMap.fitBounds(bounds);
411
412    if(gmapsMarkup.maps[mapIndex].zoomLevelMaxActivated &&
413       gmapsMarkup.maps[mapIndex].gMap.getZoom() > gmapsMarkup.maps[mapIndex].zoomLevel)
414    {
415      gmapsMarkup.maps[mapIndex].gMap.setZoom(gmapsMarkup.maps[mapIndex].zoomLevel);
416    }
417  };
418
419  this.initializeMapViewport=function(mapIndex)
420  {
421    var __this=this;
422
423    if(mapIndex>-1 && !gmapsMarkup.maps[mapIndex].gMap.initialized)
424    {
425      // reduce copyright size... ^_^
426      $('#'+gmapsMarkup.maps[mapIndex].id+' span, #'+gmapsMarkup.maps[mapIndex].id+' a').css('font-size', '55.0%');
427
428      if(gmapsMarkup.maps[mapIndex].markerVisible)
429      {
430        google.maps.event.addListener(
431          gmapsMarkup.maps[mapIndex].gMap,
432          'dragend',
433          function()
434          {
435            __this.loadMarkers(this);
436          }
437        );
438
439        google.maps.event.addListener(
440          gmapsMarkup.maps[mapIndex].gMap,
441          'zoom_changed',
442          function()
443          {
444            __this.loadMarkers(this);
445            gmapsMarkup.infoWindow.close();
446          }
447        );
448      }
449
450
451      if(gmapsMarkup.maps[mapIndex].kmlZoom && gmapsMarkup.maps[mapIndex].gMap.kmlFile!=null)
452      {
453        google.maps.event.addListenerOnce(
454          gmapsMarkup.maps[mapIndex].gMap.kmlFile,
455          'defaultviewport_changed',
456          function()
457          {
458            __this.fitToBounds(gmapsMarkup.maps[mapIndex].gMap.kmlFile.getDefaultViewport(), mapIndex);
459          }
460        );
461
462      }
463
464      gmapsMarkup.maps[mapIndex].gMap.initialized=true;
465    }
466  };
467
468}
469
470
471$(window).load(
472  function ()
473  {
474    initInfoWindow();
475
476    gmapsMM=new markupMaps();
477
478    // all maps have the same initials bounds
479    gmapsMarkup.currentInfo=null;
480
481    gmapsMarkup.infoWindow = new google.maps.InfoWindow();
482    google.maps.event.addListener(
483     gmapsMarkup.infoWindow,
484     'closeclick',
485     function () {
486       gmapsMarkup.infoWindow.setContent('');
487       $('#ciGMIWC_img').unbind();
488     }
489    );
490
491    /*
492     * initialize map on the server side (call the 'public.maps.init'
493     * function)
494     */
495    $.ajax(
496      {
497        type: "POST",
498        url: "plugins/GMaps/gmaps_ajax.php",
499        async: true,
500        data: { ajaxfct:"public.maps.init", category:gmapsMarkup.categoryId, mapId:'y' },
501        success:
502          function(msg)
503          {
504            gmapsMarkup.requestId=msg;
505
506            for(var i=0;i<gmapsMarkup.maps.length;i++)
507            {
508              // prepare google map maps
509              $('#'+gmapsMarkup.maps[i].id).css(
510                {
511                  width: gmapsMarkup.maps[i].width+'px',
512                  height:gmapsMarkup.maps[i].height+'px'
513                }
514              );
515
516              gmapsMM.createMap(gmapsMarkup.maps[i], i);
517            }
518          }
519      }
520    );
521  }
522);
523
524
Note: See TracBrowser for help on using the repository browser.