LeafletDemo5.sb

EnableExplicit

XIncludeFile "Leaflet.sbi"

Enumeration
  #Window
  #Button
  #LeafletGadget
EndEnumeration


Global NewMap Marker()
Global myMap
Global RandomMarkerNumber = 50

Procedure JsonParse(String.s, ReplaceQuotes = #True)
  If ReplaceQuotes
    String = ReplaceString(String, "'", Chr(34))
  EndIf
  ! return JSON.parse(v_string);
EndProcedure

Procedure GetRandomLatLng(myMap)
  
  !	var bounds = v_mymap.getBounds(),
  !		southWest = bounds.getSouthWest(),
  !		northEast = bounds.getNorthEast(),
  !		lngSpan = northEast.lng - southWest.lng,
  !		latSpan = northEast.lat - southWest.lat;
  !
  !	return L.latLng(
  !			southWest.lat + latSpan * Math.random(),
  !			southWest.lng + lngSpan * Math.random());
  
EndProcedure

Procedure Populate(myMap, myMarkerClusterGroup)
  
  ; populate the Map wtih random markers
  
  Protected Counter
  Protected myMarker
  
  For Counter = 0 To 100
    
    myMarker = Leaflet::NewMarker(GetRandomLatLng(myMap))
    
    Leaflet::SetStringAttribute(myMarker, Leaflet::#Title, "Random Marker: " + Str(Counter))
    Leaflet::SetStringAttribute(myMarker, Leaflet::#Tooltip, "Random Marker: " + Str(Counter))
    
    Leaflet::AddItem(myMarkerClusterGroup, myMarker)
    
    Marker("M" + Str(Counter)) = myMarker
    
  Next
  
EndProcedure

Procedure SizeWindowEvent()
  
  ResizeGadget(#LeafletGadget, #PB_Ignore, #PB_Ignore, WindowWidth(#Window) - 180, WindowHeight(#Window) - 20)
  
EndProcedure

Procedure ButtonEvent()
  
  Static ZoomedIn
  
  Protected myMarker
  Protected LatLng
  
  If ZoomedIn
    
    RandomMarkerNumber = Random(0, 100)
    
    SetGadgetText(#Button, "Zoom to Marker " + Str(RandomMarkerNumber))
    
    LatLng = Leaflet::LatLng(50.703416, 6.634032)
    Leaflet::SetView(myMap, LatLng, 5)
    ZoomedIn = #False
    
  Else
    
    SetGadgetText(#Button, "Zoom out")
    
    myMarker = Marker("M"+ Str(RandomMarkerNumber))
    LatLng = Leaflet::GetAttribute(myMarker, Leaflet::#LatLng)
    Leaflet::SetView(myMap, LatLng, 8)
    ZoomedIn = #True
    
  EndIf
  
EndProcedure

Procedure CreateIcon(IconText.s)
  Protected IconSize = 32
  Protected I
  Protected ReturnValue
  I = CreateImage(#PB_Any, IconSize, IconSize)
  StartDrawing(ImageOutput(I))
  Box(0, 0, IconSize, IconSize, #Black)
  Box(1, 1, IconSize - 2, IconSize - 2, #White)
  DrawText((IconSize/2)-(TextWidth(IconText)/2), (IconSize/2)-(TextHeight(IconText)/2), IconText)
  StopDrawing() 
  ! v_returnvalue = spider_ImageID(v_i).toDataURL();
  FreeImage(I)
  ProcedureReturn ReturnValue
EndProcedure

Procedure AddDivIconStyles()
  
  Static AlreadyAdded
  
  If AlreadyAdded = #False ; add only one time
    
    AlreadyAdded = #True
    
    ! $("<style type='text/css'> .centeredText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -85%); color: red; background: white; width: 14px} </style>").appendTo("head");
    ! $("<style type='text/css'> .myDivIcon { width:25px !important; height:41px !important; border: 0; text-align: center; } </style>").appendTo("head");
    
  EndIf 
  
EndProcedure

Procedure IconCreateCallback(Cluster)
  
  Protected ChildCount
  
  ChildCount = Leaflet::ClusterGetChildCount(Cluster)
  
  If #False
    
    AddDivIconStyles()
    
    ; Option 1: Using Leaflet::NewDivIcon()
    
    Protected Options
    
    ! v_options = {
    !   html: '<div class="container"><img src="https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon.png"><div class="centeredText">' + v_childcount + '</div></div>',
    !   className: 'myDivIcon'
    ! }
    
    Protected myDivIcon = Leaflet::NewDivIcon(Options)
    
    ProcedureReturn myDivIcon
        
  Else
    
    ; Option 2: Using Leaflet::NewIcon() with selfdrawn Icons
    
    Protected CreatedIcon = CreateIcon(Str(ChildCount))
    
    Protected myIcon
    
    ! v_myicon = L.icon({
    !     iconUrl: v_createdicon,
    !     iconSize: [32, 32],
    !     iconAnchor: [16, 16],
    !     popupAnchor: [16, 16]
    ! });
        
    ProcedureReturn myIcon
    
  EndIf
  
EndProcedure

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "LeafletGadgetDemo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent(), #Window)
  
  ButtonGadget(#Button, 10, 10, 150, 30, "Zoom to Marker " + Str(RandomMarkerNumber))
  
  BindGadgetEvent(#Button, @ButtonEvent())
  
  ContainerGadget(#LeafletGadget, 170, 10, WindowWidth(#Window) - 180, WindowHeight(#Window) - 20, #PB_Container_Flat) : CloseGadgetList()
  
  Leaflet::BindGadget(#LeafletGadget, JsonParse("{ 'center': [50.703416, 6.634032], 'zoom': 5 }"))
  
  myMap = Leaflet::GetMap(#LeafletGadget)
  
  ; add an OpenStreetMap-Tilelayer to the map
  Leaflet::AddItem(myMap, Leaflet::NewTileLayer(Leaflet::#TileLayerType_OpenStreetMap))
  
  ; create a MarkerClusterGroup
  Protected myMarkerClusterGroup = Leaflet::NewMarkerClusterGroup(@IconCreateCallback())
  
  ; set the cluster-radius
  Leaflet::SetMaxClusterRadius(myMarkerClusterGroup, 100)
  
  ; ... populate it with random markers
  Populate(myMap, myMarkerClusterGroup)
  
  ; ... and add it to the map:
  Leaflet::AddItem(myMap, myMarkerClusterGroup)
  
EndProcedure

Leaflet::Init(@Main())