Leaflet: Unhandled promise rejection

(Mauro Michielon) #1

I have a plugin which make use of leaflet, it used to work fine under 5.5.

Under 6.1.x i bump into:
Unhandled promise rejection Error: Map container not found.

in my controller.js have:
"var map = null;
map = L.map('.map-vis', {
scrollWheelZoom: true,
wheelPxPerZoomLevel: 5,
wheelDebounceTime: 40,
zoomDelta: 0.5,
center: [53, 11],
zoom: 4,
maxZoom: 30,
minZoom: 3

my vis template is:
"< div ng-controller="leafletwmsController" >
< div class="map-vis">
< /div >
< /div >"

it looks like "map-vis" does not exists when it is used in the controller.js.
any clue why it stopped to work under 6?


(Nathan Reese) #2

Try wrapping map initialization inside $timeout(initMap, 0);. This will allow the current digest cycle to finish and the DOM to be updated before calling your initMap functionality.

(Mauro Michielon) #3

Thank you Nathan,

i am not sure i can follow your advice tho :frowning:
With the same outcome, I have tried both:

setTimeout(initMap(), 0);
function initMap() {
var mymap = L.map('map-vis').setView([51.505, -0.09], 13);

$timeout(initMap(), 0);
function initMap() {
var mymap = L.map('map-vis').setView([51.505, -0.09], 13);

var initMap = function () {
var mymap = L.map('map-vis').setView([51.505, -0.09], 13);
$timeout(initMap(), 0);

if you want to have a deeper look, i have uploaded a minimalistic example:

(Mauro Michielon) #4

I was distracted by other matters and i forgot to comment. I confirm you nailed it :dart:
Thanks :slight_smile:

(system) #5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.