B4J Question [BANAnoVuetifyAD3] BANanoLeaflet Map in BANAnoVuetifyAD3?

LJG

Member
Is it possible to integrate a BANanoLeaflet map in BANAnoVuetifyAD3?

I tried and all I get is a blank map screen. I put the BANanoLeaflet map in a BANAnoVuetifyAD3 VueElement (div) but all I get is the blank map that is in the attached image. The marker, zoom controls, and the Leaflet link show up on the blank map, but the maker pop-ups do not show up. Thanks for your help.

map_issue.jpg


Here is the code (containermap is a VueElement)::
    '//LEAFLET MAP
    Dim targetid As String
    targetid = containermap.id

    home.GetVueElement(Me, "#" & targetid).Empty
    LeafletMap.Initialize("#" & targetid)
    LeafletMap.SetStyle($"{ "width": "230px", "height": "200px" }"$)
    
    Dim TileLayer As BANanoLeafletTileLayer
    TileLayer.Initialize
    LeafletMap.AddTileLayer(TileLayer)
    LeafletMap.PanTo(48.856613, 2.352222)
    LeafletMap.SetZoom(5)
    ' Add a marker
    Dim myMarker As BANanoLeafletMarker
    myMarker.Initialize2(48.856613, 2.352222)
    myMarker.SetDraggable(True)
    myMarker.SetAutoPan(True)
    myMarker.SetTooltip("I'm a Tooltip")
    myMarker.SetPopup("I'm a Popup")
    LeafletMap.AddMarker(myMarker)
 

LJG

Member
SOLUTION:

Thankfully, Mashiane included access to Vue's SetMount because that is the key to making the BANano leaflet library work within a BANAnoVuetifyAD3 VueElement. I am assuming that this would be the same procedure when adding other outside library components (e.g., the BANano Charts.js library - https://www.b4x.com/android/forum/t...-line-of-code-using-uoecharts.104942/#content).

1) Add the BANano leaflet library (https://www.b4x.com/android/forum/threads/banano-leaflet-wrapper.100389/) to your project.
2) Add a plain VueElement with a "div" tag in the Visual Designer.
3) Note that I had to add "z-index": "0" to the LeafletMap.SetStyle to make sure that the map was behind the app drawer.
4) Next, see the code below to implement (in this example, I added a test map on the Home page of a BANAnoVuetifyAD3 project):

Add a BANano Leaflet library map to a BANanoVuetifyAD3 VueElement:
'Static code module
Sub Process_Globals  
    Public vuetify As VuetifyApp
    Public home As VueComponent
    Public path As String
    Public name As String = "home"
    Private banano As BANano
   
    Private LeafletMap As BANanoLeafletMap
    Private mapcontainer As VueElement
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    home.Initialize(Me, name)
    home.vuetify = vuetify
    'make this the start page
    home.Path = "/"
    path = home.path
   
    'build the page html here
    banano.LoadLayout(home.Here, "home")
   
    'add a Leaflet map to the VueElement "div" container at runtime
    home.SetMounted(Me, "onmounted", Null)
   
    'add this route component to the app
    vuetify.AddRoute(home)
   
End Sub

Sub onmounted
    banano.GetElement("#mapcontainer").Empty
    LeafletMap.Initialize("#mapcontainer")
    LeafletMap.SetStyle($"{ "width": "100%", "height": "230px", "z-index": "0" }"$)
    ' add a TileLayer...
    Dim TileLayer As BANanoLeafletTileLayer
    TileLayer.Initialize
    LeafletMap.AddTileLayer(TileLayer)
    LeafletMap.PanTo(50.703416,6.634032)
    LeafletMap.SetZoom(5)
End Sub
 

LJG

Member
Hi

I will look into this, currently only Google Maps is built in.
Thanks Mashiane, but for now, the current method mentioned above is working well. I‘m actually looking forward to using BANanoVuetifyAD3 in your upcoming BANanoVuetifyAD3 BANanoServer update. That’s going to be amazing. Thanks again for all of your good work!
 

LJG

Member
Noted. I however have not made any concessions about the Banano Server. My attempts so far have failed in it and I don't have any high hopes for it as yet.
Hi Mashiane, maybe we can all help. What are the main issues that you are running into when trying to get BANanoVuetifyAD3 working in the BANanoServer environment? I’m still learning but I am willing to test and research to help solve the issues. And maybe we can get Alain to help. Wishing you the best!
 

Mashiane

Expert
Licensed User
Hi @LJG

The best thing that could happen for all of us, is at least have a working JRDC BANanoServer CRUD example, that could help us to refer to. Sadly there is everything else except such an example. The implementation i did initially is still PHP based and after I could not get it working, I just parked BANanoServer.

If you can crack that i.e. JRDC especially without the BVAD3 namespace, then I will have something to work on top of and tweak to work with BVAD3.

Thanks.
 
Top