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

Mashiane · Jun 28, 2021

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 · Jun 28, 2021

Mashiane said:
Off course, you dont need to worry about all of this, as long as it just does what its meant to do.

I just decided to share this due to appreciating the kind of engine we are dealing with. Some parts of the whole are easy and some parts not so much.

The beauty of it all is that, you do it once and it works and you move on to something else.

Thanks.

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

Mashiane · Jun 28, 2021

magdoz said:
Do you Dear more money to develop your platform ? Can I help with that ?

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.

magdoz · Jun 28, 2021

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.

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,...

,

Mashiane · Jun 28, 2021

magdoz said:
MQTT Protocol would be nice if you can implement !

Yes it would be!

BANanoMQTT, unless I am confusing something BANanoMQTT is just a client interface that uses web-sockets.

magdoz · Jun 28, 2021

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.

Wrong ! No Donations To Me ! Keep your donations to BANono guys ! Thanks !

alwaysbusy · Jun 28, 2021

Mashiane said:
BANanoMQTT is just a client interface that uses web-sockets

Correct. Javascript can not use 'normal' TCP sockets for security reasons. It can use the WebSocket version.

Mashiane · Jun 28, 2021

magdoz said:
Wrong ! No Donations To Me ! Keep your donations to BANono guys ! Thanks !

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 · Jun 28, 2021

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.

ok. i really don't understand your policy, but who cares !

Mashiane · Jun 28, 2021

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 · Jun 28, 2021

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 · Jun 28, 2021

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!

TILogistic · Jun 28, 2021

How can I add other plugins for leaflet?

Plugins - Leaflet - a JavaScript library for interactive maps

leafletjs.com

Mashiane · Jun 28, 2021

oparra said:
How can I add other plugins for leaflet?

Plugins - Leaflet - a JavaScript library for interactive maps

leafletjs.com

Which plug in are you interested in so that I can have a go at it?.

Thanks

Mashiane · Jun 28, 2021

Mashiane said:
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!

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

Enjoy!

Mashiane · Jun 28, 2021

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 · Jun 28, 2021

Leaflet Image Markers

Example

B4X:

VLeaflet1.AddMarkerIcon("ano1", "Ano", 47.313221, -1.319483, "./assets/sponget.png", 42, 42, 4, 30)

Display

Mashiane · Jun 29, 2021

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 · Jun 29, 2021

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 · Jun 29, 2021

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..

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

Expert

Member

Expert

Member

Expert

Member

Expert

Expert

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads