Display Geo Points from Data Table/Database to Mapbox UI Component

Hi Team

I have created TESTDB with two geo points columns called SourceLocation and DestinationLocation.


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 have followed How to import the MapBox component into a UI Builder page - howto / cookbook - Backendless Support and managed to get mapbox display on UI but no idea how to retreive and display points data from data table or database into Mapbox dynamically.
Please could you share some details how can I get this done.

Best regards
Nyi Nyi Lin

Hi Team

Any update would be much appreciated. Thanks

Hi, @FMS_APP

Try to implement the next logic:

Regards,
Marina

Thanks. But we could not use GoogleMaps, we will use Mapbox. Can you help some details with Mapbox ?

@FMS_APP
You could find code samples here

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?

selectedCustomer data is showing in page.

I just want to pass clat and clong coordinates to Center[lng,lat] so that customer location is in center map.

Is there any way to get those data from javascript without setting varaibles?

Best regards
Nyi Nyi Lin

I got it right by passing too custom code block.
Now I can display sucessfully load two markers (source and destination) at map.

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

Best regards
Nyi Nyi Lin

How do I pass geojason object to customer code ?

You could pass them as arguments to Custom Code block. For example as below.

image

image

I want to replace this code with backendless query or api call. Please help

You could make this request using codeless blocks, which should be easier than calling JS-SDK or native request from Custom Code in UI-Builder.

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

Unfortunately, I can’t do it for you. At the support forum, we just answer general questions and helps with issues.

Logic what you want looks pretty basic, and you could find all the needed information in our documentation and videos.
https://backendless.com/docs/uibuilder/index.html

But if you want, our developers can help you on a consulting basis, for this contact sales@backendless.com

Regards, Dima