Could not display Geocoder search in custom component

Dear Team
I am trying to add search bar into my custom component which accept geographic [coordinates] in the search query as in this guide.
Accept coordinates as input to a geocoder | Mapbox GL JS | Mapbox

This is my custom code in backendless. But no luck to display search bar.
Is there anyone to help me fix this issue?

const mapboxgl = await BackendlessUI.requireModule( "https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js" )
const MapboxGeocoder = await BackendlessUI.requireModule( "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" )


mapboxgl.accessToken = 'pk.eyJ1IjoiZm1zYXBwIiwiYSI6ImNsMnF2MWVhOTAxbzAza280cDlkNms0cDEifQ.uX6T0qY_1yY1jAvj3FYuMw';
const map = new mapboxgl.Map({
  container: 'map2', // container ID
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [clong,clat], // starting position [lng, lat]
  zoom: 13 // starting zoom
});

map.on('load', () => {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
(error, image) => {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
// feature for FAT(SN)Box Location
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
clong, clat
]
},
'properties': {
'title': FID
}
},
{
// feature for FAT(SN)Box Location
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
96.00001, 16.0002
]
},
'properties': {
'title': ADDID
}
},
{
// feature for Customer Location
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [slong,slat]
},
'properties': {
'title': CID
}
}
]
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});

map.addControl(new mapboxgl.NavigationControl())

/* Given a query in the form "lng, lat" or "lat, lng"
* returns the matching geographic coordinate(s)
* as search results in carmen geojson format,
* https://github.com/mapbox/carmen/blob/master/carmen-geojson.md */
const coordinatesGeocoder = function (query) {
// Match anything which looks like
// decimal degrees coordinate pair.
const matches = query.match(
/^[ ]*(?:Lat: )?(-?\d+\.?\d*)[, ]+(?:Lng: )?(-?\d+\.?\d*)[ ]*$/i
);
if (!matches) {
return null;
}
 
function coordinateFeature(lng, lat) {
return {
center: [lng, lat],
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
place_name: 'Lat: ' + lat + ' Lng: ' + lng,
place_type: ['coordinate'],
properties: {},
type: 'Feature'
};
}
 
const coord1 = Number(matches[1]);
const coord2 = Number(matches[2]);
const geocodes = [];
 
if (coord1 < -90 || coord1 > 90) {
// must be lng, lat
geocodes.push(coordinateFeature(coord1, coord2));
}
 
if (coord2 < -90 || coord2 > 90) {
// must be lat, lng
geocodes.push(coordinateFeature(coord2, coord1));
}
 
if (geocodes.length === 0) {
// else could be either lng, lat or lat, lng
geocodes.push(coordinateFeature(coord1, coord2));
geocodes.push(coordinateFeature(coord2, coord1));
}
 
return geocodes;
};
 

// Add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: coordinatesGeocoder,
zoom: 4,
placeholder: 'Try: -40, 170',
mapboxgl: mapboxgl,
reverseGeocode: true
})
);

Hello @FMS_APP

Could you please provide a link to the test page?

My app id is 96A33344-0C65-AC14-FF0D-C71CD4DDCA00
Test Link is here as well.

https://cleanneed.backendless.app/api/files/ui-builder/containers/default/index.html?page=OMHOME

Step 1: Click the record
Step 2: Go to Port1, Click Show button
Step 3: Mapbox Component will display in below blocked “map2”
There initail map is displayed but I am not able to load search bar into mapbox.
Is that something wrong in BackendlessUI.requireModule?


have you seen these errors on the browser’s dev tool?

Yes. but no idea how to fix it. any clue?

It seems like the issue is with the 3rd party library not with Backendless, have you tried to contact their community?

please create a test page with minimum UI/Logic just to reproduce the issue and we will take a look