B4J Library [ABMaterial]: Mapping with Leaflet.js?

Hi there

This intends to be everything about the Leaflet.js mapping stuff for ABM. Now my thing here will be simple but if anyone is interested, besides the normal plotting of markers etc, what would you like to do?

This is on the cards...

1. Adding markers
2. Adding polylines
3. Adding polygons

You?

PS: If anyone is currently working on this, can you please share what have you done so long for our community? Ta!
 
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Step 1: Testing - For now I need to see if this can display and work in ABM

1. Get your token from https://www.mapbox.com
2. Download leaflet and save it in your custom css & js folder in your www
3. Add the needed links in BuildPage..

B4X: 
page.AddExtraCSSFile("custom/leaflet.css")
    page.AddExtraJavaScriptFile("custom/leaflet.js")

Also ensure the images files are on the custom/css/images folder

3. In ConnectPage

B4X: 
Dim mll As MashLeafLet
    mll.Initialize(page,"mll", 51.505,-0.09, 13)
    mll.ZDepth = ABM.ZDEPTH_1
    mll.Height = "500px"
    mll.MapBoxAccessToken = "your key here"
    mll.MapBoxType = mll.EnumMapBoxType.MapboxComic
    page.Cell(1,1).AddComponent(mll.ABMComp)

4. Output on page...


Comic.png


PopUps

PopUps.gif


Complete Map

CompleteMap.png


NB: This is a learning exercise.

Source Code
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Step 2: Adding some map things

2.1: Adding a Marker

B4X: 
'add a marker
    mll.AddMarker("m1","Anele Mashy Mbanga", 51.5, -0.09)

2.2: Adding a Polygon

B4X: 
'add a polygon
    mll.AddPolygon("p1","A nice polygon")
    mll.AddPolygonMarker("p1", 51.509, -0.08)
    mll.AddPolygonMarker("p1", 51.503, -0.06)
    mll.AddPolygonMarker("p1", 51.51, -0.047)

2.3 Adding a Circle

B4X: 
'add a circle
    mll.AddCircle("c1","<b>Hello world!</b><br />I am a popup.",51.508,-0.11,ABM.COLOR_RED,ABM.COLOR_BLUE,0.5,200)

The complete projected map...

CompleteMap.png
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Useful functions...

Step 3: Geolocate..

Just set the property to True

B4X: 
mll.GeoLocate = True

Geolocate.png


And then the result of this can be trapped and evaluated.

B4X: 
Sub mll_geolocate(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"Geolocate","OK",False,"","")
End Sub

Sub mll_error(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"Error","OK",False,"","")
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Custom Markers with MakiMarkers

So to add custom markers e.g. different colors and icons, one can use this plugin. To use it in the updated library one has to add the following in BuildPage.

B4X: 
page.AddExtraJavaScriptFile("custom/Leaflet.MakiMarkers.js")

Then, after initializing the CustomComponent, turn UseMakiMarkers = True

B4X: 
xxx.UseMakiMarkers = True

With MakiMarkers on, the default marker changes to gray...

Maki.png


You can add a custom marker too, e.g. a beer red medium icon marker

B4X: 
mll.AddMarker1("m1", "Anele Mashy Mbanga", 51.5, -0.09, "beer", MashPlugIns.EnumColors.red, mll.EnumMarkerIconSize.medium)

Beer.png



AddCircle
This method has been added to take the weight of the line when drawing a circle

B4X: 
mll.AddCircle("c1","<b>Hello world!</b><br />I am a popup.", 51.508, -0.11,ABM.COLOR_RED,1,ABM.COLOR_BLUE,0.5,200)

AddPolyGon
More options have been added for these methods, the color, the fill color, with weight etc of the polyline / polygon

B4X: 
mll.AddPolygon("p1", "A nice polygon", False, ABM.COLOR_BROWN,3,1.0,ABM.COLOR_BROWN,0.2)

AddPolyLine
B4X: 
mll.AddPolyLine("pl1","My poly line",False,ABM.COLOR_CYAN,3,1.0,ABM.COLOR_INDIGO,0.2)
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Available MakiIcons Enumeration that you can use...

