CODEWITHSUNDEEP
javascriptleaflet
Said Nahum Montes Carballo
Said Nahum Montes Carballo

Reputation: 1

How to set image with imageOverlay without resize in LeafletJs

I have a image on a map, in image Overlay i set bounds (left superior and right inferior) but the image have some kind of strech, it is is higher than wide and the original image is square (558x558), I put markers where the bounds should go. l can´t resolve these problem. Thanks alot.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Pruebas2</title>
   <!-- LEAFLET -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
   <!-- Estilos -->
   <link rel="stylesheet" href="estilos.css">
   <!-- Jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="contenedorMapa" style="width: 100%"></div>

   <script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
   </script>

   <script> // TIPOS DE MAPAS
      var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
      //[21.893950, -101.440188]

      var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
         maxZoom: 20,
         subdomains:['mt0','mt1','mt2','mt3'],
         attribution: ''
      }).addTo(map);
   </script>

   <script>
      var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
      .bindPopup('supe-iz');

      var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
      .bindPopup('inf-der');
   </script>

   <script>
      var imageUr6 = 'ecos/altamira/ppi3/ULTIMA.gif';
      var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
      var imagen6 = L.imageOverlay(imageUr6, bordes6, {
         opacity: 0.7
      }).addTo(map);
     </script>
</body>
</html>

enter image description here

Upvotes: 0

Views: 2076

Answers (1)

Parn
Parn

Reputation: 918

Please check your image. It works for me. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Pruebas2</title>
   <!-- LEAFLET -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
   <!-- Estilos -->
   <link rel="stylesheet" href="estilos.css">
   <!-- Jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="contenedorMapa" style="width: 100%"></div>

   <script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
   </script>

   <script> // TIPOS DE MAPAS
      var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
      //[21.893950, -101.440188]

      var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
         maxZoom: 20,
         subdomains:['mt0','mt1','mt2','mt3'],
         attribution: ''
      }).addTo(map);
   </script>

   <script>
      var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
      .bindPopup('supe-iz');

      var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
      .bindPopup('inf-der');
   </script>

   <script>
      var imageUr6 = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif';
      var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
      var imagen6 = L.imageOverlay(imageUr6, bordes6, {
         opacity: 0.7
      }).addTo(map);
     </script>
</body>
</html>

Upvotes: 1

Related Questions