[15345] | 1 | {combine_script id="jquery.ui" require='jquery' path="themes/default/js/ui/jquery.ui.core.js"} |
---|
| 2 | {combine_script id="jquery.ui.widget" require='jquery.ui' path="themes/default/js/ui/jquery.ui.widget.js"} |
---|
| 3 | {combine_script id="jquery.ui.mouse" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.mouse.js"} |
---|
| 4 | {combine_script id="jquery.ui.position" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.position.js"} |
---|
| 5 | {combine_script id="jquery.ui.dialog" require='jquery.ui.widget' src="themes/default/js/ui/jquery.ui.dialog.js"} |
---|
| 6 | |
---|
[10551] | 7 | {combine_script id="maps.google.com/api" path="http://maps.google.com/maps/api/js?sensor=false"} |
---|
[7128] | 8 | |
---|
| 9 | |
---|
| 10 | {literal} |
---|
| 11 | <script type="text/javascript"> |
---|
| 12 | |
---|
| 13 | /** |
---|
| 14 | * include this template in a page and use dialogChooseGMapsBox.show({options}) to display |
---|
| 15 | * the dialog box |
---|
| 16 | * |
---|
| 17 | */ |
---|
| 18 | dialogChooseGMapsBox = function() |
---|
| 19 | { |
---|
| 20 | var bounds = { |
---|
[7308] | 21 | north:0, |
---|
| 22 | south:0, |
---|
| 23 | east:0, |
---|
| 24 | west:0 |
---|
| 25 | }, |
---|
| 26 | requestId = '', |
---|
| 27 | callId=0, |
---|
| 28 | dialogGMapsOptions = { |
---|
| 29 | id:'', |
---|
| 30 | eventOk:null, |
---|
| 31 | cBuilder:null, |
---|
| 32 | gMap:null, |
---|
| 33 | }; |
---|
[7128] | 34 | |
---|
| 35 | |
---|
| 36 | /** |
---|
| 37 | * initialize the dialog box |
---|
| 38 | */ |
---|
| 39 | var initDialogBox = function() |
---|
| 40 | { |
---|
| 41 | initializeMap(); |
---|
| 42 | |
---|
| 43 | $.ajax( |
---|
| 44 | { |
---|
| 45 | type: "POST", |
---|
| 46 | url: "plugins/GMaps/gmaps_ajax.php", |
---|
| 47 | async: true, |
---|
[16011] | 48 | data: { ajaxfct:"public.maps.init", token:'{/literal}{$token}{literal}', category:0 }, |
---|
[7128] | 49 | success: function (msg) |
---|
| 50 | { |
---|
| 51 | requestId=msg; |
---|
| 52 | } |
---|
| 53 | } |
---|
| 54 | ); |
---|
| 55 | |
---|
| 56 | $("#iDialogGMapsChoose") |
---|
| 57 | .dialog( |
---|
| 58 | { |
---|
| 59 | autoOpen: false, |
---|
| 60 | resizable: false, |
---|
| 61 | width:$(window).width()*0.8, |
---|
| 62 | height:$(window).height()*0.8, |
---|
| 63 | modal: true, |
---|
| 64 | draggable:true, |
---|
| 65 | dialogClass: 'gcBgTabSheet gcBorder', |
---|
| 66 | title: '{/literal}{"gmaps_choose_geographic_area"|@translate}{literal}', |
---|
| 67 | open: function(event, ui) |
---|
| 68 | { |
---|
| 69 | google.maps.event.trigger(dialogGMapsOptions.gMap, 'resize'); |
---|
| 70 | |
---|
| 71 | if(bounds.north!=0 && bounds.south!=0 && bounds.east!=0 && bounds.west!=0) |
---|
| 72 | { |
---|
| 73 | dialogGMapsOptions.gMap.fitBounds( |
---|
| 74 | new google.maps.LatLngBounds( |
---|
| 75 | new google.maps.LatLng(bounds.south, bounds.west), |
---|
| 76 | new google.maps.LatLng(bounds.north, bounds.east) |
---|
| 77 | ) |
---|
| 78 | ); |
---|
| 79 | } |
---|
| 80 | else |
---|
| 81 | { |
---|
| 82 | dialogGMapsOptions.gMap.setZoom(2); |
---|
| 83 | dialogGMapsOptions.gMap.setCenter(new google.maps.LatLng(0, 0)); |
---|
| 84 | updateBounds(); |
---|
| 85 | } |
---|
| 86 | |
---|
| 87 | loadMarkers(); |
---|
| 88 | }, |
---|
| 89 | buttons: |
---|
| 90 | { |
---|
| 91 | '{/literal}{"gmaps_ok"|@translate}{literal}': |
---|
| 92 | function() |
---|
| 93 | { |
---|
| 94 | updateBounds(); |
---|
| 95 | |
---|
| 96 | if(dialogGMapsOptions.cBuilder!=null) |
---|
| 97 | { |
---|
| 98 | setCBuilderItem(dialogGMapsOptions.id, bounds, requestId); |
---|
| 99 | } |
---|
| 100 | |
---|
| 101 | if(dialogGMapsOptions.eventOk!=null) |
---|
| 102 | { |
---|
| 103 | dialogGMapsOptions.eventOk(dialogGMapsOptions.id, bounds, requestId); |
---|
| 104 | } |
---|
| 105 | |
---|
| 106 | |
---|
| 107 | $(this).dialog('close'); |
---|
| 108 | }, |
---|
| 109 | '{/literal}{"gmaps_cancel"|@translate}{literal}': |
---|
| 110 | function() |
---|
| 111 | { |
---|
| 112 | $(this).dialog('close'); |
---|
| 113 | } |
---|
| 114 | } |
---|
| 115 | } |
---|
| 116 | ); |
---|
| 117 | |
---|
| 118 | } |
---|
| 119 | |
---|
| 120 | |
---|
| 121 | /** |
---|
| 122 | * initialize the map |
---|
| 123 | */ |
---|
| 124 | var initializeMap = function () |
---|
| 125 | { |
---|
| 126 | var latlng=new google.maps.LatLng(0, 0); |
---|
| 127 | |
---|
| 128 | var map = new google.maps.Map($("#iDialogGMapsMap").get(0), |
---|
| 129 | { |
---|
| 130 | mapTypeId:google.maps.MapTypeId.HYBRID, |
---|
| 131 | zoom:2, |
---|
| 132 | center:latlng, |
---|
| 133 | navigationControl: true, |
---|
| 134 | navigationControlOptions: |
---|
| 135 | { |
---|
| 136 | style:google.maps.NavigationControlStyle.ZOOM_PAN, |
---|
| 137 | }, |
---|
| 138 | scaleControl: true, |
---|
[7177] | 139 | streetViewControl: false, |
---|
[7128] | 140 | mapTypeControl:true, |
---|
| 141 | mapTypeControlOptions: |
---|
| 142 | { |
---|
| 143 | style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, |
---|
| 144 | }, |
---|
| 145 | markerTitle:'', |
---|
| 146 | } |
---|
| 147 | ); |
---|
| 148 | |
---|
| 149 | map.markers=new Array(); |
---|
| 150 | dialogGMapsOptions.gMap=map; |
---|
| 151 | |
---|
| 152 | google.maps.event.addListener( |
---|
| 153 | dialogGMapsOptions.gMap, |
---|
| 154 | 'dragend', |
---|
| 155 | function() |
---|
| 156 | { |
---|
| 157 | updateBounds(); |
---|
| 158 | loadMarkers(); |
---|
| 159 | } |
---|
| 160 | ); |
---|
| 161 | |
---|
| 162 | google.maps.event.addListener( |
---|
| 163 | dialogGMapsOptions.gMap, |
---|
| 164 | 'zoom_changed', |
---|
| 165 | function() |
---|
| 166 | { |
---|
| 167 | updateBounds(); |
---|
| 168 | loadMarkers(); |
---|
| 169 | } |
---|
| 170 | ); |
---|
| 171 | } |
---|
| 172 | |
---|
| 173 | |
---|
| 174 | /** |
---|
| 175 | * update the bounds properties from the map bounds |
---|
| 176 | */ |
---|
| 177 | var updateBounds = function () |
---|
| 178 | { |
---|
| 179 | var mapBounds=dialogGMapsOptions.gMap.getBounds(); |
---|
| 180 | bounds.north=mapBounds.getNorthEast().lat(); |
---|
| 181 | bounds.south=mapBounds.getSouthWest().lat(); |
---|
| 182 | bounds.east=mapBounds.getNorthEast().lng(); |
---|
| 183 | bounds.west=mapBounds.getSouthWest().lng(); |
---|
| 184 | } |
---|
| 185 | |
---|
| 186 | /** |
---|
| 187 | * set the request Id |
---|
| 188 | */ |
---|
| 189 | var setRequestId = function(msg) |
---|
| 190 | { |
---|
| 191 | dialogGMapsOptions.requestId=msg; |
---|
| 192 | requestId=msg; |
---|
| 193 | dialogGMapsOptions.requestId=msg; |
---|
| 194 | } |
---|
| 195 | |
---|
| 196 | |
---|
| 197 | /** |
---|
| 198 | * load markers from the server |
---|
| 199 | */ |
---|
[7308] | 200 | var loadMarkers = function () |
---|
[7128] | 201 | { |
---|
[7308] | 202 | callId++; |
---|
| 203 | |
---|
[7128] | 204 | datas={ |
---|
| 205 | requestId:requestId, |
---|
[7308] | 206 | callId:callId, |
---|
[7128] | 207 | bounds:{ |
---|
| 208 | north:bounds.north, |
---|
| 209 | east:bounds.east, |
---|
| 210 | south:bounds.south, |
---|
| 211 | west:bounds.west |
---|
| 212 | }, |
---|
| 213 | width:$(dialogGMapsOptions.gMap.getDiv()).width(), |
---|
| 214 | height:$(dialogGMapsOptions.gMap.getDiv()).height(), |
---|
| 215 | distanceTreshold:20, |
---|
| 216 | levelInfo:0 |
---|
| 217 | } |
---|
| 218 | |
---|
| 219 | $('#iDialogGMapNfo').html('<img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>{/literal}{"gmaps_loading"|@translate}{literal}</span>'); |
---|
| 220 | |
---|
| 221 | $.ajax( |
---|
| 222 | { |
---|
| 223 | type: "POST", |
---|
| 224 | url: "plugins/GMaps/gmaps_ajax.php", |
---|
| 225 | async: true, |
---|
[16011] | 226 | data: { ajaxfct:"public.maps.getMarkers", token:'{/literal}{$token}{literal}', datas:datas }, |
---|
[7128] | 227 | success: |
---|
| 228 | function(msg) |
---|
| 229 | { |
---|
| 230 | tmp=$.parseJSON(msg); |
---|
[7308] | 231 | if(tmp.callId==callId) |
---|
| 232 | { |
---|
| 233 | tmp.markers.sort(compareMarkers); |
---|
| 234 | applyMarkers(tmp.markers); |
---|
| 235 | $('#iDialogGMapNfo').html(tmp.datas.nbPhotos); |
---|
| 236 | } |
---|
[7128] | 237 | } |
---|
| 238 | } |
---|
| 239 | ); |
---|
| 240 | } |
---|
| 241 | |
---|
| 242 | /** |
---|
| 243 | * apply markers to map |
---|
| 244 | * |
---|
| 245 | * @param Array markers : array of markers properties |
---|
| 246 | * each marker is an object with properties : |
---|
| 247 | * latitude, longitude, nbImages |
---|
| 248 | */ |
---|
| 249 | function applyMarkers(markers) |
---|
| 250 | { |
---|
| 251 | /* |
---|
| 252 | * deleting markers from the map only if they are not in the new list |
---|
| 253 | */ |
---|
| 254 | if(dialogGMapsOptions.gMap.markers.length>0) |
---|
| 255 | { |
---|
| 256 | var i=0; |
---|
| 257 | while(i<dialogGMapsOptions.gMap.markers.length) |
---|
| 258 | { |
---|
[7308] | 259 | newListIndex=markerInList(dialogGMapsOptions.gMap.markers[i].uId, markers); |
---|
[7128] | 260 | if(newListIndex==-1) |
---|
| 261 | { |
---|
| 262 | dialogGMapsOptions.gMap.markers[i].marker.setMap(null); |
---|
| 263 | dialogGMapsOptions.gMap.markers.splice(i, 1); |
---|
| 264 | } |
---|
| 265 | else |
---|
| 266 | { |
---|
| 267 | markers.splice(newListIndex,1); |
---|
| 268 | i++; |
---|
| 269 | } |
---|
| 270 | } |
---|
| 271 | } |
---|
| 272 | |
---|
| 273 | /* |
---|
| 274 | * add new markers on the map |
---|
| 275 | */ |
---|
| 276 | for(var i=0;i<markers.length;i++) |
---|
| 277 | { |
---|
| 278 | var marker = new google.maps.Marker( |
---|
| 279 | { |
---|
| 280 | position:new google.maps.LatLng(markers[i].lat, markers[i].lng), |
---|
| 281 | map: dialogGMapsOptions.gMap, |
---|
| 282 | title:markers[i].nbImgTxt |
---|
| 283 | } |
---|
| 284 | ); |
---|
| 285 | |
---|
| 286 | marker.info=markers[i]; |
---|
| 287 | marker.info.displayed=0; |
---|
| 288 | |
---|
| 289 | dialogGMapsOptions.gMap.markers.push( |
---|
| 290 | { |
---|
| 291 | marker:marker, |
---|
[7308] | 292 | uId:markers[i].uId |
---|
[7128] | 293 | } |
---|
| 294 | ); |
---|
| 295 | } |
---|
| 296 | } |
---|
| 297 | |
---|
| 298 | function compareMarkers(m1,m2) |
---|
| 299 | { |
---|
[7308] | 300 | if(m1.uId<m2.uId) |
---|
[7128] | 301 | { |
---|
| 302 | return(-1); |
---|
| 303 | } |
---|
[7308] | 304 | else if(m1.uId<m2.uId) |
---|
[7128] | 305 | { |
---|
| 306 | return(1); |
---|
| 307 | } |
---|
| 308 | return(0); |
---|
| 309 | } |
---|
| 310 | |
---|
[7308] | 311 | function markerInList(uId, markerList) |
---|
[7128] | 312 | { |
---|
| 313 | for(var i=0;i<markerList.length;i++) |
---|
| 314 | { |
---|
[7308] | 315 | if(markerList[i].uId==uId) return(i) |
---|
[7128] | 316 | } |
---|
| 317 | return(-1); |
---|
| 318 | } |
---|
| 319 | |
---|
| 320 | |
---|
| 321 | /** |
---|
| 322 | * the show() function display and manage a dialog box to choose |
---|
| 323 | * a geographic area |
---|
| 324 | * |
---|
| 325 | * @param options : properties to manage the dialog box |
---|
| 326 | * - bounds : an object with properties 'north', 'south', 'east' |
---|
| 327 | * and 'west' |
---|
| 328 | * - id : a string to identify a DOM object ; this parameter |
---|
| 329 | * is given to the callback when the OK button is pushed |
---|
| 330 | * - eventOK : a callback function, with 2 parameters : id of |
---|
| 331 | * the given DOM object and the bounds object |
---|
| 332 | * - cBuilder : a criteriaBuilder object |
---|
| 333 | * if set, the dialog box manage automaticaly |
---|
| 334 | * the criteria builder interface |
---|
| 335 | */ |
---|
| 336 | this.show = function (options) |
---|
| 337 | { |
---|
| 338 | showDialog(options); |
---|
| 339 | } |
---|
| 340 | |
---|
| 341 | /** |
---|
| 342 | * private function used to show the dialog box |
---|
| 343 | */ |
---|
| 344 | var showDialog = function(options) |
---|
| 345 | { |
---|
| 346 | if(options.bounds!=null) |
---|
| 347 | { |
---|
| 348 | bounds=options.bounds; |
---|
| 349 | } |
---|
| 350 | else |
---|
| 351 | { |
---|
| 352 | bounds={ |
---|
| 353 | north:0, |
---|
| 354 | south:0, |
---|
| 355 | east:0, |
---|
| 356 | west:0 |
---|
| 357 | }; |
---|
| 358 | } |
---|
| 359 | |
---|
| 360 | if(options.id!=null) |
---|
| 361 | { |
---|
| 362 | dialogGMapsOptions.id=options.id; |
---|
| 363 | } |
---|
| 364 | else |
---|
| 365 | { |
---|
| 366 | dialogGMapsOptions.id=''; |
---|
| 367 | } |
---|
| 368 | |
---|
| 369 | if(options.eventOk!=null) |
---|
| 370 | { |
---|
| 371 | dialogGMapsOptions.eventOk=options.eventOk; |
---|
| 372 | } |
---|
| 373 | |
---|
| 374 | if(options.cBuilder!=null) |
---|
| 375 | { |
---|
| 376 | dialogGMapsOptions.cBuilder=options.cBuilder; |
---|
| 377 | dialogGMapsOptions.cBuilder.doAction('setOptions', |
---|
| 378 | { |
---|
| 379 | onEdit:function (e) { editGA(e.data); }, |
---|
| 380 | onDelete:function (e) { deleteGA(e.data); }, |
---|
| 381 | } |
---|
| 382 | ); |
---|
| 383 | } |
---|
| 384 | |
---|
| 385 | $("#iDialogGMapsChoose").dialog('open'); |
---|
| 386 | } |
---|
| 387 | |
---|
| 388 | |
---|
| 389 | |
---|
| 390 | /** |
---|
| 391 | * manage the 'edit' button from criteria builder interface |
---|
| 392 | * @param String itemId : the itemId |
---|
| 393 | */ |
---|
| 394 | var editGA = function (itemId) |
---|
| 395 | { |
---|
| 396 | extraData=dialogGMapsOptions.cBuilder.doAction('getExtraData', itemId); |
---|
| 397 | showDialog( |
---|
| 398 | { |
---|
| 399 | id:itemId, |
---|
| 400 | bounds:extraData.param.bounds, |
---|
| 401 | requestId:extraData.param.requestId |
---|
| 402 | } |
---|
| 403 | ); |
---|
| 404 | } |
---|
| 405 | |
---|
| 406 | /** |
---|
| 407 | * manage the 'delete' button from criteria builder interface |
---|
| 408 | * @param String itemId : the itemId |
---|
| 409 | */ |
---|
| 410 | var deleteGA = function (itemId) |
---|
| 411 | { |
---|
| 412 | dialogGMapsOptions.cBuilder.doAction('delete', itemId); |
---|
| 413 | } |
---|
| 414 | |
---|
| 415 | /** |
---|
| 416 | * set the content for the cBuilder item |
---|
| 417 | */ |
---|
| 418 | var setCBuilderItem = function(id, bounds) |
---|
| 419 | { |
---|
| 420 | |
---|
[7141] | 421 | var content="<div>{/literal}{'gmaps_geographic_coords_between'|@translate}{literal}<br>"; |
---|
[7128] | 422 | content+="<span style='margin-left:20px;'>• "+DDtoDMS(bounds.south)+" {/literal}{'gmaps_south'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.north)+" {'gmaps_north'|@translate}{literal}</span><br>"; |
---|
| 423 | |
---|
| 424 | if(bounds.east<bounds.west) |
---|
| 425 | { |
---|
| 426 | content+="<span style='margin-left:20px;'>• "+DDtoDMS(bounds.east)+" {/literal}{'gmaps_east'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.west)+" {'gmaps_west'|@translate}{literal}</span>"; |
---|
| 427 | } |
---|
| 428 | else |
---|
| 429 | { |
---|
| 430 | content+="<span style='margin-left:20px;'>• "+DDtoDMS(bounds.west)+" {/literal}{'gmaps_west'|@translate} {'gmaps_and'|@translate} "+DDtoDMS(bounds.east)+" {'gmaps_east'|@translate}{literal}</span>"; |
---|
| 431 | } |
---|
| 432 | content+="</div>"; |
---|
| 433 | |
---|
| 434 | |
---|
| 435 | if(id=='') |
---|
| 436 | { |
---|
| 437 | //no id:add a new item in the list |
---|
| 438 | dialogGMapsOptions.cBuilder.doAction('add', content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) ); |
---|
| 439 | } |
---|
| 440 | else |
---|
| 441 | { |
---|
| 442 | // update item |
---|
| 443 | dialogGMapsOptions.cBuilder.doAction('edit', id, content, criteriaBuilder.makeExtendedData('GMaps', {bounds:$.extend({}, bounds), requestId:requestId } ) ); |
---|
| 444 | } |
---|
| 445 | } |
---|
| 446 | |
---|
| 447 | /** |
---|
| 448 | * convert a decimal degree to D°M'S' |
---|
| 449 | * note : negative values are converted in positive values, assuming North/South |
---|
| 450 | * and East/West are managed outside this function |
---|
| 451 | * |
---|
| 452 | * @param Float $value : the value to convert |
---|
| 453 | * @return String : value converted in DMS |
---|
| 454 | */ |
---|
| 455 | var DDtoDMS = function (value) |
---|
| 456 | { |
---|
| 457 | value=Math.abs(value); |
---|
| 458 | degrees=Math.floor(value); |
---|
| 459 | tmp=(value-degrees)*60; |
---|
| 460 | minutes=Math.floor(tmp); |
---|
| 461 | seconds=Math.round((tmp-minutes)*6000)/100; |
---|
| 462 | return(degrees+"° "+minutes+"' "+seconds+'"'); |
---|
| 463 | } |
---|
| 464 | |
---|
| 465 | initDialogBox(); |
---|
| 466 | } |
---|
| 467 | |
---|
| 468 | |
---|
| 469 | </script> |
---|
| 470 | {/literal} |
---|
| 471 | |
---|
| 472 | <div id="iDialogGMapsChoose" style='display:none;'> |
---|
| 473 | <div id='iDialogGMapNfo'> </div> |
---|
| 474 | <div id='iDialogGMapsMap' style='width:95%; height:95%;margin-left:auto;margin-right:auto;border:1px solid;'></div> |
---|
| 475 | </div> |
---|
| 476 | |
---|
| 477 | |
---|