Count not get Measure distance in Map

UI Builder
1

Dear Team

I got some issue with getting measure distance on mapbox. Unable to display line.
I am tring to get the same as this one

image
image898×675 83.3 KB

I have implemented Mapbox GL GS with custom code block. but unble to display lines and points in map.

image
image646×574 69.1 KB

I think problem could be html elements. Can directly insert in script or css?
How to display UI element on rendered map?

<style>
.distance-container {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
 
.distance-container > * {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 11px;
line-height: 18px;
display: block;
margin: 0;
padding: 5px 10px;
border-radius: 3px;
}
</style>
 
<div id="map"></div>
<div id="distance" class="distance-container"></div>

image
image746×295 28.3 KB

2

Hello @FMS_APP

I think problem could be html elements. Can directly insert in script or css?
How to display UI element on rendered map?

I believe it should be added with using the library API

can you see any warnings/errors in the browser dev tool?

Btw, the CustomCodeBlock is not always suitable for using 3rd party libraries, instead, try to implement your own custom component using the library Custom UI Components in Backendless UI Builder

You can find more samples in the following repo ui-builder-library/components at main · Backendless/ui-builder-library · GitHub

Regards, Vlad

3

I got this error

image
image757×870 53.5 KB

Error: The layer 'measure-points' does not exist in the map's style and cannot be queried for features.
    at Vt.queryRenderedFeatures (style.js:1282:46)
    at Map.queryRenderedFeatures (map.js:1401:27)
    at Map.<anonymous> (bundle.js:213:27)
    at Map.fire (evented.js:129:26)
    at Uo.mousemove (map_event.js:126:19)
    at yr.handleEvent (handler_manager.js:381:58)
fire @ evented.js:150
2bundle.js:171 
        
       Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at Map.<anonymous> (bundle.js:171:34)
    at Map.fire (evented.js:129:26)
    at Bo.click (map_event.js:51:19)
    at yr.handleEvent (handler_manager.js:381:58)
4

it seems like these errors come from the library

5

Can you just show example of how to pass variable/object into custome UI components?

6

You could find needed information in Component Properties paragraph.

Regards, Dima.