1/** 2 * Created by vib on 04/12/2016. 3 * à l'usage, les searchCriteriaIhm ne sont faits que pour le mode ReactWay 4 * c'est pourquoi on écoute que les événements rectWay : reactWayFinishedRenderedEvt, fullPageLoadFinishedInReactWayEvt 5 * en effet, en mode SeoAndHashSearch, on utilise systématiquement les SearchServices à la place des searchCriteriaIhm 6 */ 7 8if (lae == null) { 9 var lae = {}; 10} 11if (lae.dsio == null) { 12 lae.dsio = {}; 13} 14 15lae.dsio.Carte_SearchCriteriaIhm = function (searchCriteriaIhmArgs) { 16 this.originInputId = searchCriteriaIhmArgs.originInputId; 17 this.ajxViewOnLoad = searchCriteriaIhmArgs.ajxViewOnLoad; 18 this.$dsioTargetTextInput = $(this.originInputId); 19 this.appLayer = searchCriteriaIhmArgs.appLayer; 20 this.appLayer.Carte_SearchCriteriaIhm = this; 21 22 this.divMapContener = null; 23 this.leafletMap = null; 24 this.markerClusterGroup = null; 25 this.markerCollection = []; 26 this.popup = null; 27 28 //@see http://leafletjs.com/reference-1.0.2.html#icon 29 this.icon = L.icon({ 30 iconUrl: '/lae/services1.0/plugins/laetis/diffusio-258/ext_site_SQL3c/assets/leaflet-markers/' + this.appLayer.displayStyle + '.png', 31 iconSize: [ 28, 35 ], 32 iconAnchor: [ 14, 35 ] 33 }); 34 this.hoverIcon = L.icon({ 35 iconUrl: '/lae/services1.0/plugins/laetis/diffusio-258/ext_site_SQL3c/assets/leaflet-markers/' + this.appLayer.displayStyle + '-hover.png', 36 iconSize: [ 28, 35 ], 37 iconAnchor: [ 14, 35 ] 38 }); 39 40 //listenMoveEnd 41 this.moveEndActive = true; 42 this.media_folder = '';/*https://cdt49.media.tourinsoft.eu/upload/*/ 43 44 //états de la carte 45 this.leafletMapIsLoaded = false; 46 this.isFilteredByMap = false; 47 this.isMapDisplayed = false; 48 this.currentRectangle = this.$dsioTargetTextInput.val() ? this.$dsioTargetTextInput.val() : ''; 49 50 this.listenDsioReactWayEvents(); 51 52 this.leafletMap = null; 53 54 this.init(); 55 56}; 57 58lae.dsio.Carte_SearchCriteriaIhm.prototype.init = function init () { 59 60 var that = this; 61 $(document).ready(function () { 62 that.initRefPointBounds(); 63 that.drawIhm(); 64 that.initIhmOnPageFullLoad(); 65 that.initMapRefPoint(); 66 }); 67 68} 69 70lae.dsio.Carte_SearchCriteriaIhm.prototype.drawIhm = function () { 71 /* Fonction où l'on dessine le layout qui va recevoir les états du moteur 72 * et ou l'on masque les input correspondants le cas échéants */ 73 var that = this; 74 75 this.divMapContener = 'mapContener_' + this.appLayer.indexName; 76 this.leafletMap = L.map(this.divMapContener);//, lae.dsio.PrmsApp.approotList.map); 77 this.appLayer.leafletMap = this.leafletMap; 78 79 // var roads = L.gridLayer.googleMutant({ 80 // type: 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid' 81 // }).addTo(this.leafletMap); 82 83 L.tileLayer('https://tile.openstreetmap.bzh/oc/{z}/{x}/{y}.png', { 84 attribution: 'Map data © <a href="http://openstreetmap.org/copyright"> Kendaolerien OpenStreetMap</a>', 85 }).on('tileloadstart', function(event) { 86 event.tile.setAttribute('loading', 'lazy'); 87 }).addTo(this.leafletMap); 88 89 90 // L.lae.defaultTileLayer().addTo(this.leafletMap) 91 92 93 $.ajax({ 94 url: '/lae/services1.0/plugins/laetis/diffusio-258/ext_site_SQL3c/searchCriteriaIhm/Carte/12.json', 95 cache: true, 96 dataType:'json' 97 }).done(function (data) { 98 if (data) { 99 var kmlLayer = L.geoJSON(data,{ 100 invert: true, 101 style: { 102 color : '#000', 103 weight: 1, 104 fillColor: '#000' 105 } 106 }); 107 kmlLayer.addTo(that.leafletMap); 108 } 109 }); 110 111 this.leafletMap.on('zoomend', function (e) { 112 that.setTracesGpx(); 113 }); 114 115 116 this.leafletMap.on('load', function (e) { 117 that.leafletMapIsLoaded = true; 118 }); 119 120 this.leafletMap.on('moveend', function (e) { 121 122 if (that.moveEndActive) { 123 bounds = that.formatBounds(this.getBounds()); 124 that.currentRectangle = bounds; 125
126 if (that.isFilteredByMap) { 127 that.$dsioTargetTextInput.val(bounds); 128 that.$dsioTargetTextInput.trigger($.Event('keypress', {which: 13})); 129 } 130 } 131 else { 132 that.moveEndActive = true; 133 } 134 135 }); 136 137 this.setFilterByMapButton(); 138 139 /*if( $('.page-carte').length>0) { 140 alert('fdsfsd'); 141 this.isFilteredByMap = false; 142 this.$dsioTargetTextInput.val(''); 143 this.$dsioTargetTextInput.trigger($.Event('keypress', {which: 13})); 144 145 $('.mapWrapper .filterByMapButton').addClass('unchecked'); 146 147 148 } 149 else {*/ 150 $('.mapWrapper.' + this.appLayer.indexName).delegate('.filterByMapButton', 'click', function () { 151 that.isFilteredByMap ? that.stopMapFiltering() : that.startMapFiltering(); 152 }); 153 // } 154 155}; 156 157lae.dsio.Carte_SearchCriteriaIhm.prototype.getFormattedBounds = function () { 158 159 if (!this.leafletMap) 160 return null; 161 162 return this.formatBounds(this.leafletMap.getBounds()); 163 164} 165 166lae.dsio.Carte_SearchCriteriaIhm.prototype.formatBounds = function (bounds) { 167 168 if (!bounds) 169 return ''; 170 171 var bounds = 'geo~' + bounds.toBBoxString().split(',').join('~'); 172 var reg = /-/gi; 173 bounds = bounds.replace(reg, 'neg'); 174 175 return bounds; 176} 177 178lae.dsio.Carte_SearchCriteriaIhm.prototype.stopMapFiltering = function () { 179 180 this.isFilteredByMap = false; 181 this.$dsioTargetTextInput.val(''); 182 this.$dsioTargetTextInput.trigger($.Event('keypress', { which: 13 })); 183 184 $('.mapWrapper.' + this.appLayer.indexName + ' .filterByMapButton').addClass('unchecked'); 185 186}; 187 188lae.dsio.Carte_SearchCriteriaIhm.prototype.startMapFiltering = function () { 189 if(this.jsonLngLatOis) { 190 var key; 191 var bounds = L.latLngBounds(); 192 for (key in this.jsonLngLatOis) { 193 bounds.extend(this.jsonLngLatOis[key].latLng) 194 } 195 this.currentRectangle = this.formatBounds(bounds) 196 this.pantoCustomBounds() 197 } 198 199 this.isFilteredByMap = true; 200 this.$dsioTargetTextInput.val(this.currentRectangle); 201 this.appLayer.reactWayCriteriaSubmit(this.$dsioTargetTextInput); 202 203 $('.mapWrapper.' + this.appLayer.indexName + ' .filterByMapButton').removeClass('unchecked'); 204 205}; 206 207lae.dsio.Carte_SearchCriteriaIhm.prototype.updateIhmsAfterFullReset = function () { 208 this.moveEndActive = false; 209 this.leafletMap.fitBounds([ lae.dsio.PrmsApp.approotList.map.southWest, lae.dsio.PrmsApp.approotList.map.northEast ]); 210 211}; 212 213lae.dsio.Carte_SearchCriteriaIhm.prototype.reset = function () { 214 this.moveEndActive = true; 215 this.leafletMap.fitBounds([ lae.dsio.PrmsApp.approotList.map.southWest, lae.dsio.PrmsApp.approotList.map.northEast ]); 216}; 217 218lae.dsio.Carte_SearchCriteriaIhm.prototype.initIhmOnPageFullLoad = function () { 219 /* Fonction où l'on va chercher de la donnée qui ne dépend pas des recherches utilisateurs 220 mais du moteur lui même : exemple la liste des lieux d'une liste autosuggest */ 221 222}; 223 224lae.dsio.Carte_SearchCriteriaIhm.prototype.convertInputValForIhm = function () { 225 /* Fonction où l'on interprete la donnée de l'input dsio 226 * pour la transmettre compréhenisble par l'IHM */ 227}; 228 229 230 231lae.dsio.Carte_SearchCriteriaIhm.prototype.refreshMap = function (callback) { 232 233 var that = this 234 if(this.leafletMap){ 235 this.leafletMap.invalidateSize(false) 236 callback() 237 return 238 } 239 240 setTimeout(function(){ 241 that.refreshMap(callback) 242 },500) 243} 244 245lae.dsio.Carte_SearchCriteriaIhm.prototype.listenDsioReactWayEvents = function () { 246 var that = this; 247 //resultsHaveChanges, pageHaveChanges, ... 248 $(this.appLayer).on('reactWayFinishedRenderedEvt', function (e) { 249 var viewData = e.reactViewData; 250 that.refreshIhmWithReactViewData(viewData); 251 }); 252 253 $(this.appLayer).on('fullPageLoadFinishedInReactWayEvt', function (e) { 254 $(that.appLayer).trigger('carteSearchCriteriaIhmReadyEvt'); 255 }); 256 257 $(this.appLayer).on('mapContenerResizedEvt', function (e) { 258 that.refreshMap(function(){ 259 that.pantoCustomBounds(); 260 that.startMapFiltering(); 261 that.mapContenerResizedEvtFiredOnce = true; 262 }); 263 }); 264 265 $(this.appLayer).on('mapShowAndDefaultPanEvt', function (e) { 266 that.refreshMap(function() { 267 that.pantoCustomBounds(); 268 that.startMapFiltering(); 269 }) 270 }); 271 272 $(this.appLayer).on('fullListModeEvt', function (e) { 273 that.stopMapFiltering(); 274 }); 275 276 $('#mapContener_' + this.appLayer.indexName).delegate('.closePopup', 'click', function (e) { 277 that.leafletMap.closePopup(); 278 }); 279 280 this.manageListHover(); 281}; 282 283lae.dsio.Carte_SearchCriteriaIhm.prototype.setFilterByMapButton = function () { 284 $('.mapWrapper.' + this.appLayer.indexName).prepend('<button class="filterByMapButton">Rechercher quand je déplace la carte</button>'); 285}; 286 287lae.dsio.Carte_SearchCriteriaIhm.prototype.pantoCustomBounds = function () { 288 289 //mise à jour de la carte 290 var reg = /neg/gi; 291 var southWest = lae.dsio.PrmsApp.approotList.map.southWest; 292 var northEast = lae.dsio.PrmsApp.approotList.map.northEast; 293 var customBounds = this.currentRectangle.replace(reg, '-').split('~'); 294 295 if (customBounds.length == 5) { 296 southWest = [ Number(customBounds[ 2 ]), Number(customBounds[ 1 ]) ]; 297 northEast = [ Number(customBounds[ 4 ]), Number(customBounds[ 3 ]) ]; 298 } 299 300 this.leafletMap.fitBounds([ southWest, northEast ], { animate: false }); 301 302}; 303 304lae.dsio.Carte_SearchCriteriaIhm.prototype.manageListHover = function () { 305 306 var that = this; 307 var activeMarker = null; 308 309 $(this.appLayer).on('dsioEltMenterEvt', function (e) { 310 311 if (!e.oiId || !that.markerCollection[e.oiId] || !that.markerClusterGroup || !that.leafletMap || activeMarker) 312 return; 313 314 var marker = that.markerCollection[e.oiId]; 315 activeMarker = marker; 316 317 that.markerClusterGroup.removeLayer(marker); 318 319 marker.setIcon(that.hoverIcon); 320 marker.setZIndexOffset(1000); 321 that.leafletMap.addLayer(marker); 322 that.addOneTraceGpx(e.oiId, { 323 weight: 3, 324 color: '#000', 325 dashArray: '', 326 fillOpacity: 0.7 327 }, 'hover'); 328 329 }); 330 331 $(this.appLayer).on('dsioEltMleaveEvt', function (e) { 332 333 if (!e.oiId || !activeMarker || !that.markerClusterGroup || !that.leafletMap || !activeMarker) 334 return; 335 336 that.leafletMap.removeLayer(activeMarker); 337 338 activeMarker.setIcon(that.icon); 339 340 341 activeMarker.setZIndexOffset(0); 342 that.markerClusterGroup.addLayer(activeMarker); 343 that.markerClusterGroup.refreshClusters(activeMarker); 344 345 activeMarker = null; 346 that.removeOneTraceGpx(e.oiId, 'hover'); 347 348 }); 349 350}; 351 352//catte fonction a attendu automaitquement ajxViewData 353lae.dsio.Carte_SearchCriteriaIhm.prototype.refreshIhmWithReactViewData = function (viewData) { 354 // console.log(this.appLayer.mod); 355 if (viewData.searchChange) { 356 this.removeMarkers(); 357 if (viewData.searchChange.datas.jsonLngLatOis) { 358 this.jsonLngLatOis = viewData.searchChange.datas.jsonLngLatOis 359 this.setMarkers(viewData.searchChange.datas.jsonLngLatOis); 360 this.buildTraceFileCollection(viewData.searchChange.datas.jsonLngLatOis); 361 } 362 } 363 //vider la carte de ses pictos 364 //les remplacer par le nouveaux qui sont dans le viewData 365 366}; 367 368lae.dsio.Carte_SearchCriteriaIhm.prototype.buildTraceFileCollection = function (jsonLngLatOis) { 369 370 var that = this; 371 372 this.traceFileCollection = {}; 373 for (var oiId in jsonLngLatOis) { 374 this.traceFileCollection[ oiId ] = jsonLngLatOis[ oiId ].tracesGpx; 375 } 376 377 this.setAllTracesGpx(); 378 this.setTracesGpx(); 379 380} 381 382lae.dsio.Carte_SearchCriteriaIhm.prototype.setAllTracesGpx = function () { 383 //media_folder 384 if (!this.leafletMap) 385 return; 386 387 var that = this; 388 389 //remove old tracks 390 for (oiId in that.traceCollection) { 391 that.removeOneTraceGpx(oiId); 392 } 393
394 //add new tracks 395 for (oiId in that.markerCollection) { 396 397 this.addOneTraceGpx(oiId); 398 399 } 400 401} 402 403lae.dsio.Carte_SearchCriteriaIhm.prototype.setTracesGpx = function () { 404 //media_folder 405 //if(!this.leafletMap) 406 return; 407 408 409} 410 411lae.dsio.Carte_SearchCriteriaIhm.prototype.addOneTraceGpx = function (oiId, layerOptions, prefix) { 412 413 if (!this.traceFileCollection || !this.traceFileCollection[ oiId ]) 414 return; 415 416 if (!this.traceCollection) { 417 this.traceCollection = {}; 418 this.cachedTraceLayers = {}; 419 } 420 421 if (!prefix) 422 var prefix = ''; 423 var id = prefix + oiId; 424 425 if (this.traceCollection[ id ]) 426 return; 427 428 var that = this; 429 430 if (!layerOptions) 431 var layerOptions = { 432 weight: 3, 433 color: '#1b9584', 434 dashArray: '', 435 fillOpacity: 0.7 436 } 437 438 if (this.cachedTraceLayers[ id ]) { 439 440 this.leafletMap.addLayer(this.cachedTraceLayers[ id ]); 441 this.cachedTraceLayers[ id ].setStyle(layerOptions); 442 this.traceCollection[ id ] = this.cachedTraceLayers[ id ]; 443 444 } else { 445 446 var trace = this.traceFileCollection[ oiId ]; 447 $.ajax(this.media_folder + trace).done(function (gpx) { 448 if (gpx) { 449 450 //suppression des picto waypoint 451 $('wpt', gpx).remove(); 452 453 var geoJson = toGeoJSON.gpx(gpx); 454 if (geoJson) { 455 456 var myLayer = L.geoJSON(geoJson); 457 myLayer.setStyle(layerOptions); 458 myLayer.oiId = oiId; 459 460 myLayer.on('click', function () { 461 that.openMarkerPopup(oiId); 462 }); 463 464 that.cachedTraceLayers[ id ] = myLayer; 465 466 //if(that.leafletMap.hasLayer(that.markerCollection[oiId])){ 467 that.traceCollection[ id ] = myLayer; 468 myLayer.addTo(that.leafletMap); 469 //} 470 471 } 472 } 473 }); 474 475 } 476 477} 478 479lae.dsio.Carte_SearchCriteriaIhm.prototype.removeOneTraceGpx = function (oiId, prefix) { 480 481 if (!this.traceFileCollection) 482 return; 483 484 if (!prefix) 485 prefix = ''; 486 var id = prefix + oiId; 487 488 if (!this.leafletMap || !this.traceCollection || !this.traceCollection[ id ]) 489 return; 490 491 this.leafletMap.removeLayer(this.traceCollection[ id ]); 492 493 delete this.traceCollection[ id ]; 494 495} 496 497lae.dsio.Carte_SearchCriteriaIhm.prototype.removeMarkers = function () { 498 499 if (!this.leafletMap || !this.markerClusterGroup) 500 return; 501 502 this.leafletMap.removeLayer(this.markerClusterGroup); 503 504 this.markerClusterGroup = null; 505 this.markerCollection = []; 506 507}; 508 509lae.dsio.Carte_SearchCriteriaIhm.prototype.setMarkers = function (jsonLngLatOis) { 510 511 if (!this.leafletMap) 512 return; 513 514 515 var that = this; 516 var markers = L.markerClusterGroup({ 517 showCoverageOnHover: false, 518 animateAddingMarkers: false 519 }); 520 521 for (var oiId in jsonLngLatOis) { 522 this.markerCollection[ oiId ] = L.marker(jsonLngLatOis[ oiId ].latLng, { 523 icon: this.icon, 524 zIndexOffset: 0 525 }); 526 this.markerCollection[ oiId ].oiId = oiId; 527 this.markerCollection[ oiId ].on('click', function (e) { 528 that.openMarkerPopup(e.target.oiId); 529 }); 530 markers.addLayer(this.markerCollection[ oiId ]); 531 } 532 533 //add trace Gpx on markers clic 534 markers.on('clusterclick', function (a) { 535 var childMarkers = a.layer.getAllChildMarkers(); 536 for (index in childMarkers) { 537 var oiId = childMarkers[ index ].oiId; 538 that.addOneTraceGpx(oiId); 539 } 540 }); 541 542 this.markerClusterGroup = markers; 543 this.leafletMap.addLayer(this.markerClusterGroup); 544 545}; 546 547lae.dsio.Carte_SearchCriteriaIhm.prototype.openMarkerPopup = function (oiId) { 548 549 if (!oiId || !this.markerCollection[ oiId ]) 550 return; 551 552 var that = this; 553 $.ajax({ 554 url: '/lae/services1.0/plugins/laetis/diffusio-258/ext_site_SQL3c/presViews/OiDetail/viewMapPopup/outputOiDetailMapPopup.ajx.php', 555 data: { 556 dsioIdDetail: oiId, 557 repertoire: '/ext_site_SQL3c', 558 codeLangue: 'fr' 559 }, 560 dataType: 'html', 561 success: function (html) { 562 563 html += '<a class="closePopup" title="fermer"><i class="dsio-icon-close"></i></a>'; 564 565 that.popup = new L.Rrose({ 566 closeButton: false, 567 autoPan: false, 568 offset: new L.Point(0, -10), 569 autoPanPadding: new L.Point(200, 400) 570 }) 571 .setLatLng(that.markerCollection[ oiId ].getLatLng()) 572 .setContent(html) 573 .openOn(that.leafletMap); 574 } 575 }); 576}; 577 578/** 579 * initialize référence data at beginning 580 */ 581lae.dsio.Carte_SearchCriteriaIhm.prototype.initRefPointBounds = function () { 582 583 var that = this; 584 var refPoint = lae.dsio.AppHash.str[ this.appLayer.objApp.prefixeInst ][ 'refPoint' ]; 585 586 if (!refPoint) 587 return; 588 589 refPoint = refPoint.split('~'); 590 591 if (refPoint.length != 4) 592 return; 593 594 //ex 47.710484~-0.822187~10~TFOHLOPDL049V50013G" 595 //ex 47.710484~-0.822187~10~title point" 596 var data = refPoint[ 3 ]; 597 var distance = parseInt(refPoint[ 2 ]) * 1000; 598 var LatLng = L.latLng([ refPoint[ 0 ], refPoint[ 1 ] ]); 599 var LatLngBounds = LatLng.toBounds(distance); 600 601 ////on écrase les bounds par défaut 602 lae.dsio.PrmsApp.approotList.map.northEast = [ 603 LatLngBounds.getNorthEast().lat, 604 LatLngBounds.getNorthEast().lng 605 ]; 606 lae.dsio.PrmsApp.approotList.map.southWest = [
607 LatLngBounds.getSouthWest().lat, 608 LatLngBounds.getSouthWest().lng 609 ]; 610 611 this.appLayer.objApp.refPoint = this.refPoint = { 612 LatLng: LatLng, 613 LatLngBounds: LatLngBounds, 614 distance: distance, 615 data: data, 616 } 617 618} 619 620/** 621 * initialize référence point sent through hash in url 622 */ 623lae.dsio.Carte_SearchCriteriaIhm.prototype.initMapRefPoint = function () { 624 625 var that = this; 626 627 if (!this.refPoint) 628 return; 629 630 if (this.refPoint.data.substring(0, 3) == 'TFO') { 631 $.ajax({ 632 url: lae.dsio.PrmsApp.cheminDiffusio + lae.dsio.PrmsApp.cheminExt + '/presViews/OiDetail/viewMapRefPoint/outputOiDetailMapRefPoint.ajx.php', 633 data: { 634 dsioIdDetail: this.refPoint.data, 635 repertoire: lae.dsio.PrmsApp.cheminExt, 636 codeLangue: lae.dsio.Trads.codeLangue 637 }, 638 dataType: 'json', 639 success: function (json) { 640 641 var html = json.html.popupContent; 642 that.setRefPoint(that.refPoint.LatLng, html); 643 } 644 }); 645 } else { 646 var html = '<div class="dsio-map-popup refPoint"><div class="content"><h3 class="titre">' + this.refPoint.data + '</h3></div></div>'; 647 this.setRefPoint(this.refPoint.LatLng, html); 648 } 649 650} 651 652lae.dsio.Carte_SearchCriteriaIhm.prototype.setRefPoint = function (LatLng, html) { 653 var that = this; 654 var refPointParams = lae.dsio.PrmsApp.approotList.map.refPoint; 655 656 //Marker 657 this.refPointMarker = L.marker(LatLng, { 658 icon: L.icon(refPointParams.icon), 659 zIndexOffset: 200 660 }).addTo(this.leafletMap); 661 662 //Popup 663 this.refPointPopup = new L.Rrose(refPointParams.popup) 664 .setLatLng(LatLng) 665 .setContent(html) 666 .openOn(this.leafletMap); 667 668 //events 669 this.refPointMarker.on('click', function () { 670 that.refPointPopup.openOn(that.leafletMap); 671 }); 672 673 $(this.appLayer).on('mapContenerResizedEvt', function (e) { 674 that.refPointPopup.update(); 675 }); 676 677} 678 679 680 681
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.