Giters

Raruto / leaflet-kmz

A KMZ file loader for Leaflet Maps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

why no render image(png)?

angela1393aa opened this issue · comments

commented

Hi Raruto!
this is my code,why no render image(png)?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title>Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <!-- Leaflet-KMZ -->
<script src="https://unpkg.com/leaflet-kmz@latest/dist/leaflet-kmz.js"></script>
</head>
<body>
    <div id="mapid" style="width: 800px; height: 1000px;"></div>
  <script>
    var mymap = L.map('mapid').setView([25.0730,121.3724], 13);
    L.tileLayer('https://tile.osm.ch/switzerland/{z}/{x}/{y}.png', {
		maxZoom: 17,
        errorTileUrl: 'http://bpic.588ku.com/element_pic/16/12/07/706f7ff4f15725b17ba1d30d384e6468.jpg',
        attribution: '© OpenStreetMap'
	}).addTo(mymap);
  var kmz = L.kmzLayer().addTo(this.mymap);
  console.log('kmz',kmz)
  kmz.on('load', function(e) {
    L.control.layers(null, null, { collapsed:false }).addTo(this.mymap).addOverlay(e.layer, e.name);
    e.layer.addTo(this.mymap);
  });
  kmz.load('https://api.cloudrf.com//API/archive/data?sid=eHFIVXlaQ3BLZFdHN0VvMlN2Yjdtdz09&type=path');
  </script>
</body>
</html>
commented

Hi @angela1393aa,

please try to re-explain yourself better, in case attach some pictures of the expected behavior.

Try to use absolute image URLs, if you mean show something inside the "info window" (eg. after clicking on a feature).

👋 Raruto

commented

Thank you so much!This is my edit code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title>Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <!-- Leaflet-KMZ -->
  <script src="https://unpkg.com/leaflet-kmz@latest/dist/leaflet-kmz.js"></script>
  <style>
    .leaflet-popup-content-wrapper{
      height: 500px;
      overflow:scroll;
      position:relative;
    }
    .leaflet-popup-content {
      width: auto !important;
    }
  </style>
</head>
<body>
    <div id="mapid" style="width: 800px; height: 800px;"></div>
  <script>
    var mymap = L.map('mapid').setView([25.0730,121.3724], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 17,
      errorTileUrl: 'http://bpic.588ku.com/element_pic/16/12/07/706f7ff4f15725b17ba1d30d384e6468.jpg',
      attribution: '© OpenStreetMap'
    }).addTo(mymap);

    let kmz = L.kmzLayer().addTo(mymap);
    kmz.on('load', function(e) {
      e.layer.eachLayer(function(layer) {
        if (layer._popup) {
          let popupContent = layer._popup._content;
          let imgSrcRegex = /<img.*?src='(.*?)'/g;
          let imgWidthRegex = /<img.*?width='(.*?)'/g;
          let matchSrc = imgSrcRegex.exec(popupContent);
          let matchWidth = imgWidthRegex.exec(popupContent);
          while (matchSrc != null && matchWidth != null) {
            popupContent = popupContent.replace(matchSrc[1], 'https://api.cloudrf.com/users/40003/'+matchSrc[1]);
            matchSrc = imgSrcRegex.exec(popupContent);
            popupContent = popupContent.replace(matchWidth[1], '100%');
            matchWidth = imgWidthRegex.exec(popupContent);
          }
          layer._popup.setContent(popupContent);
        }
      });
      L.control.layers(null, null, { collapsed:false }).addTo(mymap).addOverlay(e.layer, e.name);
    });
    kmz.load('https://api.cloudrf.com//API/archive/data?sid=eHFIVXlaQ3BLZFdHN0VvMlN2Yjdtdz09&type=path');
  </script>
</body>
</html>