B4J Library [BANano] Leaflet-Wrapper

Hello,

I am pleased to announce my first library for BANano.

This is a wrapper that allows you to use the functionality of the JavaScript library Leaflet with B4J in conjunction with BANano.

What is Leaflet? https://en.wikipedia.org/wiki/Leaflet_(software)

Leaflet homepage: https://leafletjs.com/

A demo says more than a thousand words: http://banano.tuebben.de/leaflet/demo/

The code looks like this:

LeafletMap.Initialize("")

LeafletMap.SetStyle($"{ "width": "800px", "height": "600px" }"$)

' add a TileLayer...

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)

And this is the result:

Installation:

1.) Download and install BANano (Version 1.08 or higher)

2.) Download the attached zip, extract its content, load and run Leaflet.b4j

My special thanks go to Alain, who made the BANano library available to us!

(and of course also to Erel for his B4J (but I don't really need to mention that separately ))

Have fun ... Peter

 

[alwaysbusy]

This is absolutely amazing Peter! Very cool to have the first BANano 'plugin'

There is so much stuff in your demos that demonstrate all kind of BANano methods, and a great example the usage of BANanoObject. This will be very helpful for everyone who wants to take BANano for a spin.

 

[Mashiane]

Thanks @Kiffi , last month I was testing how to load shape files on Leaflet with a plugin i got from their site. It worked very well, perhaps if you don't mind, can you please include such on this lib. I know its a custom component that one can extend themselves, but as a newbie to this and you as someone who seems to have more green lights, please do us a solid?

Assumptions:

1. I store my shape file in a folder called gis.
2. Each shapefile spec is stored in shapeFiles map as there can be more than 1 shapefile that can be loaded

Usage:

shape.AddShapeFile("rsaadmin","gis/ZAF_adm.zip")

Method inside my b4j class to build the script for leaflet (on the render code)

'build the shapefiles
private Sub BuildShapeFiles() As String
    Dim sb As StringBuilder
    sb.Initialize
    For Each shpKey As String In shapeFiles.Keys
        Dim shpFile As String = shapeFiles.Get(shpKey)
        Dim script As String = $"var shpfile${shpKey} = new L.Shapefile('${shpFile}');
        shpfile${shpKey}.addTo(map${CompID});"$
        
        
        Dim script As String = $"var geo${shpKey} = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}}).addTo(map${CompID});
      var base${shpKey} = '${shpFile}';
        shp(base${shpKey}).then(function(data){
        geo${shpKey}.addData(data);
        });"$
        sb.Append(script).Append(CRLF)
    Next
    Return sb.tostring
End Sub

Js Files: leaflet.shpfile.js & shp.min.js

Thanks in advance for your co-operation.

 

[alwaysbusy]

This will probably have to be done with inline javascript, as it seems to use a promise (something BANano does not support yet)

shp(base${shpKey}).then(function(data){
...

 

[Kiffi]

last month I was testing how to load shape files on Leaflet with a plugin i got from their site. It worked very well, perhaps if you don't mind, can you please include such on this lib.

I don't know very much about shapes. So it would be nice if you could provide me with a code sample so that I don't have to do so much research.

Greetings ... Peter

 

[Mashiane]

I don't know very much about shapes. So it would be nice if you could provide me with a code sample so that I don't have to do so much research.

Greetings ... Peter

Thanks, the original scripts are sourced from this github, https://github.com/calvinmetcalf/leaflet.shapefile

I think perhaps looking at the index.html file can provide some more details. Thanks.

 

[francisco duran]

Hello, I am testing the application that I develop and it does what I need, but when I compile it and run it in local mode, no maps appear anywhere, only the buttons are visible. Could you help me with some explanation on how I make it work.
Thank you so much