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

Code: 
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

Code: 
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:
Step 2: Adding some map things

2.1: Adding a Marker

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

2.2: Adding a Polygon

Code: 
'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

Code: 
'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:
Useful functions...

Step 3: Geolocate..

Just set the property to True

Code: 
mll.GeoLocate = True

Geolocate.png


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

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

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

Then, after initializing the CustomComponent, turn UseMakiMarkers = True

Code: 
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

Code: 
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

Code: 
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

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

AddPolyLine
Code: 
mll.AddPolyLine("pl1","My poly line",False,ABM.COLOR_CYAN,3,1.0,ABM.COLOR_INDIGO,0.2)
 
Last edited:
Available MakiIcons Enumeration that you can use...

Code: 
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"
 
An example showing multiple markers using MakiICons...

Code: 
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
 
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

Code: 
mll.OnClick = True

Then Call the clicked event...

Code: 
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.
 
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: 734
Last edited:
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)
 
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"...
 
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

You must log in or register to reply here.

Similar Threads

Abdull Cadre
  • Article Article
B4A Library [B4X] [B4A] [B4J] [b4xlib] LeafletView
Replies
8
Views
3K
Carlos marin
Carlos marin
alwaysbusy
  • Article Article
B4J Tutorial [ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)
2 3
Replies
46
Views
46K
alwaysbusy
alwaysbusy
alwaysbusy
  • Article Article
B4J Tutorial [ABMaterial] B4JS - 00 Introduction
Replies
12
Views
17K
Don Oso
D
Mashiane
  • Question Question
B4J Question [ABMaterial] ABMGoogleMap Rendering Challenge
Replies
5
Views
5K
Mashiane
Mashiane
alwaysbusy
  • Sticky
  • Article Article
B4J Library [Web][ABMaterial] Framework for WebApps
38 39 40
Replies
780
Views
443K
Cableguy
Cableguy
Back
Top