B4X: 
EnumMakiIcons.aerialway = "aerialway"
EnumMakiIcons.airfield = "airfield"
EnumMakiIcons.airport = "airport"
EnumMakiIcons.alcohol = "alcohol"
EnumMakiIcons.america = "america"
EnumMakiIcons.amusement = "amusement"
EnumMakiIcons.aquarium = "aquarium"
EnumMakiIcons.art = "art"
EnumMakiIcons.attraction = "attraction"
EnumMakiIcons.bakery = "bakery"
EnumMakiIcons.bank = "bank"
EnumMakiIcons.bar = "bar"
EnumMakiIcons.barrier = "barrier"
EnumMakiIcons.baseball = "baseball"
EnumMakiIcons.basketball = "basketball"
EnumMakiIcons.bbq = "bbq"
EnumMakiIcons.beer = "beer"
EnumMakiIcons.bicycle = "bicycle"
EnumMakiIcons.blood = "blood"
EnumMakiIcons.buddhism = "buddhism"
EnumMakiIcons.building = "building"
EnumMakiIcons.bus = "bus"
EnumMakiIcons.cafe = "cafe"
EnumMakiIcons.campsite = "campsite"
EnumMakiIcons.car = "car"
EnumMakiIcons.castle = "castle"
EnumMakiIcons.cemetery = "cemetery"
EnumMakiIcons.cinema = "cinema"
EnumMakiIcons.circle = "circle"
EnumMakiIcons.city = "city"
EnumMakiIcons.clothing = "clothing"
EnumMakiIcons.college = "college"
EnumMakiIcons.commercial = "commercial"
EnumMakiIcons.cricket = "cricket"
EnumMakiIcons.cross = "cross"
EnumMakiIcons.dam = "dam"
EnumMakiIcons.danger = "danger"
EnumMakiIcons.defibrillator = "defibrillator"
EnumMakiIcons.dentist = "dentist"
EnumMakiIcons.doctor = "doctor"
EnumMakiIcons.dog = "dog"
EnumMakiIcons.drinking = "drinking"
EnumMakiIcons.embassy = "embassy"
EnumMakiIcons.emergency = "emergency"
EnumMakiIcons.entrance = "entrance"
EnumMakiIcons.farm = "farm"
EnumMakiIcons.fast = "fast"
EnumMakiIcons.fence = "fence"
EnumMakiIcons.ferry = "ferry"
EnumMakiIcons.fire = "fire"
EnumMakiIcons.florist = "florist"
EnumMakiIcons.fuel = "fuel"
EnumMakiIcons.gaming = "gaming"
EnumMakiIcons.garden = "garden"
EnumMakiIcons.gift = "gift"
EnumMakiIcons.golf = "golf"
EnumMakiIcons.grocery = "grocery"
EnumMakiIcons.hairdresser = "hairdresser"
EnumMakiIcons.harbor = "harbor"
EnumMakiIcons.heart = "heart"
EnumMakiIcons.heliport = "heliport"
EnumMakiIcons.home = "home"
EnumMakiIcons.horse = "horse"
EnumMakiIcons.hospital = "hospital"
EnumMakiIcons.ice = "ice"
EnumMakiIcons.industry = "industry"
EnumMakiIcons.information = "information"
EnumMakiIcons.karaoke = "karaoke"
EnumMakiIcons.landmark = "landmark"
EnumMakiIcons.landuse = "landuse"
EnumMakiIcons.laundry = "laundry"
EnumMakiIcons.library = "library"
EnumMakiIcons.lighthouse = "lighthouse"
EnumMakiIcons.lodging = "lodging"
EnumMakiIcons.logging = "logging"
EnumMakiIcons.marker = "marker"
EnumMakiIcons.mobile = "mobile"
EnumMakiIcons.monument = "monument"
EnumMakiIcons.mountain = "mountain"
EnumMakiIcons.museum = "museum"
EnumMakiIcons.music = "music"
EnumMakiIcons.natural = "natural"
EnumMakiIcons.park = "park"
EnumMakiIcons.parking = "parking"
EnumMakiIcons.pharmacy = "pharmacy"
EnumMakiIcons.picnic = "picnic"
EnumMakiIcons.pitch = "pitch"
EnumMakiIcons.place = "place"
EnumMakiIcons.playground = "playground"
EnumMakiIcons.police = "police"
EnumMakiIcons.post = "post"
EnumMakiIcons.prison = "prison"
EnumMakiIcons.rail = "rail"
EnumMakiIcons.ranger = "ranger"
EnumMakiIcons.recycling = "recycling"
EnumMakiIcons.religious = "religious"
EnumMakiIcons.residential = "residential"
EnumMakiIcons.restaurant = "restaurant"
EnumMakiIcons.roadblock = "roadblock"
EnumMakiIcons.rocket = "rocket"
EnumMakiIcons.school = "school"
EnumMakiIcons.scooter = "scooter"
EnumMakiIcons.shelter = "shelter"
EnumMakiIcons.shop = "shop"
EnumMakiIcons.skiing = "skiing"
EnumMakiIcons.slaughterhouse = "slaughterhouse"
EnumMakiIcons.snowmobile = "snowmobile"
EnumMakiIcons.soccer = "soccer"
EnumMakiIcons.square = "square"
EnumMakiIcons.stadium = "stadium"
EnumMakiIcons.star = "star"
EnumMakiIcons.suitcase = "suitcase"
EnumMakiIcons.sushi = "sushi"
EnumMakiIcons.swimming = "swimming"
EnumMakiIcons.teahouse = "teahouse"
EnumMakiIcons.telephone = "telephone"
EnumMakiIcons.tennis = "tennis"
EnumMakiIcons.theatre = "theatre"
EnumMakiIcons.toilet = "toilet"
EnumMakiIcons.town = "town"
EnumMakiIcons.triangle = "triangle"
EnumMakiIcons.veterinary = "veterinary"
EnumMakiIcons.village = "village"
EnumMakiIcons.volcano = "volcano"
EnumMakiIcons.warehouse = "warehouse"
EnumMakiIcons.waste = "waste"
EnumMakiIcons.water = "water"
EnumMakiIcons.wetland = "wetland"
EnumMakiIcons.wheelchair = "wheelchair"
EnumMakiIcons.zoo = "zoo"
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
An example showing multiple markers using MakiICons...

