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

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

?

Are you interested?

  1. Yes

    81.8%
  2. Definately

    18.2%
  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

    You?

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

    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.0913)
        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: 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

    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: Jul 2, 2018
    clarionero and joulongleu like this.
  5. Mashiane

    Mashiane Expert Licensed User

    Adding a stand alone PopUp..

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

    Mashiane Expert Licensed User

    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
     
    clarionero and joulongleu like this.
  7. Mashiane

    Mashiane Expert Licensed User

    Adding a polyline

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

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

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

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

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

    Mashiane Expert Licensed User

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

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

    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.
     
    joulongleu likes this.
  15. joulongleu

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