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

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

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