B4X: 
mll.AddMarker1("m1","<strong>Medium Rocket</strong>", 30.287, -97.72, mll.EnumMakiIcons.rocket,MashPlugIns.EnumColors.blue,mll.EnumMarkerIconSize.medium)
    mll.AddMarker1("m2","<strong>Large Beer</strong>", 30.31096, -97.74277, mll.EnumMakiIcons.beer,MashPlugIns.EnumColors.green,mll.EnumMarkerIconSize.large)
    mll.AddMarker1("m3","<strong>Small Warehouse</strong>", 30.31096, -97.74277, mll.EnumMakiIcons.warehouse,MashPlugIns.EnumColors.yellow,mll.EnumMarkerIconSize.small)
    mll.AddMarker1("m4","<strong>No Icon!</strong>", 30.308064585977814, -97.79387256712653, "",MashPlugIns.EnumColors.amber,"")
    mll.AddMarker("m5","<strong>No Color</strong>", 30.25173261265964, -97.69636890501715)

Multiple.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Trapping click events and getting the LatLng.

LeafClick.gif


In this example, as soon as the marker is clicked, it is added back to the map..., you can then manipulate what you do with it.

First turn the OnClick Property to True

B4X: 
mll.OnClick = True

Then Call the clicked event...

B4X: 
Sub mll_clicked(value As Map)
    Dim valuex As String = value.Get("value")
    Dim latlng As LatLng = mll.Parse(valuex)
    mll.AddMarker(DateTime.Now,DateTime.Now,latlng.lat,latlng.lng)
    mll.refresh
End Sub

The next tutorial will be to try and add custom markers (i.e. own icons, and that should close this topic.)

Happy Coding.
 
J

joulongleu

Active Member
Licensed User
Longtime User
Hi Mashiane::)clicked event is ok,very good,but use AddMarker1 can't display,Try AddMarker is ok,I used Custom Markers with MakiMarkers,Please teach me,thank you.
 

Attachments

  • testmap.png
    testmap.png
    382.8 KB · Views: 333
Last edited:
J

joulongleu

Active Member
Licensed User
Longtime User
Hi Mashiane:I found the problem and changed it to the red part below.(Maybe I won't use MashPlugIns.ABMColorMapInitialize):
mll.AddMarker1("m1", "Anele Mashy Mbanga", 30.287, -97.72, mll.EnumMakiIcons.beer,"#f44336", mll.EnumMarkerIconSize.medium)
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
joulongleu said:
Hi Mashiane:I found the problem and changed it to the red part below.(Maybe I won't use MashPlugIns.ABMColorMapInitialize):
mll.AddMarker1("m1", "Anele Mashy Mbanga", 30.287, -97.72, mll.EnumMakiIcons.beer,"#f44336", mll.EnumMarkerIconSize.medium)
Click to expand...
Great and as per last paragraph in post #11, here in I quote..."The color should be the HTML colour code and NOT the name"...
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Johan Hormaza said:
Hi. You can load an example file, with many more details. I would really appreciate it:)
Click to expand...
I have attached a project that I use to test all my components, but specifically loading the leaflet map in this case (see ConnectPage). Please note it has other code (for testing purposes on my side), the only thing you need to do is to get your map token and use it where the component is defined in ConnectPage. This is used with ABM 4.30

PS: Don't mind the rest of the code however note post #3.
 

Attachments

  • Leaflet.zip
    65.9 KB · Views: 394
You must log in or register to reply here.

Similar Threads

NGUYEN TUAN ANH
  • Question
B4J Question [BANanoVuetify/] How to add overlay image to map in Leaflet ?
Replies
1
Views
726
NGUYEN TUAN ANH
NGUYEN TUAN ANH
Philip Chatzigeorgiadis
  • Question
B4J Question [ABMaterial] [Solved]Push.js Notifications
Replies
11
Views
2K
Mashiane
Mashiane
alwaysbusy
  • Article
B4J Tutorial [ABMaterial] B4JS - 00 Introduction
Replies
12
Views
12K
Don Oso
Don Oso
Mashiane
  • Question
B4J Question [ABMaterial] ABMGoogleMap Rendering Challenge
Replies
5
Views
3K
Mashiane
Mashiane
alwaysbusy
  • Sticky
  • Article
B4J Library [Web][ABMaterial] Framework for WebApps
37 38 39
Replies
768
Views
224K
alwaysbusy
alwaysbusy
Top