Leaflet with TileLayerOptions

Using Javascript from SpiderBasic
Dirk Geppert
Posts: 284
Joined: Fri Sep 22, 2017 7:02 am

Leaflet with TileLayerOptions

Post by Dirk Geppert »

I like to use the map integration from Peter: https://github.com/spiderbytes/Leaflet
At this point many thanks to Peter!

Now I need a small adjustment, which I unfortunately cannot do myself.

I want to use tiles from a map where the tiles are available with the syntax Tile_001_001.png
So always three digit numbers.

In the Javascript of the page I have found the following adaptation:

Code: Select all

this.layer = r.tileLayer("https://[..]/Level{z}/Tile_{modifiedY}-{modifiedX}.png", {
    modifiedX: function (t) {
        return t.x > 9 ? ("0" + t.x).slice(-3) : ("00" + t.x).slice(-3)
    },
    modifiedY: function (t) {
        return t.y > 9 ? ("0" + t.y).slice(-3) : ("00" + t.y).slice(-3)
    },
    center: new r.LatLng(2300, 3656),
    zoom: 0
}), this.zoomLevels = [{
        numTilesX: 6,
        numTilesY: 4
    }, {
        numTilesX: 16,
        numTilesY: 11
    }, {
        numTilesX: 23,
        numTilesY: 17
    }
]
}
}, function (t, e, n) {
    "use strict";
    n.d(e, "a", (function () {
            return o
        }))
How can I pass this to Leaflet using Peter's framework?

Btw., there are many free great maps for leaflet. Here is an update for further tile layers:

Code: Select all

  Procedure NewTileLayer(TileLayerType, UrlTemplate.s = "", TileLayerOptions = 0)
    
    Select TileLayerType
        
      Case #TileLayerType_CyclOSM
        If UrlTemplate = ""
          UrlTemplate = "https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 20};
        EndIf
        
      Case #TileLayerType_OpenRailwayMap
        
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 19};
        EndIf
        
      Case #TileLayerType_OpenSeaMap
        If UrlTemplate = ""
          UrlTemplate = "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 19};
        EndIf
        
      Case #TileLayerType_WikiMedia
        If UrlTemplate = ""
          UrlTemplate = "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 19};
        EndIf
        
     Case #TileLayerType_NASAGIBSModisTerraTrueColorCR
        If UrlTemplate = ""
          UrlTemplate = "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_CorrectedReflectance_TrueColor/Default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.jpg"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 9, time: '', tilematrixset: 'GoogleMapsCompatible_Level'};
        EndIf
        
      Case #TileLayerType_NASAGIBSViirsEarthAtNight2012
        If UrlTemplate = ""
          UrlTemplate = "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/Default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.jpg"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 8, time: '', tilematrixset: 'GoogleMapsCompatible_Level'};
        EndIf
        
     Case #TileLayerType_HikeBikeHillShading
        If UrlTemplate = ""
          UrlTemplate = "https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 15};
        EndIf
        
     Case #TileLayerType_CartoDBDarkMatter
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 19};
        EndIf
        
        
     Case #TileLayerType_EsriWorldImagery
        If UrlTemplate = ""
          UrlTemplate = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 20};
        EndIf
     
        
     Case #TileLayerType_StamenWaterColors
        If UrlTemplate = ""
          UrlTemplate = "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 1, maxZoom: 16};
        EndIf
        
        
     Case #TileLayerType_ThunderforestTransport
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestOutdoor
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf

      Case #TileLayerType_ThunderforestCylce
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestLandscape
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestTransportDark
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestSpinal
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestPioneer
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestMobileAtlas
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf
        
      Case #TileLayerType_ThunderforestNeighbourhood
        If UrlTemplate = ""
          UrlTemplate = "https://tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey=YourKey"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {maxZoom: 22};
        EndIf        
        
     Case #TileLayerType_OpenStreetMap
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 0, maxZoom: 20};
        EndIf
        
      Case #TileLayerType_OpenTopoMap
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 3, maxZoom: 17};
        EndIf
      Case #TileLayerType_GoogleMapRoadmap
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = { maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] };
        EndIf
        
      Case #TileLayerType_GoogleMapSatellite
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = { maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] };
        EndIf
        
      Case #TileLayerType_GoogleMapHybrid
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = { maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] };
        EndIf
        
      Case #TileLayerType_GoogleMapTerrain
        If UrlTemplate = ""
          UrlTemplate = "https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}"
        EndIf
        If TileLayerOptions = 0
          ! v_tilelayeroptions = { maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] };
        EndIf
        
      Case #TileLayerType_Custom
        ; x-Reihe , y-Zeile, z-Zoom Level
        If TileLayerOptions = 0
          ! v_tilelayeroptions = {minZoom: 0, maxZoom: 5};
        EndIf
        
    EndSelect
    
    ! var tl = L.tileLayer(v_urltemplate, v_tilelayeroptions);
    ! return tl;
    
  EndProcedure  
Dirk Geppert
Posts: 284
Joined: Fri Sep 22, 2017 7:02 am

Solved: Leaflet with TileLayerOptions

Post by Dirk Geppert »

Code: Select all

  ! v_tilelayeroptions = {
  !   modifiedZ: function (t) { return t.z - 5 },
  !   modifiedX: function (t) { return t.x > 9 ? ("0" + t.x).slice(-3) : ("00" + t.x).slice(-3)}, 
  !   modifiedY: function (t) {return t.y > 9 ? ("0" + t.y).slice(-3) : ("00" + t.y).slice(-3)},
  !   center: [0, 0], 
  !   minZoom: 5,
  !   maxZoom: 8,
  !   crs: L.CRS.Simple,
  !   attribution: 'PDF2Tiles',
  !   zoom: 5 }
Post Reply