Leaflet with TileLayerOptions
Posted: Wed Apr 29, 2020 4:49 pm
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:
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:
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
}))
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