B4J Question [BANAnoVuetifyAD3] BANanoLeaflet Map in BANAnoVuetifyAD3?

[LJG]

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.

    '//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]

I noted that there is a Vue Leaflet library out there too (Vue2 Leaflet). Interesting, but I hope I can make this work with the current BANano leaflet library (https://www.b4x.com/android/forum/threads/banano-leaflet-wrapper.100389/). Any help would be appreciated, thanks.

 

[LJG]

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

'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

 

[Mashiane]

Hi

I will look into this, currently only Google Maps is built in.

 

[LJG]

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!

 

[Mashiane]

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.

 

[LJG]

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]

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.

 

[LJG]

Wow, Mashiane, I just found some previous work that you did with Leaflet map for ABMaterial (https://www.b4x.com/android/forum/threads/abmaterial-mapping-with-leaflet-js.94624/). That is really impressive … it looks like you already created a “kitchen sink” for Leaflet mapping too! I would love to see that level of mapping power in BVAD3. I‘ve been learning so much from your work and tutorials, thanks again.

 

[Mashiane]

Update:

BANAnoVuetifyAD3 has a built it Abstract Designer based VLeaflet component that you can use. See the New Awesome Kitchen Sink for more details.