B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane

Expert
Licensed User
Longtime User
Using the LeafLet component in real-life

1. Add the component via the abstract designer.
2. Generate members.

'**** THIS IS VERY CRUCIAL
3. On the Ready_Event, tell Vuetify that when it heart-beats next time on this page, I want to run the addMarker sub.

B4X: 
Private Sub VLeaflet1_Ready
    Log("VLeaflet1_Ready")
    vuetify.SetNextTick(Me, "addMarker")
End Sub

What this does is when the map is ready to receive markers, polygons and polylines etc, it must now.

4. Now create the addMarker sub-routine, to add the stuff you need.

B4X: 
'on next heart-beat
Sub addMarker
    Log("addMarker")
    VLeaflet1.AddMarker("1", "Mashy", 47.313221, -1.319483)
    '
    VLeaflet1.AddCircle("2", "Mashy's Circle", 47.313220, -1.0482, "red", 4500)
    '
    VLeaflet1.AddPolygon("3", "Mashy's Polygon", "green")
    '
    VLeaflet1.AddPolygonLatLngMap("3", CreateMap(47.2263299: -1.6222, _
    47.21024000000001: -1.6270065, _
    47.1969447: -1.6136169, _
    47.18527929999999: -1.6143036, _
    47.1794457: -1.6098404, _
    47.1775788: -1.5985107, _
    47.1676598: -1.5753365, _
    47.1593731: -1.5521622, _
    47.1593731: -1.5319061, _
    47.1722111: -1.5143967, _
    47.1960115: -1.4841843, _
    47.2095404: -1.4848709, _
    47.2291277: -1.4683914, _
    47.2533687: -1.5116501, _
    47.2577961: -1.5531921, _
    47.26828069: -1.5621185, _
    47.2657179: -1.589241, _
    47.2589612: -1.6204834, _
    47.237287: -1.6266632, _
    47.2263299: -1.6222))
    '
    VLeaflet1.AddPolyLine("4", "Mashy's Polyline", "green")
    VLeaflet1.AddPolyLineLatLngMap("4", CreateMap(47.334852: -1.509485, _
    47.342596: -1.328731, _
    47.241487: -1.190568, _
    47.234787: -1.358337))
   
   
    VLeaflet1.Refresh(leaf)
    'show the view at this location   
    VLeaflet1.SetView(leaf, 47.313220, -1.319482, 8)
End Sub

5. Detecting map size changes.

B4X: 
Private Sub VLeaflet1_Resize
    leaf.refs = vuetify.getrefs
    VLeaflet1.resize(leaf)
End Sub

This produces this for now...




Those are the terms and conditions for this to work within the Vuetify namespace.

Ta!
 

magdoz

Member
Licensed User
Do you Dear more money to develop your platform ? Can I help with that ?
 

magdoz

Member
Licensed User
Mashiane said:
Anyone who likes my work is welcome to donate if they want to @magdoz.

The project is open source and free in line with the Terms and Conditions for using BANano.

Thank you.
Click to expand...
MQTT Protocol would be nice if you can implement ! I got the banano MQtt Server working at my vps server/ save data to MySql db,...


,
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
magdoz said:
Wrong ! No Donations To Me ! Keep your donations to BANono guys ! Thanks !
Click to expand...
With due respect @magdoz, I can safely confirm that I am receiving donations from members of the forum for the work I post here. I also sell products in the forum which I receive fees for. Please if you don't mind, the donations issue is now closed.
 

magdoz

Member
Licensed User
Mashiane said:
With due respect @magdoz, I can safely confirm that I am receiving donations from members of the forum for the work I post here. I also sell products in the forum which I receive fees for. Please if you don't mind, the donations issue is now closed.
Click to expand...
ok. i really don't understand your policy, but who cares !
 

Mashiane

Expert
Licensed User
Longtime User
LeafLet Update

Please also note this script in App_Start after BANano.Build.

B4X: 
Dim sPath As String = $"${Publish}\${AppName}\assets"$
    Dim tPath As String = $"${Publish}\${AppName}\styles"$
    File.MakeDir(tPath, "images")
    '
    tPath = $"${tPath}\images"$
    '
    File.Copy(sPath, "layers.png", tPath, "layers.png")
    File.Copy(sPath, "layers-2x.png", tPath, "layers-2x.png")
    File.Copy(sPath, "marker-icon.png", tPath, "marker-icon.png")
    File.Copy(sPath, "marker-icon-2x.png", tPath, "marker-icon-2x.png")
    File.Copy(sPath, "marker-shadow.png", tPath, "marker-shadow.png")

