Как предотвратить сообщение об ошибке Leaflet JS
"Контейнер карты не найден".
В идеале я хочу, чтобы моя кнопка переключения скрывала и показывала Листовка JS map, в моем AngularJS компоненте. Браузер выводит только кнопку, а не карту:
изображение вывода в веб-браузере
Вот мой код:
var app = angular.module('leafletEditor', []);
app.component('sampleMap', {
controller: 'appCtrl',
template: `
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div id="map" style="width: 400px; height: 300px; border: 1px solid #ccc"
ng-if="hideShow" >
</div>
`
}).controller('appCtrl', function ($scope, $window, $timeout) {
var self = this;
self.myCustomStyle = {
stroke: false,
fill: true,
fillColor: '#fff',
fillOpacity: 1
}
self.osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
self.osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
self.osm = L.tileLayer(self.osmUrl, { maxZoom: 18, attribution: self.osmAttrib });
self.southWest = L.latLng(-90, -180);
self.northEast = L.latLng(90, 180);
self.maxBounds = L.latLngBounds(self.southWest, self.northEast);
self.map = L.map('map', {'self.maxBounds':'self.maxBounds'}).setView([0, 0], 5);
});
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-app="leafletEditor">
<sample-map></sample-map>
</div>
</body>