0

First time I load the page, leaflet load perfectly all the elements. But when I go into another component (I am using angular) and comeback to the component with leaflet map, it happens this:

enter image description here

In index.html I have this:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <script  src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<!--     <script type="text/javascript" src="node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
 -->    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>

    
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
  
  <!--whitelist https://github.com/apache/cordova-plugin-whitelist#content-security-policy-->
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">

  </head> 
<body>
  <app-root></app-root>
</body>
</html>
TylerH
  • 20,799
  • 66
  • 75
  • 101
muricoto
  • 1
  • 1
  • Also, it happens in chrome, but in firefox directly the map never load. In console I have this: "Content Security Policy: The page's settings blocked the loading of a resource https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js" – muricoto Aug 26 '22 at 21:21
  • This code does not reproduce the issue – kboul Aug 27 '22 at 09:25

1 Answers1

0

Finally I resolved the error adding this:

setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
}, 1000);

The problem was that only a small tile is loaded from the api making 90% of the map gray, when i resize the window leaflet calls the api asking for more tiles, so this "hack" makes leaflet complete itself.

leaflet map shows up grey Gave me the answer.

muricoto
  • 1
  • 1