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

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

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