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

Discussion in 'B4J Libraries & Classes' started by Mashiane, Jun 29, 2018.


Are you interested?

  1. Yes

  2. Definately

  1. Mashiane

    Mashiane Expert Licensed User

    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


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

    alwaysbusy Expert Licensed User

    Now with Googles prices increased 15x for Google Maps, this could be an excellent alternative
  3. Mashiane

    Mashiane Expert Licensed 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..

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

    3. In ConnectPage

    Dim mll As MashLeafLet
        mll.ZDepth = ABM.ZDEPTH_1
        mll.Height = 
        mll.MapBoxAccessToken = 
    "your key here"
        mll.MapBoxType = mll.EnumMapBoxType.MapboxComic
    4. Output on page...




    Complete Map


    NB: This is a learning exercise.

    Source Code
    Last edited: Jul 8, 2018
    clarionero and joulongleu like this.
  4. Mashiane

    Mashiane Expert Licensed User

    Step 2: Adding some map things

    2.1: Adding a Marker

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

    'add a polygon
        mll.AddPolygon("p1","A nice polygon")
    "p1"51.509, -0.08)
    "p1"51.503, -0.06)
    "p1"51.51, -0.047)
    2.3 Adding a Circle

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

    Last edited: Jul 2, 2018
    clarionero and joulongleu like this.
  5. Mashiane

    Mashiane Expert Licensed User

    Adding a stand alone PopUp..

    'add a popup
        mll.AddPopUp("pop1","I am a standalone popup."51.7, -0.09)
    clarionero and joulongleu like this.
  6. Mashiane

    Mashiane Expert Licensed User

    Useful functions...

    Step 3: Geolocate..

    Just set the property to True

    mll.GeoLocate = True

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

    Sub mll_geolocate(value As Map)
    Dim valuex As String = value.Get("value")
    End Sub

    Sub mll_error(value As Map)
    Dim valuex As String = value.Get("value")
    End Sub
    clarionero and joulongleu like this.
  7. Mashiane

    Mashiane Expert Licensed User

    Adding a polyline

    'add a polyline
        mll.AddPolyLine("pl1","My poly line")
    "pl1"45.51, -122.68)
    "pl1"37.77, -122.43)
    "pl1"34.04, -118.2)
    clarionero and joulongleu like this.
  8. joulongleu

    joulongleu Active Member

    Hi:Mashiane:can create the input field then get Lat and Lng ? Thank you is very good.
    Mashiane likes this.
  9. Mashiane

    Mashiane Expert Licensed User

    Im going to add a click event which will return the clicked map position.
    joulongleu likes this.
  10. Mashiane

    Mashiane Expert Licensed 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.

    Then, after initializing the CustomComponent, turn UseMakiMarkers = True

    xxx.UseMakiMarkers = True
    With MakiMarkers on, the default marker changes to gray...


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

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

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

    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)
    More options have been added for these methods, the color, the fill color, with weight etc of the polyline / polygon

    mll.AddPolygon("p1""A nice polygon"False, ABM.COLOR_BROWN,3,1.0,ABM.COLOR_BROWN,0.2)
    mll.AddPolyLine("pl1","My poly line",False,ABM.COLOR_CYAN,3,1.0,ABM.COLOR_INDIGO,0.2)
    Last edited: Jul 7, 2018
    joulongleu likes this.
  11. Mashiane

    Mashiane Expert Licensed User

    You can just remove the icon name and show the color you want..

    mll.AddMarker1("m1""Anele Mashy Mbanga"51.5, -0.09"", MashPlugIns.EnumColors.red, mll.EnumMarkerIconSize.medium)
    The color should be the HTML colour code and NOT the name
    joulongleu likes this.
  12. Mashiane

    Mashiane Expert Licensed User

    Available MakiIcons Enumeration that you can use...

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

    Mashiane Expert Licensed User

    An example showing multiple markers using MakiICons...

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

    Mashiane Expert Licensed User

    Trapping click events and getting the LatLng.


    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

    mll.OnClick = True
    Then Call the clicked event...

    Sub mll_clicked(value As Map)
    Dim valuex As String = value.Get("value")
    Dim latlng As LatLng = mll.Parse(valuex)
    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.
    joulongleu likes this.
  15. joulongleu

    joulongleu Active Member

    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.

    Attached Files:

    Last edited: Jul 8, 2018
  16. alwaysbusy

    alwaysbusy Expert Licensed User

    Very well done!
    Mashiane and joulongleu like this.
  17. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Hi. You can load an example file, with many more details. I would really appreciate it:)
    Mashiane likes this.
  18. joulongleu

    joulongleu Active Member

    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)
  19. Mashiane

    Mashiane Expert Licensed User

    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"...
    joulongleu likes this.
  20. Mashiane

    Mashiane Expert Licensed User

    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.

    Attached Files:

    joulongleu and Johan Hormaza like this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice