Maps with SpiderBasic

[Paul]

Anyone have any experience using Leaflet with SpiderBasic?
https://leafletjs.com/

Or have some examples of converting the javascript to use with SpiderBasic?

[Peter]

https://github.com/spiderbytes/Leaflet

[Paul]

Wow
Thanks Peter, that's exactly what I was looking for.

(Note: the LeafletDemoGoogleMaps displays a blank screen but the other examples are excellent)

[Peter]

Note: the LeafletDemoGoogleMaps displays a blank screen

Fix:

Code: Select all

EnableExplicit

XIncludeFile "Leaflet.sbi"

Enumeration
  #Window
  #LeafletGadget
EndEnumeration

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 900, 900, "LeafletGadgetDemo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  ContainerGadget(#LeafletGadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window)) : CloseGadgetList()
  
  Leaflet::BindGadget(#LeafletGadget)
  
  Protected myMap = Leaflet::GetMap(#LeafletGadget)
  
  ; create a tilelayer
  
  Protected tileLayer
  
  tileLayer= Leaflet::NewTileLayer(Leaflet::#TileLayerType_GoogleMapHybrid)
  ; tileLayer = Leaflet::NewTileLayer(Leaflet::#TileLayerType_GoogleMapRoadmap)
  ; tileLayer = Leaflet::NewTileLayer(Leaflet::#TileLayerType_GoogleMapSatellite)
  ; tileLayer = Leaflet::NewTileLayer(Leaflet::#TileLayerType_GoogleMapTerrain)
  
  Leaflet::AddItem(myMap, tileLayer)
  
  ; adjust the zoom
  Leaflet::SetAttribute(myMap, Leaflet::#Zoom, 16)
  
  ; center to a specific position
  Leaflet::PanTo(myMap, Leaflet::LatLng(  48.486520, 7.693640  ) )
  
  
EndProcedure

Leaflet::Init(@Main())

[Caronte3D]

First of all, thanks Peter for the nice Leaflet implementation
It's awesome, but unfortunately, lack of a rotate function and it's a must in my case
I found some links about add this functionality, but I have no idea of JavaScript or web programing to implement it in SpiderBasic

Anyone has a rotation implementation for that library or can point me how to do it?

Plugin:
https://github.com/Raruto/leaflet-rotate
Demo:
https://raruto.github.io/leaflet-rotate ... otate.html

Another branch (I think):
https://www.npmjs.com/package/leaflet-rotate-map

More:
https://codesandbox.io/p/sandbox/react- ... ked-hqxy8g

[Peter]

Anyone has a rotation implementation for that library or can point me how to do it?

Change the Init Procedure in Leaflet.sbi as follows:

Code: Select all

  Procedure Init(Callback)
    
    ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css").appendTo("head");
    ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css").appendTo("head");
    ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css").appendTo("head");
    
    
    ! $("<style type='text/css'> div.leaflet-container img { background-color: transparent !important ; padding: 0 !important ; border: 0 !important ; } </style>").appendTo("head");
    
    ! require(["https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"], function() {
    !   require(["https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster-src.js"], function() {
    !     require(["https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate-src.js"], function() {
    IsInitialized = #True
    !       v_callback();
    !     });
    !   });
    ! });
    
  EndProcedure

and use this demo code:

Code: Select all

EnableExplicit

XIncludeFile "Leaflet.sbi"

Enumeration
  #Window
  #LeafletGadget
  #TrackBarGadget  
EndEnumeration

Global myMap

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

Procedure TrackBarGadgetEvent()
  
  Protected Value = GetGadgetState(#TrackBarGadget)
  
  ! g_mymap.setBearing(v_value);
  
EndProcedure

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 500, 500, "LeafletGadgetDemo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  ContainerGadget(#LeafletGadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window) - 60) : CloseGadgetList()
  
  TrackBarGadget(#TrackBarGadget, 10, WindowHeight(#Window) - 40, WindowWidth(#Window) - 20, 20, 0, 360)
  
  BindGadgetEvent(#TrackBarGadget, @TrackBarGadgetEvent())
  
  Leaflet::BindGadget(#LeafletGadget, JsonParse("{ 'zoom': 10, 'rotate': true, 'touchRotate': true }"))
  
  myMap = Leaflet::GetMap(#LeafletGadget)
  
  ; create a tilelayer
  Protected TileLayer = Leaflet::NewTileLayer(Leaflet::#TileLayerType_OpenStreetMap)
  
  ; add the layer to the map
  Leaflet::AddItem(myMap, TileLayer)
  
  ; center to a specific position
  Leaflet::PanTo(myMap, Leaflet::LatLng( 51.505, -0.09 ) )
  
EndProcedure

Leaflet::Init(@Main())

[Caronte3D]

Awesome!
Thank you very much by your help.

I have invited you to lunch via Paypal

[Peter]

You're welcome, @Caronte3D

And thank you very much for your donation!

I updated the github repository and capped Bearing into SetAttribute():

Code: Select all

Procedure TrackBarGadgetEvent()
  Leaflet::SetAttribute(myMap, Leaflet::#Bearing, GetGadgetState(#TrackBarGadget))
EndProcedure

[Caronte3D]

Hi
I'm trying to use my app offline so I need to download the tiles of the layer map and use the scripts locally, but seems I don't have enough skills to do it for my self

The repository of the offline code I'm using is:
https://www.npmjs.com/package/leaflet.offline

Now my app uses the scripts locally and seems to work ok

Code: Select all

     ! require(["./leaflet/dist/leaflet.js"], function() {
     !  require(["./idb/build/umd.js"], function() {
     !   require(["./leaflet.markercluster/dist/leaflet.markercluster-src.js"], function() {
     !     require(["./leaflet-rotate/dist/leaflet-rotate-src.js"], function() {
     !      require(["./leaflet.offline/dist/bundle.js"], function() {
                IsInitialized = #True
     !           v_callback();       
     !      });
     !     });
     !   });
     !  });    
     ! });    

but...

I modified the following line (adding .offline) to try the offline function but then nothing works

Code: Select all

! var tl = L.tileLayer.offline(v_urltemplate, v_tilelayeroptions);

Some help will be appreciate


I tested the plugin on a html page (without SpiderBsic) and seems to work ok, if you press the + button (the lower one) you can see on the console the number of tiles saved:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Mapa Offline con Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./leaflet/dist/leaflet.css" />
    <script src="./leaflet/dist/leaflet.js"></script>
	<script src="./idb/build/umd.js"></script>
    <script src="./leaflet.offline/dist/bundle.js"></script> <!-- leaflet.offline bundle -->
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>

    <script>
        // Crear el mapa
        var map = L.map('map').setView([51.505, -0.09], 13);

        // Añadir la capa de teselas offline
        var offlineLayer = L.tileLayer.offline(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Guardar tiles offline
        var control = L.control.savetiles(offlineLayer, {
            zoomlevels: [13, 14, 15, 16, 17, 18], // Niveles de zoom a guardar
            confirm: function (layer, successCallback) {
                if (window.confirm("¿Quieres guardar estos tiles?")) {
                    successCallback();
                }
            },
            minZoom: 13, // Nivel mínimo de zoom
            maxZoom: 18  // Nivel máximo de zoom
        }).addTo(map);

        // Restaurar tiles desde IndexedDB
        offlineLayer.on('storagesize', function (e) {
            console.log('Tamaño del almacenamiento offline:', e.storagesize);
        });
    </script>
</body>
</html>

[Caronte3D]

This repository seems easier to integrate (I don't know), but it's very old
It frustrates me trying to do something without any knowledge of web programming (or javascript) and getting more and more errors.
I love (and miss) the simplicity of PureBasic
https://github.com/tbicr/OfflineMap/tre ... b_sql_site