Utilizing a specialized xyz tileLayer to specifically highlight a designated area on the map

I am looking to add the xyz tile layer from this link onto a leaflet map:

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

This particular weather radar composite is focused on Germany, hence why it only covers middle Europe.

The specified bounding box coordinates are as follows:

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

To view the implementation on jsfiddle, click on this link: https://jsfiddle.net/6jtr38e7/

Although the image appears on the map, it does not align perfectly with the bounds provided. Your assistance in resolving this issue would be greatly appreciated. Thank you!

Answer №1

The main issue that stands out is the absence of template arguments in your sample options.

Your URL template string includes 5 additional attributes: year, month, day, hour, and minutes. These need to be included in the TileLayer options. The tile server seems to require two-digit numbers for these attributes, so make sure you input them in the correct format. Here's an illustration:

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 require dynamic values for the above attributes, you can utilize a function to fetch the necessary values. Here's an example that utilizes the current date and time, formatting relevant ones with two digits to construct 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)
    ]
})

Additionally, please note that weatheroo.net does not support https. However, jsfiddle redirects all tile URLs to https. Consequently, even after adjusting the options, the example will not work on jsfiddle. Consider trying it locally or with another service.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular to store checkbox values in an array

I'm currently developing a feature that involves generating checkboxes for each input based on the number of passengers. My goal is to capture and associate the value of each checkbox with the corresponding input. Ultimately, I aim to store these valu ...

Retrieving the inner content of several paragraph elements, all consolidated into a single string

I'm trying to extract the inner HTML of multiple paragraph elements from a string and I need some help. Here's an example input: let HTML = "<p class="Paragraph" >Hello, World 1!</p><p class="Paragraph" >Hell ...

Storing JSON data using Vuex

As I am delving into the world of Vuex store used with vue.js, I find myself wanting to implement it in a specific scenario. 1. Is STATE referring to any data, whether static or dynamic, that is provided by the server or stored in a JSON format? TEMPLATE ...

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

TextGeometry failing to render

Currently experimenting with TextGeometry. Successfully implemented BoxGeometry, but encountering issues with TextGeometry. Experimenting with different material options like MeshNormalMeterial, however, still unable to resolve the issue var scene = new ...

Is there a way for me to manipulate the RGB values of the canvas in such a manner that the Red and Green components of the gradient are determined by dividing the position of my mouse cursor

My homework assignment requires using RGB colors where the red value is set to 0, green is the x-coordinate divided by 2, and blue is the y-coordinate divided by 2. I've been trying to control the colors on a canvas using addColorStop functions, but I ...

The anchor tag is not being used in the function call in an Angular application

Having trouble with calling the logout function inside the login controller. The setup involves a simple login and logout system using ui-router. After successfully logging in and navigating to another page, I encountered issues with calling the logout fu ...

What is the best way to update $state in AngularJs when the user makes changes to the controller?

I am currently working on Angular UI Router and I want to refresh the current state by reloading it and rerunning all controllers for that state. Is there a way to reload the state with new data using $state.reload() and $stateParams? Here is an example ...

Switch between Fixed and Relative positions as you scroll

Just a small adjustment is needed to get it working... I need to toggle between fixed and relative positioning. JSFiddle Link $(window).on('scroll', function() { ($(window).scrollTop() > 50) ? ($('.me').addClass('fix ...

Verify if a certain value is present within a nested array

I need assistance with checking if a specific value is present within a nested array. Here is an example of the data I am dealing with: [ { name: 'alice', occupation: ['Artist', 'Musician'], }, { ...

Exploring the nuances between Ruby on Rails and the responses from json and JavaScript ajax

I am interested in learning the most effective method for handling an ajax request. Would it be better to send json data and parse it on the client side (for instance using pure), or should I generate javascript at the server side and send back the respo ...

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Currently facing an issue with TypeScript and types. I have an array of IDs obtained from checkboxes, which may also be empty. An example of values returned from the submit() function: const responseFromSubmit = { 1: { id: "1", value: "true" }, 2: ...

store the id of each li element dynamically into an array

In my code, a list is generated dynamically and each list item has a special id. I am trying to store each li "id" in one array. This is JavaScript code: var i = 0; $("ul#portfolio li").each(function(eval) { var idd = new Array(); idd[i] = $(this ...

What is the best way to set up CORS in IE11 using C# with JQuery.ajax?

Having some trouble with CORS functionality in IE11. I need to perform ajax requests using jquery (or whatever the browser supports natively), without any additional libraries. These requests are cross-domain and function perfectly in Chrome and Firefox. ...

Envelop a HTML element within another HTML element with the help of jQuery

Unique link Here is some sample HTML: <div><img src="http://i.imgur.com/4pB78ee.png"/></div> I am looking to use jQuery to wrap the img tag with an a tag, like this: $(function() { var a = '<a href="http://i.imgur.com/4pB78e ...

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

Error: The function $(...).draggable is not recognized" and "Error: The object $.browser is not defined

I encountered an error stating, TypeError: $(...).draggable is not a function. To resolve this issue, I added jQuery as follows: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> < ...

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

oninput="this.value = this.value.replace(/[^-0-9.]/g, '') This code snippet is utilized in my current project. However, there seems to be an issue where the input can contain more than one minus sign, as shown here: ---23 To address this p ...

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...