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

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

add marker style management + minor bugs fixed

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