B4J Library [Web][SithasoLeafLet] - Leaflet Maps via Abstract Designer for your BANano Projects

Hi Fam

This stand-alone b4xlib for leaflet that you can drop in your abstract designer, source code included.

 

[Mashiane]

Adding A Circle

Private Sub btnAddCircle_Click (e As BANanoEvent)
    e.PreventDefault
    llmap.RemoveCircle("circle1")
    llmap.AddCircle("circle1", 51.508, -0.11, "red", "#f03", 0.5, 500)
    llmap.SetCircleTooltip("circle1", "This is a circle.")
    llmap.SetCirclePopup("circle1", "This is a popup.")
    'llmap.SetView(51.508, -0.11, llmap.Zoom)
    llmap.CircleFitToBounds("circle1")
End Sub

 

[Mashiane]

Add a Marker

Private Sub btnAddMarker_Click (e As BANanoEvent)
    e.PreventDefault
    llmap.RemoveMarker("el")
    llmap.AddMarker("el", -33.01529, 27.91162)
    llmap.SetMarkerTooltip("el", "East London Tooltip")
    llmap.SetMarkerPopup("el", "East London Popup")
    llmap.SetMarkerDraggable("el", True)
    llmap.SetMarkerAutoPan("el", True)
    llmap.SetView(-33.01529, 27.91162, llmap.Zoom)
End Sub

 

[Mashiane]

Add Polygon

Private Sub btnAddPolygon_Click (e As BANanoEvent)
    e.PreventDefault
    llmap.RemovePolygon("p1")
    llmap.AddPolygon("p1", "red", "#f03", 0.5)
    llmap.SetPolygonTooltip("p1", "This is a polygon tooltip!")
    llmap.SetPolygonPopUp("p1", "This is a polygon popup!")
    llmap.AddPolygonMarker("p1", 51.509, -0.08)
    llmap.AddPolygonMarker("p1", 51.503, -0.06)
    llmap.AddPolygonMarker("p1", 51.51, -0.047)
    llmap.RefreshPolygon("p1")
    llmap.PolygonFitToBounds("p1")
'    llmap.SetView(51.509, -0.08, llmap.Zoom)
End Sub

 

[Mashiane]

Add Polyline

Private Sub btnAddPolyline_Click (e As BANanoEvent)
    e.PreventDefault
    llmap.RemovePolyLine("pl1")
    llmap.AddPolyline("pl1", "blue", 4, 0.8)
    llmap.AddPolylineMarker("pl1", 48.8566, 2.3522)
    llmap.AddPolylineMarker("pl1", 48.8570, 2.3540)
    llmap.AddPolylineMarker("pl1", 48.8585, 2.3510)
    llmap.AddPolylineMarker("pl1", 48.8575, 2.3480)
    llmap.AddPolylineMarker("pl1", 48.8560, 2.3495)
    llmap.AddPolylineMarker("pl1", 48.8555, 2.3518)
    llmap.RefreshPolyline("pl1")
    llmap.PolylineFitToBounds("pl1")
'    llmap.SetView(48.8566, 2.3522, llmap.Zoom)
End Sub

 

[sdleidel]

How i remove the Rectangle ?
added with addRectangle

 

[offendedfiggy]

How do I get rid of the rectangle? incorporated with addRectangular?

Sprunki​

 

[Mashiane]

There should be a removeRect??? Method somewhere in the library. Will check.

 

[Mashiane]

I see I left out this method.

Sub RemoveRectangle(markerID As String)
    markerID = UI.CleanID(markerID)
    If rectangles.ContainsKey(markerID) = False Then Return
    Dim MarkerObject As BANanoObject = rectangles.Get(markerID)
    MapObject.RunMethod("removeLayer", MarkerObject)
    rectangles.Remove(markerID)
End Sub

 

[sdleidel]

You add it to the lib ?

 

[Mashiane]

You add it to the lib ?

Yes new version on first post including it.

 

[billydsanchez298]

Building the maps visually in the Abstract Designer beats wrestling with Leaflet’s raw JavaScript API. I’ve spent hours debugging map markers in plain BANano, so having this wrapped as a b4xlib with source included is appealing. Does the designer handle responsive breakpoints properly?

<a href="https://nano-banana2.com/
">nano-banana2</a>

 

[Mashiane]

<a href="https://nano-banana2.com/
">nano-banana2</a>

Thanks for the compliments and its a pleasure.

Just confused about the inclusion of the nano-banan2, an ai link which has nothing to do with BANano in this forum.

Does the designer handle responsive breakpoints properly?

Do you mean anchors? See the dots in the screens in the first post.

 

[aeric]

I thought new member cannot post hyperlinks in first post.