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

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

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