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
})
);