SpiderBasic

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())

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

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())

Code: Select all

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

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();       
     !      });
     !     });
     !   });
     !  });    
     ! });    

Code: Select all

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

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>