At UI Builder, we will have data table and Mapbox Component.
when data records is clicked, I want to display SourceLocation and DestinationLocation in Map as Markers.
I managed to get customer locations on details page on record selected in data table.
I am trying to get lat,long from record and set to map center as center: [lng,lat], but no luck. How to retreive Appdata variables from javascript or get value from html element?
My logic and Javascript code are here.
const mapboxgl = await BackendlessUI.requireModule( "https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js" )
var lat = document.getElementById("clat").value;
var lng = document.getElementById("clong").value;
mapboxgl.accessToken = 'pk.eyJ1IjoiZm1zYXBwIiwiYSI6ImNsMnF2MWVhOTAxbzAza280cDlkNms0cDEifQ.uX6T0qY_1yY1jAvj3FYuMw';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [lng,lat], // starting position [lng, lat]
zoom: 9 // starting zoom
});
You could pass them as arguments to the Custom Code block.
First of all, I will recommend you to use Print blocks to debug what values you pass. For example, I’m not sure if selectedCustomer exists in On Page Enter phase.
Also, I do not clearly understand why you need values from the HTML element. Does on Change handler doesn’t match your needs?
My Next Step is to load all the SourceLocations(POINT) from TESTDB Table into map as mulple markers. How do I pass geojason object to customer code ?
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtaGVybWVzIiwiYSI6ImNpbGxjeGhmYzVvMm52bm1jdmx0NmtvbXoifQ.uf5gBnnbU05bnaw7atDu9A';
let map = new mapboxgl.Map({
container: 'travel-map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 3,
center: [-95.7129, 37.0902],
scrollZoom: false,
});
map.on('load', function () {
var url = "https://samhermes.co/content/wp-json/wp/v2/locations";
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.onload = function() {
var locations = JSON.parse(xhr.responseText);
var features = Array()
var latlng = Array()
locations.forEach(function(element) {
feature = {
'type' : 'Feature',
'geometry' : {
'type' : 'Point',
'coordinates' : [ element.fields.coordinates.lng, element.fields.coordinates.lat ]
},
'properties' : {
'title' : element.title.rendered,
'visits' : element.fields.number_of_visits
}
}
features.push(feature)
})
map.addSource("locations", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": features
}
})
features.forEach(function(marker) {
var popup = new mapboxgl.Popup()
.setHTML('<div style="padding:0.3rem 0.3rem 0;text-align:center;">'
+ '<h2 style="font-size:16px;margin:0 0 0.3rem;">' + marker.properties.title + '</h2>'
+ '<p style="font-size:12px;margin:0;">Visits: ' + marker.properties.visits + '</p></div>');
new mapboxgl.Marker()
.setLngLat(marker.geometry.coordinates)
.setPopup(popup)
.addTo(map);
});
}
xhr.send();
});
I want to replace this code with backendless query or api call. Please help
var url = "https://samhermes.co/content/wp-json/wp/v2/locations";
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.onload = function() {
var locations = JSON.parse(xhr.responseText);
Could you please help code logic for passing geolocations (mulitple locations) to custom code block? I want to get all the locations from SNGPS Columns
