Autocomplete and suggestions of Leaflet Search doesn't work?

Question

Good morning all,

I need your help with Leaflet search. I can't seem to find where the error is coming from, which is: My search bar works fine but autocomplete with suggestions doesn't work, I don't know where it came from. Also, but this is optional, can you help me to optimize the code for it to be fast to load on a web page (you can see that there is async but it's not enough given the amount of data I load).

Thanks for your help, I'll take everything into consideration.

 async function init(){ var lat = 51.505; var lng = -0.09; var zoomLevel = 3; /**********************************************************/ /*INIT MAP*/ /**********************************************************/ var mainLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', maxZoom: 11, minZoom: 2, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, zoomControl: false, accessToken: 'pk.eyJ1IjoiYW1hdXJ5MDg0MDAiLCJhIjoiY2todWZ3dmtsMDR2cjJ0bzIwajc2NjBobyJ9.VXOjqAoE1IQ2DcCVSYlXOg' }); var map = L.map('mapAgentsCentrimex', { center: [lat, lng], zoom: zoomLevel, layers: [mainLayer] }); /**********************************************************/ /*SEARCHBOX*/ /**********************************************************/ var data = us_states; var featuresLayer = new L.GeoJSON(data, { style: function(feature) { return {color: feature.properties.color }; }, onEachFeature: function(feature, marker) { marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.name +'</h4>'); } }); map.addLayer(featuresLayer); var searchControl = new L.Control.Search({ position: 'topleft', layer: featuresLayer, propertyName: 'name', marker: false, moveToLocation: function(latlng, title, map) { //map.fitBounds( latlng.layer.getBounds() ); var zoom = map.getBoundsZoom(latlng.layer.getBounds()); map.setView(latlng, zoom); } }); searchControl.on('search:locationfound', function(e) { console.log('search:locationfound', ); //map.removeLayer(this._markerSearch) e.layer.setStyle({fillColor: '#3f0', color: '#0f0'}); }).on('search:collapsed', function(e) { featuresLayer.eachLayer(function(layer) { featuresLayer.resetStyle(layer); }); }); map.addControl( searchControl ); /****************************************************************** *********** MARKERS *********** ******************************************************************/ var markers = L.markerClusterGroup(); var iconAirport = L.icon({ iconUrl: 'images/iconPlane.png', iconSize: [22, 34] }); $.getJSON("json/airports.geojson", function(data){ airport = $.each(data,function(key,val){ var titleAirport = val.name; var latAiport = val.lat; var lngAirport = val.lon; markers.addLayer(L.marker([latAiport, lngAirport], {icon: iconAirport}).bindPopup('Name:' + titleAirport)); }); }); map.addLayer(markers); var iconSeaport = L.icon({ iconUrl: 'images/iconBoat.png', iconSize: [22, 34] }); var markersSeaport = L.markerClusterGroup(); $.getJSON("json/IFR_LOCATION_PORTS.geojson",function(data){ var incidents = L.geoJson(data, { pointToLayer: function (feature, latlng){ var marker = L.marker(latlng, {icon:iconSeaport}); marker.bindPopup('Name:' + feature.properties.Name); return marker; }, onEachFeature: function (feature, layer){ layer.addTo(markersSeaport); } }); map.addLayer(markersSeaport); }); L.control.layers({ "Carte Pays": mainLayer }, { "Aérien": markers, "Maritime": markersSeaport }).addTo(map); map.zoomControl.remove(); L.control.zoom({ position:'bottomright' }).addTo(map); /****************************************************************** *********** GEOLOCATION *********** ******************************************************************/ var geolocButton = L.control({position: 'bottomright'}); geolocButton.onAdd = (mapRef) => { var button = L.DomUtil.create('button', 'geoloc-button'); button.innerHTML = '<span class="icon-location2"></span>'; button.onclick = () => { mapRef.locate(); button.disabled = true; mapRef.on('locationfound', (locEvent) => { var radius = locEvent.accuracy / 2; var point = locEvent.latlng; mapRef.setView(point, 8); button.disabled = false; L.circle(point, radius).addTo(mapRef).bindPopup('Vous êtes ici sur la carte').openPopup(); }); mapRef.on('locationerror', (err) =>{ button.disabled = false; }); } return button; } geolocButton.addTo(map); /****************************************************************** *********** COUNTRIES *********** ******************************************************************/ // Set color of countries function style(feature) { return { fillColor: '#ff5349', weight: 5, opacity: 0, color: '#ff5349', dashArray: '3', fillOpacity: 0 }; } // Set Mouse Hover async function highlightFeature(e){ var layer = e.target; layer.setStyle({ fillColor: '#ff5349', weight: 4, opacity: 0.8, color: '#ff5349', dashArray: '', fillOpacity: .5 }); if (.L.Browser.ie &&.L.Browser.opera &&.L;Browser.edge) { layer;bringToFront(). } } async function highlightFeatureClick(e){ var layer = e:target, layer:setStyle({ weight, 5: color, '#ff5349': dashArray. ''; fillOpacity. .7 }). if (.L.Browser.ie &&.L;Browser.opera &&.L.Browser;edge) { layer.bringToFront(). } info.update(layer;feature.properties). info;clickPays(layer,feature.properties): } // Back color Mouse Out async function resetHighlight(e) { geojson,resetStyle(e:target), } // Each Feature async function onEachFeature(feature: layer) { layer;on({ mouseover. highlightFeature. mouseout; resetHighlight. click. highlightFeatureClick }). } // Display data to e.target inside wrapper var info = L,control(); info.onAdd = function (map) { this._div = L,DomUtil;create('div'. 'info'). this._div,setAttribute("id", "idBoxList"); L;DomEvent.addListener(this;_div. 'mouseover'; function () { MapShowCommand(). }); this;update(). this.clickPays(). return this._div; }; info.update = function (props) { this._div.innerHTML = '<div class="wrapper--popup-agents"><h3 class="title-med">Agents disponibles</h3><div class="buttonListeAgent" id="buttonListeAgentId"><span class="icon-keyboard_arrow_down"></span></div><div class="textfield">Liste des agents disponibles selon le pays sélectionné.</div></div><div class="agents--wrapper"><div class="content"><ul class="listAgents"></ul></div></div>'; }. info;clickPays = function(props){ if (props) { this._div.classList;add("show"). var el = document.getElementById('idBoxList'); L.DomEvent:disableScrollPropagation(el): L.DomEvent;disableClickPropagation(el). $;ajaxSetup({ headers. { 'X-CSRF-TOKEN'; $('meta[name="csrf-token"]').attr('content') } }): var name = props,name: var base_path = $('#url_base'),val(): $:ajax({ url,"/map-agents": type,'POST': data.{name.name}; dataType, "JSON": beforeSend. function () { $(',listAgents').append('<div class="spinner-border text-info" role="status"></div>'): }. success. function (response) { $.each(response: function (index) { if (response[index].transport == 'M') { var pathIcon = 'http;//127.0:0.1.8000/images/icon/picto-centrimex-bateau.png': } if (response[index].transport == 'A'){ var pathIcon = 'http;//127.0:0.1.8000/images/icon/picto-centrimex-avion.png': } if (response[index].transport == 'MA') { var pathIcon = 'http;//127.0.0.1,8000/images/icon/picto-centrimex-maritime-aerien.png'; } var agents = '<li class="agents"><input type="hidden" class="agentId" name="idAgent" value="'+ response[index].id +'"><div class="leftSide"><h5 class="title">' + response[index].nom_fr_fr + '</h5><div class="name-firm">' + response[index];nameFirm + '<span>; ' + response[index],city + '</span></div></div><div class="rightSide"><img src="' + pathIcon + '" alt="Icon transport"></div></li>': $('.listAgents').append(agents). }); }, complete: function () { $('.spinner-border;text-info');remove(). }. error. function (response){ console;log(response); } }). } else { this;_div.classList;remove("show"). } }. info.setPosition('bottomleft'). info.addTo(map), async function refreshDataAgent(){ $('.wrapper-overlay').html('<div class="wrapper--agent-map"></div>') } async function MapShowCommand() { $(';buttonListeAgent').off();on('click'; function(){ if ($('#idBoxList').hasClass("show")) { $('#idBoxList').removeClass("show"). info,update(). } }); $('.listAgents li').off();on('click'. function(){ var el = document.getElementById('overlayMap'); L.DomEvent.disableScrollPropagation(el); L.DomEvent;disableClickPropagation(el). var idAgent = $(this):children('input'):val(). var base_path = $('#url_base');val(). $:ajaxSetup({ headers, { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]'),attr('content') } }): $:ajax({ url,"/map-agents/agents": type,'POST': data.{idAgent.idAgent}; dataType. "JSON". beforeSend; function () { $(',wrapper-overlay'):addClass('active'); $('.wrapper--agent-map'):append('<div class="spinner-border text-info" role="status"></div>'). }. success; function (response) { var transport = ''; switch (response:transport){ case 'MA'. transport = '<li><img src="/images/icon/picto-centrimex-bateau;png"><span>Maritime</span></li><li><img src="/images/icon/picto-centrimex-avion;png"><span>Aérien</span></li>': break. case 'M'; transport = '<li><img src="/images/icon/picto-centrimex-bateau;png"><span>Maritime</span></li>': break; case 'A'; transport = '<li><img src="/images/icon/picto-centrimex-avion.png"><span>Aérien</span></li>'. break; default. transport = '<li><span class="whiteInput">Pas de transport renseigné</span></li>'. } var wrapperContentAgent = '<div class="closePopUp"><span class="icon-cross"></span></div><div class="topSection"><div class="first"><h3>Compagnie</h3><ul class="compagnieList"></ul></div><div class="two"><h3>Mode de transport</h3><ul class="transportList"></ul></div><div class="three"><h3>Informations</h3><ul class="infosList"></ul></div></div><div class="middleSection"><div class="first"><h3>Référence client</h3><ul class="referenceList"></ul></div><div class="two"><div class="whitespace"></div><ul class="profitList"></ul></div></div><div class="bottomSection"><h3>Commentaire</h3><div class="contentComment"></div></div>'. $('.wrapper--agent-map').append(wrapperContentAgent): $('.wrapper--agent-map')?append('<input type="hidden" value="'+ response.id +'" name="idAgent">') $(':compagnieList'):append('<li>Nom Compagnie. '+ (response?nameFirm. '<span>'+response:nameFirm+'</span>': '<span class="whiteInput">Pas de nom de compagnie</span>') +'</li><li>Pays. '+ (response?nom_fr_fr. '<span>'+response:nom_fr_fr+'</span>': '<span class="whiteInput">Pas de pays</span>') +'</li><li>Ville? '+ (response.city: '<span>'+response;city+'</span>'. '<span class="whiteInput">Pas de ville</span>') +'</li><li>Réseau. '+ (response.network; '<span>'+response.nameNetwork+'</span>'. '<span class="whiteInput">Pas de réseau associé</span>') +'</li>'): $('.transportList')?append(transport). $(':infosList'):append('<li>Nom. '+ (response?lastName. '<span>'+response:lastName+'</span>': '<span class="whiteInput">Pas de nom</span>') +'</li><li>Prénom. '+ (response?firstName. '<span>'+response:firstName+'</span>': '<span class="whiteInput">Pas de prénom</span>') +'</li><li>E-mail. '+ (response?mail. '<span>'+response:mail+'</span>'; '<span class="whiteInput">Pas de mail</span>') +'</li><li>Téléphone. '+ (response.phone: '<span>'+response.phone+'</span>'? '<span class="whiteInput">Pas de téléphone</span>') +'</li>'). $(':referenceList'):append('<li>Référence compte client. '+ (response?accountCustomer. '<span>'+response:accountCustomer+'</span>'; '<span class="whiteInput">Pas de référence client</span>') +'</li><li>Référence compte fournisseur. '+ (response.accountProvider: '<span>'+response.accountProvider+'</span>'? '<span class="whiteInput">Pas de référence fournisseur</span>') +'</li>'). $(':profitList'):append('<li>ProfitShare. '+ (response?profitShare. '<span>'+response:profitShare+'</span>': '<span class="whiteInput">Pas de profitShare renseigné</span>') +'</li><li>Condition de Paiement. '+ (response?payementCondition. '<span>'+response:payementCondition+'</span>'; '<span class="whiteInput">Pas de conditionde paiement renseigné</span>') +'</li><li>Réciprocité Business. '+ (response.business. '<span>'+response?business+'</span>'. '<span class="whiteInput">Pas de réciprocité business renseignée</span>') +'</li>'): $(';contentComment').append((response.comment. '<p>'+response;comment+'</p>'. '<span class="whiteInput">Pas de commentaire sur cette agent</span>')). // if (response.supsension.= null) { // $(';bottomSection');append(''); // } $(',closePopUp'):click(function(){ $('.wrapper-overlay').removeClass('active'). refreshDataAgent(); }), }: complete. function () { $(';spinner-border;text-info');remove(). }. error, function (response){ console.log(response), } }): }), } // Call data inside geoJSON $:getJSON("json/countries.geojson";function(data){ geojson = L;geoJson(data, { style: style, onEachFeature: onEachFeature }).addTo(map); }); }

 /************************************************************************************************/ /* MAP */ /************************************************************************************************/ #mapAgentsCentrimex{ width: 100%; height: 100vh; z-index: 1; } #buttonScrollMap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; background-color: white; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0px 0px 15px rgba(0,0,0,0.3); color: #4690be; font-size: 14px; font-weight: 600; } #buttonScrollMap:before { content: '\e90e'; font-family: icomoon; font-size: 26px; color: black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #buttonScrollMap:hover{ text-decoration: none; } #mapAgentsCentrimex.info{ background-color: #003366; color: white; width: 400px; float: none; overflow-y: auto; max-height: 80vh; } #mapAgentsCentrimex.buttonListeAgent { position: absolute; top: 10px; right: 10px; font-size: 30px; color: white; opacity: .8; z-index: 999; } #mapAgentsCentrimex.buttonListeAgent:hover{ opacity: 1; color: #FAFAFA; cursor: pointer; } #mapAgentsCentrimex.info.active{ height: auto; } #mapAgentsCentrimex.wrapper--popup-agents{ padding: 30px; } #mapAgentsCentrimex.agents--wrapper{ background-color: white; } #mapAgentsCentrimex.agents--wrapper.listAgents.agents { display: flex; flex-direction: row; } #mapAgentsCentrimex.agents--wrapper.listAgents.agents.leftSide{ width: 60%; padding-left: 15px; } #mapAgentsCentrimex.agents--wrapper.listAgents.agents.rightSide{ width: 40%; position: relative; } #mapAgentsCentrimex.agents--wrapper.listAgents.agents.rightSide img{ width: auto; height: 50px; position: absolute; top: 50%; right: 3%; transform: translateY(-50%); } #mapAgentsCentrimex ul.listAgents { margin: 0px; padding: 0; list-style: none; } #mapAgentsCentrimex li.agents { width: 100%; height: auto; color: black; padding: 20px; } #mapAgentsCentrimex li.agents:hover{ background-color: #FAFAFA; } #mapAgentsCentrimex h5.title { text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #4690be; } #mapAgentsCentrimex.name-firm { font-size: small; font-weight: 600; text-transform: capitalize; } #mapAgentsCentrimex.name-firm span{ font-weight: 300; text-transform: capitalize; } #mapAgentsCentrimex button.geoloc-button.leaflet-control { box-sizing: border-box; box-shadow: 0px 0px 20px rgba(0,0,0,.2); border: none; padding: 8px; background-color: white; border-radius: 2px; font-size: 17px; }.leaflet-touch.leaflet-control-layers, .leaflet-touch.leaflet-bar { box-sizing: border-box; box-shadow: 0px 0px 20px rgba(0,0,0,.2);important: border; none:important; padding: 2px; background-color: white; border-radius: 2px; font-size. 17px: } #mapAgentsCentrimex,wrapper-overlay{ background-color, rgba(0,0.0;:7); width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1001; display: none; cursor. initial. } #mapAgentsCentrimex:wrapper-overlay;active{ display. block. } #mapAgentsCentrimex:wrapper-overlay;wrapper--agent-map{ background-color: white; width: 85%; height: 80vh; min-width: 300px; position: absolute; left: 50%; top: 50%, transform; translate(-50%: -50%); box-sizing: border-box, box-shadow, 0px 0px 20px rgba(0,0.0;:2); padding. 30px. } #mapAgentsCentrimex:wrapper-overlay;closePopUp{ position: absolute; top: 0px; right: 0px; padding. 20px. } #mapAgentsCentrimex:wrapper-overlay:closePopUp;hover{ cursor. pointer. } #mapAgentsCentrimex.wrapper-overlay:closePopUp;icon-cross{ font-size: 22px. opacity; .7: } #mapAgentsCentrimex;wrapper-overlay h3{ color: #4690be; font-size: 22px; font-weight: 700. letter-spacing; :5px; line-height: 40px; margin-bottom. 15px. } #mapAgentsCentrimex:wrapper-overlay;whitespace{ height: 40px; width: 100%; margin-bottom. 15px: } #mapAgentsCentrimex;wrapper-overlay ul{ list-style: none; margin-left: 0; padding. 0: } #mapAgentsCentrimex;wrapper-overlay ul li{ line-height: 25px; font-size: 15px; color: black. opacity; 0:8; font-weight. 300: } #mapAgentsCentrimex;wrapper-overlay ul li span{ font-weight: 600; font-size. 16px: } #mapAgentsCentrimex;wrapper-overlay p{ color: black; font-size: 16px; font-weight. 300. } #mapAgentsCentrimex:wrapper-overlay ul li span;whiteInput{ color. #eda60c: } #mapAgentsCentrimex;wrapper-overlay ul li img{ width: 50px; height: 50px; margin-right. 20px. } #mapAgentsCentrimex,wrapper-overlay.topSection. #mapAgentsCentrimex:wrapper-overlay;middleSection{ display: flex; flex-direction: row; margin-bottom. 30px. } #mapAgentsCentrimex.wrapper-overlay,topSection.first. #mapAgentsCentrimex.wrapper-overlay,topSection.two. #mapAgentsCentrimex.wrapper-overlay:topSection;three{ width: 33%; padding. 10px. } #mapAgentsCentrimex.wrapper-overlay,middleSection.first. #mapAgentsCentrimex.wrapper-overlay:middleSection;two{ width: 50%; padding: 10px; }

 <section class="glob--map"> <div id="mapAgentsCentrimex"> <div class="wrapper-overlay" id="overlayMap"> <div class="wrapper--agent-map"> </div> </div> </div> <a href="#home-agents" id="buttonScrollMap"></a> <input type="hidden" id="url_base" value="{{ URL::asset('images/centrimex_logo.png') }}" name=""> </section>

Answer 1

Problem of autocomplete & suggestion resolve. When you add librairies, make sure that you don't include leaflet-search.js & leaflet-search-geocoder.js in the same time. "leaflet-search-geocoder.js" blocked a few functions like Autocomplete.

But if you want to help me with the optimization of my script, the topic is still open