CODEWITHSUNDEEP
javascriptleaflet
dl.meteo
dl.meteo

Reputation: 1766

Having a xyz tileLayer just covering a certain region of the world

I want to overlay the following xyz tile layer to a leaflet map.

http://weatheroo.net/radar/data/2019/07/15/18/40/{z}/{x}/{y}.png

It is a weather radar composite of germany, this is the reason why it's just covers middle europe.

The bounding box:

new L.LatLng(45.530, 1.07006),
new L.LatLng(55.7750629, 17.095451751)

https://jsfiddle.net/6jtr38e7/

The image appears but does not fit to the bounds. Thanks for your support.

Upvotes: 0

Views: 323

Answers (1)

kaveh
kaveh

Reputation: 2146

The main issue I can see is missing template arguments in your example options.

You url template string has 5 extra attributes: year, month, day, hour, and minutes. You need to include those in TileLayer options. It seems the tile server requires two-digit numbers for these attributes, so make sure you pass them in the correct format. Here's an example:

L.tileLayer('http://weatheroo.net/radar/data/{year}/{month}/{day}/{hour}/{minute}/{z}/{x}/{y}.png', {
    detectRetina: false,
    minZoom: 1,
    maxZoom: 6,
    minNativeZoom: 1,
    maxNativeZoom: 6,
    zIndex: 830,
    className: 'tiles_radar',
    crossOrigin: false,
    year: "2019",
    month: "07",
    day: "14",
    hour: "18",
    minute: "40",
    bounds:[
        new L.LatLng(45.530, 1.07006),
        new L.LatLng(55.7750629, 17.095451751)
    ]
})

If you need dynamic values for the above attributes, you can use a function to get the needed values. Here's an example that uses the current date and time and formats the relevant ones with two digits to generate the tile url:

L.tileLayer('http://weatheroo.net/radar/data/{year}/{month}/{day}/{hour}/{minute}/{z}/{x}/{y}.png', {
    detectRetina: false,
    minZoom: 1,
    maxZoom: 6,
    minNativeZoom: 1,
    maxNativeZoom: 6,
    zIndex: 830,
    className: 'tiles_radar',
    crossOrigin: false,
    year: () => (new Date()).getFullYear().toString(),
    month: () => `0${((new Date()).getMonth() + 1)}`.slice(-2),
    day: () => `0${((new Date()).getDate())}`.slice(-2),
    hour: `0${((new Date()).getHours())}`.slice(-2),
    minute: `0${((new Date()).getMinutes())}`.slice(-2),
    bounds:[
        new L.LatLng(45.530, 1.07006),
        new L.LatLng(55.7750629, 17.095451751)
    ]
})

One more thing: I noticed weatheroo.net does not support https, but jsfiddle redirects all the tile urls to https. So even after updating the options, the example is not going to work in jsfiddle. Try it locally or with another service.

Upvotes: 1

Related Questions