javascript html leaflet openstreetmap velo

How to put png image over openstreemap map in wix site that the png image will be integral part of the map?

first in general:

I want to put a weather radar image with clouds over openstreetmap map of my country. this is the png image the radar image:

and this is how it looks like in the Israeli official meteorologist official website: it's not openstreemap but the image is part of the map and i can zoom in/out.

this is the same concept I want to make in my wix site:

and after zoom in:

this is the Israeli official weather website so you can see what I mean by adding the image to the map the idea: https://ims.gov.il/he/RadarSatellite

and this is my wix website, there is nothing much on the site then the openstreemap map and the image: https://chocolade13091972.wixsite.com/chocolade-imagine

In wix I uploaded to my site png image and then with html and javascript I can add openstreemap map to my site and then i can drag over the png image the problem is when i publish my site the image is overlay above the map and it's not part of the map.

the result is for example when I zoom in/out the image is not zooming in/out with the map. that's why I need to make somehow that the png image will be part of the map and yet to make the png a bit transparent so if I zoom in a lot I will see the map a bit through the image.

this is the code for adding the openstreemap map to the wix site using the embed html in wix and also this code take the png image and try to make it integral part of the map:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Map with PNG Image</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
   <style>
      body, html, #map {
         height: 100%;
         margin: 0;
      }
   </style>
</head>
<body>
   <div id="map"></div>

   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
   <script>
      var map = L.map('map').setView([32.00718, 34.81487], 10);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // Define the bounds of your image (latitudes and longitudes)
      var bounds = [[32.00718, 34.81487], [33, 39.7]];

      // Create an image overlay and add it to the map
      var imageUrl = 'https://static.wixstatic.com/media/f7ee46_b3c10d0bb92644aaa9ef18bfbb3df0ee~mv2.png';
      var imageBounds = bounds;

      L.imageOverlay(imageUrl, imageBounds).addTo(map);
   </script>
</body>
</html>

but the result is not even close to the original png image and not as it should be on the map:

and if I zoom out in my wix website to see my country you can see the clouds of the radar png image somewhere far on the right.

my problem is first how to make the image to be an integral part of the map? maybe the code I provided here is doing the job.

but the most problem is how to put the image to fit my country Israel? same as in the official website they did.

Solution

Your image is a square 940px × 940px. However, in your map, it shows as a rectangle:

L.rectangle(bounds).addTo(map);
/// bounds is defined in your code as the bounds for the image  var bounds = [[32.00718, 34.81487], [33, 39.7]];

You would need to set the rights bounds for your image, but it is hard to guess them.

By setting the image bounds to [[31.5, 34], [33, 35.5]] you get the following:

Remember that the bounds are southwest corner / northeast corner. You would have to get them from your original source for your radar image.

See the leaflet documentation for more information: