1

I am trying to display a map in angular using leaflet.js however it appears empty Map

The html looks like this:

<div class="map-container">
                  <div class="map-frame">
                    <div id="map"></div>
                  </div>
                </div>

with css:

/*map*/
.map-container {
  width: 300px;
  padding: 1px;
  margin: 20px;
  text-align: center;
}

.map-frame {
  border: 2px solid black;
  height: 350px;
  width: 400px;
  text-align: center;
}

#map {
  height: 100%;
}

and the typescript:

ngAfterViewInit(): void {
    this.initMap();
  }
  private initMap(): void {
    let map = L.map('map').setView([ 10.536421, -61.311951 ], 15);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ'
}).addTo(map)
  }

I am trying to have the map show on the front end however it is emply and no tiles show on the map. please let me know what am i doing wrong.

and the index.html of the entire application looks like:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Damage Assessment Tool</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

It also has an error Map container not found.

1 Answers1

0

you can install ngx-leaflet which is a core Leaflet package for Angular, it will facilitate using this library. With this example, you will understand how it works.

Ala
  • 31
  • 3
  • it has an error of `Map container not found.` –  Mar 20 '22 at 09:17
  • It worked previously on the same project, however when implementing it again it doesnt –  Mar 20 '22 at 14:13
  • @Noob can you wrap initMap inside setTimeout https://stackoverflow.com/a/64523639/12208634, the error(Map container not found) is about trying to access to a dom element that isn't already rendered. – Ala Mar 21 '22 at 10:35