I was just not planning to edit the leaflet files for this. Perhaps there should be some settings I do somewhere will find out.

Releasing a new version for you to test.
 

Mashiane

Expert
Licensed User
Longtime User
Version 5.47 Out with VueLeaflet Maps

Download External Libraries
Download New Awesome Kitchen Sink

The VueLeaflet code is borrowed from my ABM code, https://www.b4x.com/android/forum/threads/abmaterial-mapping-with-leaflet-js.94624/

So you will see similarities.

Will add functionality for custom markers later today. The rectangle is not working, there is some note about some deprecated "styling" or something.

The source code example is on the Other > Leaflet part of the Kitchen Sink.

Later!
 

Mashiane

Expert
Licensed User
Longtime User
VLeafLet GeoJSON in the bag!




Example Source Code

B4X: 
VLeaflet1.AddGeoJSON("6", "Mashy's GeoJson", "./assets/communes-pays-de-la-loire.geojson")
    'VLeaflet1.AddGeoJSON("6", "GeoJSON", "https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson")

We are almost done!
 

Mashiane

Expert
Licensed User
Longtime User
Please re-download, i see i accidentally created bugs on the table and dialog. now been fixed.

Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User
LeafLet Colored Markers

We have added the color coded icons as indicated here, https://github.com/pointhi/leaflet-color-markers

Example:

B4X: 
VLeaflet1.AddMarkerIconColor("ano", "Leaflet Map", 47.313221, -1.319483, VLeaflet1.COLOR_BLACK)

Display



Use the provided color constands as these are hard_coded
 

Mashiane

Expert
Licensed User
Longtime User
We have updated to 5.48

Download External Libraries
Download New Awesome Kitchen Sink

We also show you how to create an input dialog from scratch.



As we are done with leaflet for now, our journey now starts BANanoServer experiment.

We need all the help we can get with that.

PM Me for any additional stuff you need outside of the framework or contact me via whatsapp, +27 81 736 6739.

Regards

Anele 'Mashy' Mbanga
 

Mashiane

Expert
Licensed User
Longtime User
A look at Pre-Defined Dialogs - Part 1

Pre-defined dialogs come with a title bar, the container and action buttons sections. You create these with the VMsgBox. When empty, here is the look..



A VMsgBox, is a VDialog with a VCard, a VCardTitle, a VCardText, VCardActions and 2 VBtns.

1. The DialogType should be input if it will have input components. To just show messages, it should be message.
2. In the Title property, enter the title that should appear.
3. If your form will have its own buttons, turn on CustomActions. This ensures that the Close/Register buttons in this case dont appear.
4. OkCaption is the text to appear on the OK button (on the right). I have used Register in this case.
5. The Rounded property defines how your dialog should appear, in this case I have used top-xl for the radious top.
6. You can continue setting up the other properties. Most properties are derived from the VDialog0 custom element.
7. You show the dialog with .UpdateVisible(?, true)
8. Generate members for the OK and CANCEL button click, they fire when such is clicked.
 

Mashiane

Expert
Licensed User
Longtime User
A look at Pre-Defined Dialogs - Part 2

With our VMsgBox in another layout, we create another layout where we will put design the contents of the dialog / vmsgbox.

We want the content to be validated, we will use a VForm as a parent container for our input components.




1. Load the layout with the VMsgBox first.
2. Load the layout with the elements that should be inside the VMsgBox.
3. Bind the elements to the state

B4X: 
'load the layout with the vmsgbox dialog
    banano.LoadLayout(two.Here, "mydialog2")
    'add the contents of the vmsgbox dialog inside the vmsgbox
    banano.LoadLayout(VMsgBox1.Container.Here, "mydialog2input")
    '
    VMsgBox1.BindState(two)
    txtemail.BindState(two)
    txtFirstName.BindState(two)
    txtlastname.BindState(two)
    txtTelephone.BindState(two)
    userform.BindState(two)

Now the new design looks like..

 
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation BANano File Sharer Dashboard
Replies
2
Views
2K
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
61K
NGUYEN TUAN ANH
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
  • Article
Share My Creation [BANano] WebSites, WebApps, Frameworks Created with BANano
2 3
Replies
43
Views
7K
Mashiane
  • Article
B4J Tutorial [BANano] v2: (2) B4J Abstract Designer
Replies
0
Views
5K
alwaysbusy
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…